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
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 `<html>`. 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/`.