Reference
Design system
Every ratio was computed with tools/a11y/contrast.py, not eyeballed. This page is
noindex: it documents the template for whoever builds with it.
Colour tokens
--color-bg
#F2C400 — Safety yellow — the PAGE, not an accent. First saturated ground in the library.
--color-bg-alt
#E0B500 — Banding
--color-surface
#F7D53A — Lifted panel, still yellow
--color-text
#141200 — 11.35:1 on yellow · AAA
--color-text-muted
#4A3D00 — 6.47:1 on yellow · AA
--color-border
#141200 — Borders are ink — brutalist: structure shows
--color-band
#111111 — The only non-yellow surface
--color-on-band
#FFFFFF — 18.88:1 on band · AAA
--color-on-band-muted
#B9B9B9 — 9.62:1 on band · AAA
--color-accent-on-band
#F2C400 — 11.39:1 on band · AAA
--color-required
#7A1500 — 6.55:1 on yellow · AA
No accent colour
On a saturated ground there is no second hue to accent with — ink IS the accent. Emphasis
comes from scale and from the black band instead, which is why the load fractions are set at
clamp(3.5rem, 11vw, 7rem) and the prose stays small.
1/2
Half load
The band
The only non-yellow surface, used where the page has something uncomfortable to say.
Type
Anybody — wide display
Wix Madefor Display — body. Neither font appears in days 1–84.