v0.3 Phase 4j: colour grammar correction — record red, brand orange separate, wirelines bumped
Major correction per round-8 redirect.
Problem.
- Brown/copper --color-accent #C97845/#9D5F32 was dragging the UI
back into the warm-brutalist palette and competing with semantic
yellow.
- Record button about to become blue (Lumotia primary). Wrong —
record is universally red across products and OSes.
- Brand orange conflated with primary action. Orange should be
brand mark only.
Solution.
Source tokens — identity-only, never used directly in components:
--source-red #FF0700
--source-yellow #FFCD00
--source-green #00FF56
--source-blue #000AFF
--source-orange-brand #F0620A
--{role}-complement-source for the wireline layer
Component tokens — what components subscribe to. Hand-tuned hex
values verified at WCAG AA on the foreground each button pairs with.
Tonal scales (red-50..red-950 etc.) reserved for a focused future
commit; component names stay stable through that upgrade:
--button-record-bg #DC2626 (red)
--button-record-fg #FFFFFF
--button-record-border #B91C1C
--button-record-wire #00D8E0 (cyan, red's complement)
--button-primary-bg #2563EB (blue)
--button-primary-fg #FFFFFF
--button-primary-wire #F6E600 (yellow, blue's complement)
--button-danger-bg same as record (red, fg white, cyan wire)
--button-success-bg #15803D dark / #166534 light (green)
--button-success-wire #E600A0 (magenta, green's complement)
--button-caution-bg #FACC15 (yellow, fg #1A1500 near-black)
--button-caution-wire #1850D8 (blue, yellow's complement)
--brand-accent #F0620A (orange, LOGO ONLY)
--brand-wire #0A98F0 (cyan-blue, orange's complement)
--color-accent repointed:
quietware dark: #4A7BFF (was #C97845 copper)
quietware light: #1D4ED8 (was #9D5F32 copper)
HC: #005FCC (existing, unchanged)
v0.2 fallback: var(--color-accent) preserved → v0.2 stays amber.
New LumotiaButton variant: "record". Used by DictationPage's
record control. Existing v0.2 record button class swapped from
bg-accent (amber) to bg-[var(--button-record-bg)] (red). v0.2
fallback at :root maps --button-record-bg to var(--color-danger)
so non-quietware surface keeps its red-when-recording / amber-when-
idle behaviour.
Wirelines (renamed from counterlines).
--wire-width 1px / --wire-width-active 2px / --wire-width-focus 2px
--wire-opacity-dark 0.75 (was 0.32; bumped per round-8 spec)
--wire-opacity-light 0.6 (was 0.22)
--wire-opacity-active 0.9
--wire-opacity-focus 1
--wire-opacity is a mode-aware resolver (-dark dark / -light light)
--wire-style solid (dotted reserved for design-preview / drag-drop)
HC contract: --wire-width 0, --wire-width-focus 2px kept.
--focus-ring-color #005FCC (strong blue), not a decorative complement.
Legacy --counterline-* tokens kept as aliases pointing at the new
--wire-* set so Phase 4h/4i opt-in code still works.
Design-system-v2 preview now shows the new record variant alongside
primary so both red and blue button identities are visible.
Verified.
- npm run check: 0 errors, 0 warnings across 5707 files.
Phase 5c (Dictation layout migration) still queued for the next
focused sitting. This commit gives Phase 5c the correct grammar to
build on.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -351,6 +351,64 @@ LumotiaNotice now reads these via Tailwind arbitrary-value classes (`bg-[var(--n
|
||||
|
||||
Per Jake's round-5 spec: yellow stays yellow (visible signal), ochre only appears as small-text ink, and brown/khaki never represents the caution role's primary identity again.
|
||||
|
||||
### Phase 4j — Colour grammar correction (round-8 redirect). Landed 2026-05-15.
|
||||
|
||||
Major correction. Brown/copper accent was dragging the UI back into the warm-brutalist palette and competing with semantic yellow. Record button was about to become blue (wrong — record is universally red). Brand orange got conflated with primary action.
|
||||
|
||||
**New colour grammar:**
|
||||
|
||||
| Colour | Role |
|
||||
|---|---|
|
||||
| Red `#FF0700` | record / error / destructive / blocked |
|
||||
| Blue `#000AFF` | primary app action / info / processing |
|
||||
| Green `#00FF56` | ready / saved / success |
|
||||
| Yellow `#FFCD00` | caution / needs review / pending |
|
||||
| Orange `#F0620A` | Lumotia brand mark only, NOT default action |
|
||||
| Neutral | atmosphere, panels, text, disabled |
|
||||
|
||||
**Token architecture:**
|
||||
|
||||
```css
|
||||
/* Source tokens — identity-only, never used directly in components */
|
||||
--source-red, --source-yellow, --source-green, --source-blue, --source-orange-brand
|
||||
--red-complement-source, --yellow-complement-source, --green-complement-source,
|
||||
--blue-complement-source, --orange-complement-source
|
||||
|
||||
/* Component tokens — what components actually subscribe to */
|
||||
--button-record-bg/fg/border/wire (red + cyan)
|
||||
--button-primary-bg/fg/border/wire (blue + yellow)
|
||||
--button-danger-bg/fg/border/wire (red + cyan)
|
||||
--button-success-bg/fg/border/wire (green + magenta)
|
||||
--button-caution-bg/fg/border/wire (yellow + blue)
|
||||
--brand-accent + --brand-wire (orange + blue)
|
||||
```
|
||||
|
||||
Tonal scales (red-50..red-950 etc.) reserved for a focused future commit. Component tokens currently pick hand-tuned hex values verified at WCAG AA on their target foreground; the rename to scale-derived values stays invisible to callers.
|
||||
|
||||
**Visible changes:**
|
||||
|
||||
- `--color-accent` (primary action default) repointed to BLUE — was copper-clay, now `#4A7BFF` dark / `#1D4ED8` light. All buttons that read `bg-accent` (including LumotiaButton primary, LumotiaProgress default tone) inherit blue under quietware.
|
||||
- New `--brand-accent` token at `#F0620A`, separate from `--color-accent`. Used only on Lumotia logo / brand surfaces.
|
||||
- New LumotiaButton variant `record` (red, with cyan wireline complement). Dictation page's record button repointed to `--button-record-bg`. The existing recording-state still uses `--color-danger` which now resolves to red.
|
||||
- v0.2 fallback tokens defined at `:root` so non-quietware app keeps rendering with v0.2 amber.
|
||||
|
||||
**Wirelines (renamed from counterlines):**
|
||||
|
||||
```
|
||||
--wire-width: 1px (Level 1 quiet)
|
||||
--wire-width-active: 2px (Level 2 active)
|
||||
--wire-width-focus: 2px (Level 2 focus)
|
||||
--wire-opacity: var(--wire-opacity-dark) / -light per mode
|
||||
--wire-opacity-dark: 0.75 (was 0.32 — bumped for visibility)
|
||||
--wire-opacity-light: 0.6 (was 0.22)
|
||||
--wire-opacity-focus: 1
|
||||
--wire-style: solid (dotted reserved for design-preview / drag-drop)
|
||||
```
|
||||
|
||||
Legacy `--counterline-*` tokens kept as aliases pointing at the new `--wire-*` set so Phase 4h/4i opt-in code still works.
|
||||
|
||||
HC contract zeroes `--wire-width` and `--wire-opacity-*` but keeps `--wire-width-focus: 2px`. HC focus ring is `--focus-ring-color: #005FCC` (strong blue), not a complement.
|
||||
|
||||
### Phase 4i — Counterlines as interaction-affordance identity. Landed 2026-05-15.
|
||||
|
||||
Round-7 redirect (Option D): move counterlines from notices (where they're invisible) to interactive controls (where they add identity). Three-level model:
|
||||
|
||||
Reference in New Issue
Block a user