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.
The credit column is the portfolio
No album artwork anywhere. A wall of covers tells a visitor who somebody has been in a room with; the right-hand column tells them what was done once they were there, which is the only part of a discography that matters to anyone hiring. The four tallies above the table are counted from it, so an edit to one release cannot leave a headline lying.
A role that was not done is absent, not red
Four jobs, but only one chip colour. A credit either applies to a record or it does not, and the absence of a chip says that better than a second colour would — there is no such thing as a negative credit. The chips are text in the markup, so the roles read correctly with CSS off and to a screen reader.
Photographs again, after three without
Days 108, 109 and 110 each had a specific reason for having no images: a fictional game's screenshots, a fictional game's store captures, and headshots of nine people who do not exist. None of those applies to a producer, whose room is a real kind of place, so the desk and the room are here — one photograph per craft, captioned as the craft rather than as a claim.
The points section ends at $2.85
The final line is styled heavier and takes the one non-accent colour on the page, because the whole section exists to arrive at a number small enough that stating it plainly is the argument. A worked list rather than a claim: five lines, one operation each.
Type
Sofia Sans — display
Ubuntu Sans Mono — 48 kHz · −6 dB · $650
Years, rates, sample rates and channel numbers all sit in columns that have to align. Neither face appears in days 1–110.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #131518 | Neutral charcoal | |
--color-bg-alt | #1A1D21 | Banding | |
--color-surface | #23272C | Cards | |
--color-text | #E9EEF0 | 15.64 / 14.46 / 12.84:1 · AAA | |
--color-text-muted | #838F95 | 5.51 / 5.10 / 4.53:1 · AA | |
--color-border | #667278 | 3.70 / 3.42 / 3.04 — non-text only | |
--color-accent | #2EB8A5 | Hue 172 — 7.42 / 6.86 / 6.09:1 · AAA | |
--role-off | #C38822 | The points figure — 5.98 / 5.53 / 4.91:1 | |
--color-band | #E9EEF0 | The band inverts: light on a dark site | |
--color-on-band | #131518 | 15.64:1 on band · AAA | |
--color-on-band-muted | #4F595F | 6.13:1 on band · AA | |
--color-accent-on-band | #1C786C | 4.54: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.