Idris Falk

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

Colour tokens with measured contrast ratios
SwatchTokenValueMeasured
--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.