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

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

@@ -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;