diff --git a/docs/release/v0.3-tactile-quietware.md b/docs/release/v0.3-tactile-quietware.md index ea47d5c..8754a62 100644 --- a/docs/release/v0.3-tactile-quietware.md +++ b/docs/release/v0.3-tactile-quietware.md @@ -32,61 +32,57 @@ The five rules every v0.3 PR has to clear. ## Palette -Strict 90-degree square colour harmony pegged at cobalt blue. Locked 2026-05-15. +Locked 2026-05-15 from Jake's color.adobe.com primaries. Each primary is used literally where it clears WCAG AA on the relevant background. Where it does not, a text-safe sibling at the same hue and saturation is derived. -Cobalt blue `#0047AB` is the peg. The other three semantic roles sit at exactly 90, 180 and 270 degrees from cobalt on the colour wheel: +### Source primaries -| Hue offset from cobalt | Hue value | Role | Visual character | +| Role | Primary | Hue | Notes | |---|---|---|---| -| 0deg | 215deg | `--info` | Cobalt blue | -| +90deg | 305deg | `--danger` | Magenta-pink | -| +180deg | 35deg | `--caution` | Orange-amber | -| +270deg | 125deg | `--success` | Yellow-green | - -Saturation locked at 100%. Lightness adjusted per role to clear WCAG AA 4.5:1 on the relevant background. Yellow and green are perceptually brighter than blue and magenta at the same numeric L, so caution and success use darker L values in light mode. This is perceptual-lightness compensation, not a break from the square geometry. +| `--danger` | `#FF0700` | 2deg | Pure red | +| `--info` | `#000AFF` | 238deg | Pure blue | +| `--success` | `#00FF56` | 140deg | Pure green | +| `--caution` | `#FFCD00` | 48deg | Pure yellow | ### Light mode -Cobalt literal on cream paper. Other roles match cobalt's saturation; lightness shifts per role for AA. +Cream paper base. Jake's blue passes AAA on cream and is used literally. The other three are darkened siblings for AA text contrast, with caution kept fill-only because any darkened yellow reads as olive or mustard ("looks like poop"). -| Token | Hex | Hue | L | Contrast on `#FBF8F2` | -|---|---|---|---|---| -| `--color-bg` | `#FBF8F2` | — | — | Base | -| `--color-text` | `#1D1B18` | — | — | 14.43 AAA | -| `--color-info` | `#0047AB` | 215deg | 34% | 7.96 AAA | -| `--color-danger` | `#AB009C` | 305deg | 34% | 6.17 AAA | -| `--color-caution` | `#A76200` | 35deg | 33% | 4.51 AA | -| `--color-success` | `#00850B` | 125deg | 26% | 4.54 AA | +| Token | Hex | Contrast on `#FBF8F2` | Notes | +|---|---|---|---| +| `--color-bg` | `#FBF8F2` | Base | Cream paper | +| `--color-text` | `#1D1B18` | 14.43 AAA | Near-black | +| `--color-info` | `#000AFF` | 7.96 AAA | Jake literal | +| `--color-danger` | `#E60600` | 4.51 AA | Sibling derived from `#FF0700` | +| `--color-success` | `#00852D` | 4.51 AA | Sibling derived from `#00FF56` | +| `--color-caution` | `#FFCD00` | 1.42 (fill-only) | Jake literal, fill-only convention | -**Caution remains a fill-only convention on cream.** Even at L=33%, an amber against cream sits close to the AA floor. Pill backgrounds, dots, left-border accents and icons take `--color-caution`. Foreground text inside a caution-coloured pill stays `--color-text`. This matches Material, GOV.UK and IBM Carbon practice and keeps a single token per role intact. +**Caution is fill-only on cream.** Pill backgrounds, dots, left-border accents and icons take `--color-caution`. Foreground text inside a caution-coloured pill stays `--color-text`. Matches Material, GOV.UK and IBM Carbon practice. ### Dark mode -Lifted Coffee Bean base. Same four hues, lightness lifted for AA. +Lifted Coffee Bean base. Jake's green and yellow primaries already clear AAA on the dark surface and are used literally. Red and blue need lifting because pure-saturated dark hues fail against a dark background. -| Token | Hex | Hue | L | Contrast on `#2A1620` | -|---|---|---|---|---| -| `--color-bg` | `#2A1620` | — | — | Base | -| `--color-text` | `#F3EFE7` | — | — | 13.85 AAA | -| `--color-info` | `#247FFF` | 215deg | 57% | 4.50 AA | -| `--color-danger` | `#EC00D8` | 305deg | 46% | 4.50 AA | -| `--color-caution` | `#C07000` | 35deg | 38% | 4.50 AA | -| `--color-success` | `#00AB0E` | 125deg | 34% | 5.54 AA | +| Token | Hex | Contrast on `#2A1620` | Notes | +|---|---|---|---| +| `--color-bg` | `#2A1620` | Base | Lifted Coffee Bean | +| `--color-text` | `#F3EFE7` | 13.85 AAA | | +| `--color-info` | `#7076FF` | 4.64 AA | Lifted from `#000AFF` | +| `--color-danger` | `#FF2A24` | 4.54 AA | Lifted from `#FF0700` | +| `--color-success` | `#00FF56` | 12.51 AAA | Jake literal | +| `--color-caution` | `#FFCD00` | 11.33 AAA | Jake literal | ### High contrast mode -Same four hues retained so role recognition does not flip between modes. Saturation 80%, lightness 70%. +Same four hues retained so role recognition does not flip between modes. Saturation 80%, lightness 70%. Zero texture, no translucent overlays. | Token | Hex | Contrast on black | |---|---|---| | `--color-bg` | `#000000` | Base | | `--color-text` | `#FFFFFF` | 21.00 AAA | -| `--color-info` | `#75A8F0` | 8.62 AAA | -| `--color-danger` | `#F075E5` | 8.38 AAA | -| `--color-caution` | `#F0BD75` | 12.24 AAA | -| `--color-success` | `#75F080` | 14.53 AAA | - -No texture in high-contrast mode. No translucent overlays. +| `--color-info` | `#757AF0` | 5.80 AA | +| `--color-danger` | `#F07975` | 7.70 AAA | +| `--color-success` | `#75F09F` | 14.72 AAA | +| `--color-caution` | `#F0D875` | 14.78 AAA | --- @@ -197,11 +193,12 @@ Each phase ships as its own PR. Each is flag-gated by `html[data-design="quietwa ### Phase 1 — Tokens. Landed 2026-05-15. -- `src/design-system/v0.3-quietware-tokens.css` written. 4.0 KB. +- `src/design-system/v0.3-quietware-tokens.css` written. 5.7 KB. - Three WOFF2 fonts added at `src/fonts/`: `work-sans-variable.woff2`, `work-sans-italic-variable.woff2`, `young-serif.woff2`. 287 KB total. - `src/app.css` imports the new tokens file directly after `@import "tailwindcss"`. - Inert without `data-design="quietware"` on ``. v0.2 surface unaffected. - Verified by visual inspection. Manual activation via dev tools toggling the attribute. +- Palette iterated three times this session (brand-as-semantic → cobalt-pegged square → color.adobe.com primaries). Final values locked in commit on amendment. --- @@ -214,8 +211,9 @@ Empty. Update inline as findings emerge per phase. ## References - Source brief: `inputs/inbox/2026-05-15-lumotia-colour-layout-changes.md`. -- Palette refinement round 1: `inputs/inbox/2026-05-15-re-lumotia-v03-renders-revised-palette-typography-.md`. -- Palette refinement round 2 (cobalt-square peg): chat decision 2026-05-15, captured in this doc. +- Palette refinement round 1 (brand-as-semantic): `inputs/inbox/2026-05-15-re-lumotia-v03-renders-revised-palette-typography-.md`. +- Palette refinement round 2 (cobalt-square peg): chat decision 2026-05-15. +- Palette refinement round 3 (color.adobe.com primaries): `inputs/inbox/2026-05-15-re-lumotia-v03-phase-1-landed-cobalt-pegged-square.md` + attached `2.jpeg`. Locked. - W3C COGA: `https://www.w3.org/TR/coga-usable/`. - WCAG 2.2 Understanding docs: `https://www.w3.org/WAI/WCAG22/Understanding/`. - HMRC accessibility personas: `https://personas-prototype.herokuapp.com/`. diff --git a/src/design-system/v0.3-quietware-tokens.css b/src/design-system/v0.3-quietware-tokens.css index da6c57b..653d9e8 100644 --- a/src/design-system/v0.3-quietware-tokens.css +++ b/src/design-system/v0.3-quietware-tokens.css @@ -14,27 +14,25 @@ attribute through +layout.svelte automatically. -------------------------------------------------------------- - Palette geometry: strict 90-degree square colour harmony, - pegged at cobalt blue #0047AB. + Palette source — Jake's color.adobe.com primaries, locked 2026-05-15: - Hue spacing fixed at 90 degrees from cobalt: - --info 215deg (cobalt blue, the peg) - --danger 305deg (magenta-pink) - --caution 35deg (orange-amber) - --success 125deg (yellow-green) + #FF0700 red (--danger) + #000AFF blue (--info) + #00FF56 green (--success) + #FFCD00 yellow (--caution) - Saturation locked at 100%. Lightness adjusted per role to clear - WCAG AA 4.5:1 on the relevant background. Yellow and green are - perceptually brighter than blue and magenta at the same numeric L, - so caution and success use slightly darker L values in light mode. - This is perceptual-lightness compensation, not a break from the - square geometry. + Each primary is used literally where it clears WCAG AA on the + relevant background. Where it does not (typically yellow and green + on cream paper, blue on dark Coffee Bean) a text-safe sibling at + the same hue and saturation is derived by adjusting lightness + until 4.5:1 clears. - Caution stays a fill-only role on cream paper. Bright caution - tones fail 4.5:1 as text on cream regardless of lightness. - Pill backgrounds, dots, left-border accents and icons take - --color-caution. Foreground text inside caution-coloured pills - stays --color-text. + Caution stays a fill-only role on cream paper. Any darkened yellow + reads as olive or mustard ("looks like poop", per Jake), which we + refuse to ship. Pill backgrounds, dots, left-border accents and + icons take --color-caution. Foreground text inside caution-coloured + pills stays --color-text. This matches Material, GOV.UK and IBM + Carbon practice. Typography stack (V4 pairing, locked 2026-05-15): Work Sans -> body, UI, controls, headers @@ -72,8 +70,8 @@ /* ============================================================ Quietware — dark mode default. - Lifted Coffee Bean base. Square-harmony hues, L lifted for AA - on the dark surface. + Lifted Coffee Bean base. Jake's primaries used directly where + they clear AA on the dark surface; lifted siblings for the rest. ============================================================ */ :root[data-design="quietware"] { --color-bg: #2A1620; @@ -87,11 +85,13 @@ --color-text-secondary: #BDB6A9; --color-text-tertiary: #8D8577; - --color-info: #247FFF; - --color-danger: #EC00D8; - --color-caution: #C07000; + /* --info and --danger lifted from primaries; pure red/blue too dark on dark bg. */ + --color-info: #7076FF; /* lifted from #000AFF, 4.64 AA */ + --color-danger: #FF2A24; /* lifted from #FF0700, 4.54 AA */ + /* --success and --caution use Jake's primaries directly; both already AAA on dark bg. */ + --color-success: #00FF56; /* Jake literal, 12.51 AAA */ + --color-caution: #FFCD00; /* Jake literal, 11.33 AAA */ --color-warning: var(--color-caution); - --color-success: #00AB0E; --color-sidebar: #1F0F18; --color-nav-active: #3E2A33; @@ -109,9 +109,10 @@ /* ============================================================ Quietware — light mode. - Cream paper base. Cobalt blue #0047AB appears literally as --info. - Other three roles share cobalt's hue offsets (90 / 180 / 270 deg) - with L adjusted per role to clear WCAG AA 4.5:1 on cream. + Cream paper base. Jake's blue passes AAA on cream as text and is + used literally. The other three roles use text-safe siblings + derived at the same hue and saturation (lightness shifted for AA). + Caution is fill-only on cream by convention. ============================================================ */ :root[data-design="quietware"][data-theme="light"] { --color-bg: #FBF8F2; @@ -125,11 +126,12 @@ --color-text-secondary: #5E574C; --color-text-tertiary: #74685B; - --color-info: #0047AB; /* cobalt peg, 215deg, AAA on cream */ - --color-danger: #AB009C; /* 305deg, AA on cream */ - --color-caution: #A76200; /* 35deg, AA on cream */ + --color-info: #000AFF; /* Jake literal, 7.96 AAA on cream */ + --color-danger: #E60600; /* text-safe derived from #FF0700, 4.51 AA */ + --color-success: #00852D; /* text-safe derived from #00FF56, 4.51 AA */ + /* Caution is FILL ONLY on cream. Text inside caution pills uses --color-text. */ + --color-caution: #FFCD00; /* Jake literal, fill-only by convention */ --color-warning: var(--color-caution); - --color-success: #00850B; /* 125deg, AA on cream */ --color-sidebar: #F3EEE6; --color-nav-active: #E8E2D6; @@ -142,8 +144,9 @@ /* ============================================================ Quietware — high-contrast mode. - Brand chroma steps aside. S=80%, L=70%. Zero texture. - Same four hues retained so role recognition does not flip. + Same four hues retained so role recognition does not flip between + modes. Saturation 80%, lightness 70%. Zero texture, no translucent + overlays. ============================================================ */ :root[data-design="quietware"][data-contrast="high"] { --color-bg: #000000; @@ -157,11 +160,11 @@ --color-text-secondary: #DADADA; --color-text-tertiary: #C8C8C8; - --color-info: #75A8F0; - --color-danger: #F075E5; - --color-caution: #F0BD75; + --color-info: #757AF0; /* 5.80 AA on black */ + --color-danger: #F07975; /* 7.70 AAA on black */ + --color-success: #75F09F; /* 14.72 AAA on black */ + --color-caution: #F0D875; /* 14.78 AAA on black */ --color-warning: var(--color-caution); - --color-success: #75F080; --color-sidebar: #000000; --color-nav-active: #1A1A1A;