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
#AEB6BA — Concrete. Lightness 71% — the gap in the library
--color-bg-alt
#9CA5AA — Darker banding
--color-surface
#E9EDEF — Cards and the board float above the ground
--color-text
#0E1215 — 9.14:1 on ground · 7.51:1 on alt · AAA
--color-text-muted
#2E3539 — 4.97:1 on the DARKER ground · AA
--color-border
#4C555B — 3.70:1 on ground — structural UI, not decoration
--color-band
#0E1215 — Inverted band
--color-on-band
#F1F4F5 — 17.02:1 on band · AAA
--color-on-band-muted
#A9B2B7 — 8.73:1 on band · AAA
--color-accent
#F2C230 — Amber, hue 45°. Fill only — 11.23:1 with near-black on top
--color-required
#0E1215 — Decoration; the asterisk is announced in words
The gap was lightness, not hue
All 89 grounds shipped before this were measured. They sit either above 90% lightness (35 tinted creams and pales) or below 10% (17 dark slates) — nothing in between. This one is at 71%. A first draft used dark slate with an amber accent and was discarded for landing within a few degrees of hvac-service, which is already dark slate with a tan accent.
What a mid ground costs
Muted text nearly stops working, so --color-text-muted was solved against the
darker of the two grounds rather than the lighter one, and borders were pushed to
#4C555B to clear 3:1 as structural UI. Amber is a fill only — as text on the ground it is
1.8:1 and would fail, so it never appears that way. Hierarchy comes from weight and rule
thickness instead of lightness, which suits a price board.
The break-even is arithmetic
The amber cell on the board is ceil(monthly / single), computed in the page.
Change a price in config.ts and the claim follows it. It is the one number on
a wash tariff that is normally not printed.
Type
Unbounded — display
$12 · $25 · 3 washes
Unbounded is wide and geometric and reads as signage, which is what a tariff board is. Radio Canada carries the body copy. Neither face appears in days 1–89.