jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3 Phase 1: palette amendment to color.adobe.com primaries

Browse Source 
Third palette iteration. Source: Jake's color.adobe.com primaries
attached to the Phase 1 review reply 2026-05-15:

    #FF0700  red     -> --color-danger
    #000AFF  blue    -> --color-info
    #00FF56  green   -> --color-success
    #FFCD00  yellow  -> --color-caution

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.

  LIGHT MODE on cream paper
    --info     #000AFF  Jake literal       7.96 AAA
    --danger   #E60600  sibling            4.51 AA
    --success  #00852D  sibling            4.51 AA
    --caution  #FFCD00  Jake literal       1.42 (fill-only by convention)

  DARK MODE on lifted Coffee Bean #2A1620
    --info     #7076FF  lifted from blue   4.64 AA
    --danger   #FF2A24  lifted from red    4.54 AA
    --success  #00FF56  Jake literal       12.51 AAA
    --caution  #FFCD00  Jake literal       11.33 AAA

  HIGH CONTRAST on black, S=80% L=70%
    --info     #757AF0  5.80 AA
    --danger   #F07975  7.70 AAA
    --success  #75F09F  14.72 AAA
    --caution  #F0D875  14.78 AAA

Caution remains a fill-only convention on cream. Any darkened yellow
reads as olive or mustard, which Jake refused at the round-2 stage
(see capture 2026-05-15-re-lumotia-v03-renders-revised-palette-).

No component changes. No behavioural changes. Phase 1 still inert
without html[data-design="quietware"]. Supersedes the cobalt-pegged
square palette in commit f718ade. Geometry geometry argument retired;
canonical brand primaries take its place.

Plan doc updated with the new palette tables and the round-3
refinement reference. Phase 1 log notes the three-iteration journey.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-05-15 12:51:38 +01:00
parent f718aded16
commit 7075c205fc
2 changed files with 76 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/release/v0.3-tactile-quietware.md
View File

@@ -32,61 +32,57 @@ The five rules every v0.3 PR has to clear.
## Palette ## 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 | | `--danger` | `#FF0700` | 2deg | Pure red |
| +90deg | 305deg | `--danger` | Magenta-pink | | `--info` | `#000AFF` | 238deg | Pure blue |
| +180deg | 35deg | `--caution` | Orange-amber | | `--success` | `#00FF56` | 140deg | Pure green |
| +270deg | 125deg | `--success` | Yellow-green | | `--caution` | `#FFCD00` | 48deg | Pure yellow |
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.
### Light mode ### 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` | | Token | Hex | Contrast on `#FBF8F2` | Notes |
|---|---|---|---|---| |---|---|---|---|
| `--color-bg` | `#FBF8F2` | — | — | Base | | `--color-bg` | `#FBF8F2` | Base | Cream paper |
| `--color-text` | `#1D1B18` | — | — | 14.43 AAA | | `--color-text` | `#1D1B18` | 14.43 AAA | Near-black |
| `--color-info` | `#0047AB` | 215deg | 34% | 7.96 AAA | | `--color-info` | `#000AFF` | 7.96 AAA | Jake literal |
| `--color-danger` | `#AB009C` | 305deg | 34% | 6.17 AAA | | `--color-danger` | `#E60600` | 4.51 AA | Sibling derived from `#FF0700` |
| `--color-caution` | `#A76200` | 35deg | 33% | 4.51 AA | | `--color-success` | `#00852D` | 4.51 AA | Sibling derived from `#00FF56` |
| `--color-success` | `#00850B` | 125deg | 26% | 4.54 AA | | `--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 ### 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` | | Token | Hex | Contrast on `#2A1620` | Notes |
|---|---|---|---|---| |---|---|---|---|
| `--color-bg` | `#2A1620` | — | — | Base | | `--color-bg` | `#2A1620` | Base | Lifted Coffee Bean |
| `--color-text` | `#F3EFE7` | — | — | 13.85 AAA | | `--color-text` | `#F3EFE7` | 13.85 AAA | |
| `--color-info` | `#247FFF` | 215deg | 57% | 4.50 AA | | `--color-info` | `#7076FF` | 4.64 AA | Lifted from `#000AFF` |
| `--color-danger` | `#EC00D8` | 305deg | 46% | 4.50 AA | | `--color-danger` | `#FF2A24` | 4.54 AA | Lifted from `#FF0700` |
| `--color-caution` | `#C07000` | 35deg | 38% | 4.50 AA | | `--color-success` | `#00FF56` | 12.51 AAA | Jake literal |
| `--color-success` | `#00AB0E` | 125deg | 34% | 5.54 AA | | `--color-caution` | `#FFCD00` | 11.33 AAA | Jake literal |
### High contrast mode ### 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 | | Token | Hex | Contrast on black |
|---|---|---| |---|---|---|
| `--color-bg` | `#000000` | Base | | `--color-bg` | `#000000` | Base |
| `--color-text` | `#FFFFFF` | 21.00 AAA | | `--color-text` | `#FFFFFF` | 21.00 AAA |
| `--color-info` | `#75A8F0` | 8.62 AAA | | `--color-info` | `#757AF0` | 5.80 AA |
| `--color-danger` | `#F075E5` | 8.38 AAA | | `--color-danger` | `#F07975` | 7.70 AAA |
| `--color-caution` | `#F0BD75` | 12.24 AAA | | `--color-success` | `#75F09F` | 14.72 AAA |
| `--color-success` | `#75F080` | 14.53 AAA | | `--color-caution` | `#F0D875` | 14.78 AAA |
No texture in high-contrast mode. No translucent overlays.
--- ---
@@ -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. ### 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. - 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"`. - `src/app.css` imports the new tokens file directly after `@import "tailwindcss"`.
- Inert without `data-design="quietware"` on `<html>`. v0.2 surface unaffected. - Inert without `data-design="quietware"` on `<html>`. v0.2 surface unaffected.
- Verified by visual inspection. Manual activation via dev tools toggling the attribute. - 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 ## References
- Source brief: `inputs/inbox/2026-05-15-lumotia-colour-layout-changes.md`. - 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 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, captured in this doc. - 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/`. - W3C COGA: `https://www.w3.org/TR/coga-usable/`.
- WCAG 2.2 Understanding docs: `https://www.w3.org/WAI/WCAG22/Understanding/`. - WCAG 2.2 Understanding docs: `https://www.w3.org/WAI/WCAG22/Understanding/`.
- HMRC accessibility personas: `https://personas-prototype.herokuapp.com/`. - HMRC accessibility personas: `https://personas-prototype.herokuapp.com/`.

77
src/design-system/v0.3-quietware-tokens.css
View File

@@ -14,27 +14,25 @@
attribute through +layout.svelte automatically. attribute through +layout.svelte automatically.
-------------------------------------------------------------- --------------------------------------------------------------
Palette geometry: strict 90-degree square colour harmony, Palette source — Jake's color.adobe.com primaries, locked 2026-05-15:
pegged at cobalt blue #0047AB.
Hue spacing fixed at 90 degrees from cobalt: #FF0700 red (--danger)
--info 215deg (cobalt blue, the peg) #000AFF blue (--info)
--danger 305deg (magenta-pink) #00FF56 green (--success)
--caution 35deg (orange-amber) #FFCD00 yellow (--caution)
--success 125deg (yellow-green)
Saturation locked at 100%. Lightness adjusted per role to clear Each primary is used literally where it clears WCAG AA on the
WCAG AA 4.5:1 on the relevant background. Yellow and green are relevant background. Where it does not (typically yellow and green
perceptually brighter than blue and magenta at the same numeric L, on cream paper, blue on dark Coffee Bean) a text-safe sibling at
so caution and success use slightly darker L values in light mode. the same hue and saturation is derived by adjusting lightness
This is perceptual-lightness compensation, not a break from the until 4.5:1 clears.
square geometry.
Caution stays a fill-only role on cream paper. Bright caution Caution stays a fill-only role on cream paper. Any darkened yellow
tones fail 4.5:1 as text on cream regardless of lightness. reads as olive or mustard ("looks like poop", per Jake), which we
Pill backgrounds, dots, left-border accents and icons take refuse to ship. Pill backgrounds, dots, left-border accents and
--color-caution. Foreground text inside caution-coloured pills icons take --color-caution. Foreground text inside caution-coloured
stays --color-text. pills stays --color-text. This matches Material, GOV.UK and IBM
Carbon practice.
Typography stack (V4 pairing, locked 2026-05-15): Typography stack (V4 pairing, locked 2026-05-15):
Work Sans -> body, UI, controls, headers Work Sans -> body, UI, controls, headers
@@ -72,8 +70,8 @@
/* ============================================================ /* ============================================================
Quietware — dark mode default. Quietware — dark mode default.
Lifted Coffee Bean base. Square-harmony hues, L lifted for AA Lifted Coffee Bean base. Jake's primaries used directly where
on the dark surface. they clear AA on the dark surface; lifted siblings for the rest.
============================================================ */ ============================================================ */
:root[data-design="quietware"] { :root[data-design="quietware"] {
--color-bg: #2A1620; --color-bg: #2A1620;
@@ -87,11 +85,13 @@
--color-text-secondary: #BDB6A9; --color-text-secondary: #BDB6A9;
--color-text-tertiary: #8D8577; --color-text-tertiary: #8D8577;
--color-info: #247FFF; /* --info and --danger lifted from primaries; pure red/blue too dark on dark bg. */
--color-danger: #EC00D8; --color-info: #7076FF; /* lifted from #000AFF, 4.64 AA */
--color-caution: #C07000; --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-warning: var(--color-caution);
--color-success: #00AB0E;
--color-sidebar: #1F0F18; --color-sidebar: #1F0F18;
--color-nav-active: #3E2A33; --color-nav-active: #3E2A33;
@@ -109,9 +109,10 @@
/* ============================================================ /* ============================================================
Quietware — light mode. Quietware — light mode.
Cream paper base. Cobalt blue #0047AB appears literally as --info. Cream paper base. Jake's blue passes AAA on cream as text and is
Other three roles share cobalt's hue offsets (90 / 180 / 270 deg) used literally. The other three roles use text-safe siblings
with L adjusted per role to clear WCAG AA 4.5:1 on cream. 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"] { :root[data-design="quietware"][data-theme="light"] {
--color-bg: #FBF8F2; --color-bg: #FBF8F2;
@@ -125,11 +126,12 @@
--color-text-secondary: #5E574C; --color-text-secondary: #5E574C;
--color-text-tertiary: #74685B; --color-text-tertiary: #74685B;
--color-info: #0047AB; /* cobalt peg, 215deg, AAA on cream */ --color-info: #000AFF; /* Jake literal, 7.96 AAA on cream */
--color-danger: #AB009C; /* 305deg, AA on cream */ --color-danger: #E60600; /* text-safe derived from #FF0700, 4.51 AA */
--color-caution: #A76200; /* 35deg, AA on cream */ --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-warning: var(--color-caution);
--color-success: #00850B; /* 125deg, AA on cream */
--color-sidebar: #F3EEE6; --color-sidebar: #F3EEE6;
--color-nav-active: #E8E2D6; --color-nav-active: #E8E2D6;
@@ -142,8 +144,9 @@
/* ============================================================ /* ============================================================
Quietware — high-contrast mode. Quietware — high-contrast mode.
Brand chroma steps aside. S=80%, L=70%. Zero texture. Same four hues retained so role recognition does not flip between
Same four hues retained so role recognition does not flip. modes. Saturation 80%, lightness 70%. Zero texture, no translucent
overlays.
============================================================ */ ============================================================ */
:root[data-design="quietware"][data-contrast="high"] { :root[data-design="quietware"][data-contrast="high"] {
--color-bg: #000000; --color-bg: #000000;
@@ -157,11 +160,11 @@
--color-text-secondary: #DADADA; --color-text-secondary: #DADADA;
--color-text-tertiary: #C8C8C8; --color-text-tertiary: #C8C8C8;
--color-info: #75A8F0; --color-info: #757AF0; /* 5.80 AA on black */
--color-danger: #F075E5; --color-danger: #F07975; /* 7.70 AAA on black */
--color-caution: #F0BD75; --color-success: #75F09F; /* 14.72 AAA on black */
--color-caution: #F0D875; /* 14.78 AAA on black */
--color-warning: var(--color-caution); --color-warning: var(--color-caution);
--color-success: #75F080;
--color-sidebar: #000000; --color-sidebar: #000000;
--color-nav-active: #1A1A1A; --color-nav-active: #1A1A1A;