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.
Atkinson Hyperlegible is not decoration
It was designed for low-vision readers, with letterforms drawn to be distinguishable rather than harmonious. A page whose spine is a dense three-state table is exactly where that earns its place, and it is the first time in this library a face has been chosen for a reason other than register.
Three states, and the third is the argument
A casting page with no "hire somebody else" column is a page claiming range again, in a
table. Three of the nine rows are refusals. Each state is a word with a glyph from a
data-glyph ::before, and only then a colour —
--cast-rare is a warm brown rather than a red because "rarely cast" is a fact
rather than a fault, and the red is kept for the required-field marker, where it means
something.
The markup refuses what the page refuses
No knowsAbout list. It would have been the obvious thing to inherit from the
previous template's schema, and it would have enumerated nine capabilities on a page whose
entire argument is that three of them are not capabilities. The structured data says less
than it could, on purpose — the fourth day running that the markup and the page have
been allowed to assert different amounts.
No audio, and not for day 112's reason
Day 112 ships generated click tracks, because a metronome is honestly a metronome. A voice cannot be generated that way: the performer is fictional, so any recording here would be somebody else's voice presented as hers — closer to the stock-headshot objection than to the click-track exemption. The page says so rather than leaving the absence to be noticed.
The FAQ is not an accordion
Every other template in this library puts the FAQ in <details>. Here it
is a definition list: a question and its answer are a term and a definition, all six are
short, and six open is less work for a reader than six closed. It is also the change that
took this template past the divergence gate — which is worth recording honestly,
because the reasoning above is true and it is not why the change was made first.
One drawn figure, and it is aria-hidden
Three measured booth values against their thresholds. Every number it draws is printed in
the list beside it, so the SVG is aria-hidden — a chart that adds
nothing to the text should not be announced twice. The bars are the measurement and the
red rules are the limits, and both are stated in words in the same row.
Type
Saira Condensed — display
Oxygen Mono — $450 · 100 lines · 40+
Body is Atkinson Hyperlegible. None of the three appears in days 1–115.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #F3F6F5 | Light cool grey-green | |
--color-bg-alt | #E4E9E7 | Banding | |
--color-surface | #FFFFFF | Cards | |
--color-text | #121716 | 16.65 / 14.75 / 18.11:1 · AAA | |
--color-text-muted | #5B6B68 | 5.15 / 4.56 / 5.60:1 · AA | |
--color-border | #728884 | 3.47 / 3.07 / 3.77 — non-text only | |
--cast-yes | #137663 | Booked regularly, and the accent — 5.08 / 4.50 / 5.53:1 | |
--cast-rare | #9A561B | Can do, rarely cast — 5.19 / 4.60 / 5.64:1 | |
--cast-never | #C23030 | Hire somebody else — 5.14 / 4.55 / 5.59:1 | |
--color-band | #121716 | Inverted band | |
--color-on-band | #F3F6F5 | 16.65:1 on band · AAA | |
--color-on-band-muted | #93A5A1 | 7.02:1 on band · AAA | |
--color-accent-on-band | #20C5A4 | 8.26: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.