54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
# 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.
|