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.
No images, and no diagram either
Days 104, 105 and 106 each led with a drawn figure. This one has none, and the absence is the argument rather than a shortcut: the successful version of every shot on this page looks like it came straight out of the camera, so a before-and-after would be a conjuring trick rather than evidence. A page about invisible work should be able to make its case in words, and if it cannot, the case is weak.
The comparison is prose, in two columns
“What you saw” against “what was there”, with the second column carrying the accent rule. It is an ordered list rather than a table because you read one pair at a time and never compare row four's left column with row seven's — the same test that made day 106 a definition list and day 105 a table.
The accent IS the expensive state
Unusually for this library, --plate-dear is the accent rather than a separate
token — on this page “expensive” is not a side note, it is the argument
the whole section exists to make. It is still never the only signal: every multiplier is
printed as a number, so the colour is decoration on top of a figure that already says it.
Every total is summed
The hours, the shot count, the cheapest and dearest plate conditions and the factor between
them are all computed from the two arrays in config.ts. The hero button reads
“the invisible N hours” from the same sum, so an edit to one row cannot leave
the button lying.
Type
Recursive — display and body
Noto Sans Mono — 307 h · ×4.0 · v40
Hours, multipliers and version numbers all sit in columns that have to align, so the mono face is load-bearing. Neither appears in days 1–106.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #F1F1F3 | Neutral grey | |
--color-bg-alt | #E2E2E6 | Banding | |
--color-surface | #FFFFFF | Cards | |
--color-text | #17181C | 15.73 / 13.73 / 17.74:1 · AAA | |
--color-text-muted | #636370 | 5.25 / 4.58 / 5.92:1 · AA | |
--color-border | #80808E | 3.45 / 3.01 / 3.89 — non-text only | |
--color-accent | #C32036 | Hue 352 — 5.20 / 4.54 / 5.87:1 · AA | |
--plate-cheap | #246B8F | Cheap multipliers — 5.21 / 4.55 / 5.87:1 | |
--color-band | #17181C | Inverted band | |
--color-on-band | #F1F1F3 | 15.73:1 on band · AAA | |
--color-on-band-muted | #A2A2AE | 7.02:1 on band · AAA | |
--color-accent-on-band | #ED8492 | 7.02:1 on band · AAA |
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.