wdmUI/decisions/0001-paleta-complementaria.md

ADR-0001 · Complementary palette over classic LCARS

Status: accepted Date: 2026-05 Decision-makers: design + product

Context

Early UI sketches used classic LCARS palette (orange/peach/yellow on black). The aesthetic worked for demonstrating the visual language but had two practical problems:

1. Brand collision — Blocao's logo and brand mark are lime green (#9FCB3A). Orange-dominant LCARS placed the brand in the same warm-color family, diluting it visually.
2. Domain semantics — orange traditionally means "warning" in industrial UI. Using orange as the dominant neutral color made every screen feel mildly alarming and made it impossible to use orange for actual warnings.

Decision

Adopt a complementary palette rotated ~180° from classic LCARS. Cyan-dominant instead of orange-dominant.

Token palette (final):

--ink:    #66CCFF   /* primary navigation, dominant */
--cam:    #6699FF   /* cameras / VLAN-10 */
--hai:    #CC99CC   /* compute / VLAN-20 (mauve) */
--iot:    #99CC99   /* health / OK states (green) */
--mgmt:   #CCCC99   /* management / VLAN-30 (olive) */
--wan:    #66CCCC   /* WAN / external (turquoise) */
--warn:   #99FFFF   /* warnings (bright cyan) */
--brand:  #9FCB3A   /* Blocao green — logo and brand only */

The brand green is isolated from semantic UI. It only appears for logo, brand chip in the status strip, and explicit brand moments. UI states never reuse brand color.

Consequences

Good:

• Brand green stands out against cyan-dominant chrome.
• Warnings can use bright cyan (--warn) which contrasts against the cyan-blue chrome without being confused with normal text.
• The palette feels distinctive without losing LCARS character.

Bad / trade-offs:

• Less immediately recognizable as "LCARS" to Star Trek fans.
• Some viewers in the early demos commented "feels like a different visual language" — that's actually intended but worth noting.

Alternatives considered

• Pure classic LCARS: rejected for reasons above.
• Custom palette unrelated to LCARS: would lose the visual hook that makes Blocao memorable.
• Brand-color-as-dominant (lime green everywhere): too aggressive, reduces accessibility on dark backgrounds, exhausts the eye.

See also

• mockups/palette-comparison.html — interactive toggle between classic and complementary.
• docs/03-design/design-tokens.md — the full token table.