Tokens
Live values, read back out of the cascade rather than copied from it, so a swatch here can never drift from the token it claims to show.
Surfaces
--lab-void
…
Deepest well · behind code, inset areas
--lab-bg
…
Page background
--lab-surface
…
Cards, raised panels
--lab-raised
…
Panel headers, hover fills
--lab-border
…
Box edges · cards, tags, inline code
--lab-line
…
List markers, the quote bar
--lab-frame
…
Header, footer, page-title lines, the CV spine
--lab-divider
…
Every other line inside the page
Ink
--lab-ink
…
Body text
--lab-muted
…
Secondary prose
--lab-dim
…
Micro-labels, metadata
Accents
--lab-accent-1
…
Interaction · links, focus, active
--lab-accent-2
…
State · highlights, current
--lab-decor
…
Decoration only — glow, edges
--lab-warn
…
Sparing · warnings, deletions
Contrast matrix
Every foreground against every background, computed live against WCAG AA — 4.5:1 for body text, 3:1 for large text. This is what catches magenta-on-violet automatically instead of by eye, and it re-runs whenever you change the base candidate.
| Foreground | void | bg | surface | raised |
|---|---|---|---|---|
| ink | Aa… | Aa… | Aa… | Aa… |
| muted | Aa… | Aa… | Aa… | Aa… |
| dim | Aa… | Aa… | Aa… | Aa… |
| accent-1 | Aa… | Aa… | Aa… | Aa… |
| accent-2 | Aa… | Aa… | Aa… | Aa… |
| decor | Aa… | Aa… | Aa… | Aa… |
| warn | Aa… | Aa… | Aa… | Aa… |
A FAIL is not automatically a problem — it means that pair is not allowed to carry text.
Worth noting, because it contradicts the design plan: at these values magenta passes AA on every surface except the raised one. The plan assumed it would fail. It stays decoration anyway — seven per cent of men cannot reliably separate it from the coral beside it, and an accent that has to be explained is not an accent — but the reason is now the real one rather than a contrast number that was never checked.
The two accents
Settled 2026-09-19: both, not one. Two accents only work if each has exactly one job — the moment either gets used because it looks better there, colour stops carrying information and becomes decoration, at which point one accent would have been the better choice. Each theme supplies its own pair.
Interaction
--lab-accent
Links, focus rings, hover, anything the user can act on.
Never decoration. Never state.
State
--lab-warm
Current page, active filter, shipped status. Not the primary button — that is cool, settled by experiment 03.
Never a link.
In use
Two constraints come with the pair. Neither accent is ever a page or card background, or body text — they live on edges, rules, micro-labels, focus rings, glow, and the one filled control the fill rule allows. And colour is never the only signal: if warm marks the current page, that page also gets weight or an underline, because roughly 8% of men cannot reliably separate these hues.
Glow ramp
The reference's bloom, translated to interface. Too little and it is invisible; too much and it looks like a stock gradient hero. The right answer is probably lower than it feels.
Strength 0.12
Rey’s Lab
Glow sits behind content and never under text it has to stay legible against.
Strength 0.28
Rey’s Lab
Glow sits behind content and never under text it has to stay legible against.
Strength 0.50
Rey’s Lab
Glow sits behind content and never under text it has to stay legible against.
Strength 0.80
Rey’s Lab
Glow sits behind content and never under text it has to stay legible against.