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
#F7F5F0 — Paper
--color-bg-alt
#E8E4DA — Banding
--color-text
#1A1A18 — 16.00:1 on paper · AAA
--color-text-muted
#57544C — 6.94:1 on paper · AA
--color-band
#1A1A18 — Inverted band
--color-on-band
#FFFFFF — 17.43:1 on band · AAA
--color-on-band-muted
#B5B1A6 — 8.14:1 on band · AAA
--color-accent
#C42B1C — Signal red. Fill only — 5.66:1 with white on top
--color-accent-text
#9E2317 — 7.12:1 on paper · AAA
--color-accent-on-band
#F4796B — 6.47:1 on band · AA
--color-required
#9E2317 — Decoration; the asterisk is announced in words
One saturated colour, spent on one thing
Red only ever marks a consequence — a declined recommendation that came back and cost more. It appears twice on the whole demo page. If it were used for emphasis generally it would stop meaning that, and the ledger would lose the one signal it needs.
Status is a word
Every ledger entry states its status in text. The border style and the fill repeat it.
Done Declined Came back Open
Type
Darker Grotesque — display
Azeret Mono — 148,300 mi · $1,284
The odometer column is the page's axis, so its figures are tabular and monospaced and the eye can run straight down them. Neither face appears in days 1–87.