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 figure colours, because they are two kinds of number
Downloads take the accent; measured playback takes --measured. The entire
argument of the page is that those are different facts about the same show, so they must
not share a hue — and the table caption says which is which in words, because the
colour is a shortcut for a reader who already knows, not the carrier of the distinction.
Completion uses real meters
<meter> with min, max, low and
high as its own attributes, so each reading and its bounds are announced with
no ARIA at all. The download bar beside it is decorative and
aria-hidden, because its number is printed in the next cell.
The markup publishes no audience figure
PodcastSeries with PodcastEpisode children, and deliberately no
listener or download count anywhere in it. Schema.org has no vocabulary that distinguishes
a download from a listen; emitting 18,400 as an undifferentiated figure would undo the
page's argument in the one place a machine reads. Fifth day running that the structured
data has been allowed to say less than the page.
The FAQ is an accordion again
Day 116 made its FAQ a definition list and gave a real reason for it. Repeating that here would turn a one-off decision into a house style, which is the thing this project spends most of its effort not building. Going back is the point.
Type
Urbanist — display
Nova Mono — 18,400 · 71% · $35 CPM
Body is the system stack. Archivo Narrow was the first choice for display and is already in use elsewhere in the library, which the font audit caught before it shipped. Neither face here appears in days 1–116.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #131210 | Warm near-black | |
--color-bg-alt | #1B1917 | Banding | |
--color-surface | #252220 | Cards | |
--color-text | #F2EFE9 | 16.31 / 15.27 / 13.78:1 · AAA | |
--color-text-muted | #8E8978 | 5.35 / 5.01 / 4.52:1 · AA | |
--color-border | #716C5E | 3.57 / 3.35 / 3.02 — non-text only | |
--color-accent | #D4BA11 | Hue 52 — 9.66 / 9.04 / 8.15:1 · AAA | |
--measured | #3892C0 | Measured playback — 5.39 / 5.04 / 4.55:1 | |
--color-band | #F2EFE9 | The band inverts: light on a dark site | |
--color-on-band | #131210 | 16.31:1 on band · AAA | |
--color-on-band-muted | #5D594E | 6.09:1 on band · AA | |
--color-accent-on-band | #7B6C0A | 4.58: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.