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
#F5F2ED — Warm stone — page ground
--color-bg-alt
#E8E3DA — Banding
--color-text
#231E22 — 14.69:1 on ground · AAA
--color-text-muted
#5C5257 — 6.72:1 on ground · AA
--color-accent
#7C3F58 — Wine · 6.94:1 on ground · AAA
--color-on-accent
#FFFFFF — 7.75:1 on wine · AAA
--color-on-ink
#FFFFFF — 16.40:1 on ink band · AAA
--color-on-ink-muted
#CFC6C9 — 9.82:1 on ink band · AAA
--color-accent-on-ink
#D9A0B6 — 7.54:1 on ink band · AAA
--spend-none
#4F5B52 — Calendar: no spend · 7.12:1 on white
--spend-low
#6B5B2E — Calendar: light · 6.64:1 on white
--spend-med
#7C3F58 — Calendar: steady · 7.75:1 on white
--spend-high
#8A3B12 — Calendar: peak · 7.73:1 on white
Calendar spend levels
Word first, colour second, so the twelve-month band survives greyscale and reads correctly aloud. “No spend” is a real state and four months carry it.
No spend Light Steady Peak
Type
Rokkitt — display
Catamaran — body. Neither font appears in days 1–80.