Roan Whitfield

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

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