Reference
Design system
Every ratio was computed with tools/a11y/contrast.py against all three grounds.
This page is noindex: it documents the template for whoever builds with it.
The frame budget uses real meters
<meter> is the correct element for a value inside a known range:
min, max, low, high and
optimum are its own attributes, so each reading and its bounds are announced
with no ARIA at all. A div with a coloured bar would have needed a pile of
aria-* to say half as much, and would still have been a picture rather than a
value.
The cut list IS a table
Four columns you read across, weighing what was dropped against what it would have cost and whether it should come back. Day 107's ledger was an ordered list because you read one pair at a time and never compare rows; this is the opposite case. Five templates into asking that question fresh each day, it is still the thing doing most of the work to keep them apart.
No screenshots, and this one needs saying
The game on this page is fictional. Fabricating screenshots of it would be the single dishonest thing on a page whose whole argument is about publishing what usually stays hidden, so there are none and the FAQ says why. Anyone using this template should put real footage here — the layout leaves room for it above the cut list.
Shipped and cut are not the accent
--state-shipped and --state-cut are their own tokens. On a page
whose spine is a list of decisions, “cut” must not share a colour with a
heading — and every row prints its dev-week figure and a Yes/No either way, so hue is
the third signal rather than the first.
Every total is computed
22 shipped, 18 cut, 131 dev-weeks avoided, 14.7 ms of a 16.6 ms budget, the before-and-after
frame times and the largest single win are all derived from the two arrays in
config.ts. The hero buttons read from the same sums, so an edit to one row
cannot leave a button lying.
Type
Chakra Petch — display
Fragment Mono — 16.6 ms · 22 w · 131
Milliseconds and dev-weeks sit in columns that have to align, so the mono face is load-bearing. Neither appears in days 1–107.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #12111A | Near-black violet | |
--color-bg-alt | #191823 | Banding | |
--color-surface | #22212E | Cards | |
--color-text | #ECEAF4 | 15.74 / 14.75 / 13.31:1 · AAA | |
--color-text-muted | #93849A | 5.36 / 5.02 / 4.53:1 · AA | |
--color-border | #75677C | 3.56 / 3.33 / 3.01 — non-text only | |
--color-accent | #EF3EB4 | Hue 320 — 5.37 / 5.03 / 4.54:1 · AA | |
--state-shipped | #28BD73 | Shipped — 7.69 / 7.20 / 6.50:1 | |
--state-cut | #C87420 | Cut — 5.33 / 4.99 / 4.51:1 | |
--color-band | #ECEAF4 | The band inverts: light on a dark site | |
--color-on-band | #12111A | 15.74:1 on band · AAA | |
--color-on-band-muted | #5F5365 | 6.06:1 on band · AA | |
--color-accent-on-band | #BA1583 | 5.01:1 on band · AA |
The border token clears 3:1 against all three grounds, which is what WCAG 1.4.11 asks of a non-text boundary. It is never used for text.