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.
Two colours, because there are two kinds of day
Blue is work and every elapsed figure. Rust is waiting, and it appears on queue bars, on the queue total in the headline, and on the words cannot be moved — nowhere else on the page. The chart legend names both in words before either is used, because the distinction is the argument and it cannot be carried by hue.
The chart is made of divs
Two absolutely-positioned spans per row, sized in percent of the total span, and the whole
track is aria-hidden. Both numbers a bar encodes — the day it starts and
how long it lasts — are printed as text in the same row, so the chart is a way of
seeing an arithmetic that is fully present without it. Day 119 drew its argument in SVG;
doing that again here would have made it a house style rather than a decision.
Every figure in the prose is computed
The 254-day span, the queue total, the work total, the longest single stage, the cost per
copy and the demo funnel ratio are all arithmetic over config.ts at build
time. Change one stage and the headline, the paragraph under it and the chart all move
together, which is the only way a page of numbers stays true after somebody edits it.
The markup says MORE than usual, for once
Six days running, the structured data here has deliberately said less than the page,
because schema had no vocabulary for the distinction being drawn. This is the opposite
case. CreativeWork carries dateCreated as well as
datePublished, and the gap between them is precisely what this page is about,
so the MusicAlbum emits both. Almost nothing on the web publishes
dateCreated for a record. aggregateRating and
offers are still declined.
Type
Labrada — display
Anek Latin — 254 days · 118 in a queue · $16.00 a copy
Body is the system stack. Anek Latin carries every figure with tabular-nums
so the day columns line up down the lane chart. Neither face appears in days
1–119.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #F2F1EC | Newsprint grey — cooler and greyer than day 118 manila | |
--color-bg-alt | #E7E5DE | Banding | |
--color-surface | #FBFAF7 | Cards | |
--color-text | #17181A | 15.71 / 14.09 / 17.02:1 · AAA | |
--color-text-muted | #585B60 | 6.03 / 5.41 / 6.53:1 · AA | |
--color-border | #7A7D82 | 3.65 / 3.28 / 3.96 — non-text only | |
--color-accent | #145A8C | Work, and every elapsed figure — 6.47 / 5.80 / 7.01:1 · AA | |
--color-queue | #A34400 | Waiting, and nothing else — 5.49 / 4.92 / 5.95:1 · AA | |
--color-band | #17181A | The band inverts: dark on a light site | |
--color-on-band | #F2F1EC | 15.71:1 on band · AAA | |
--color-on-band-muted | #9C9FA6 | 6.70:1 on band · AA | |
--color-accent-on-band | #6FB3E0 | 7.78:1 on band · AAA | |
--color-queue-on-band | #FF9155 | 7.98: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.