Reference
Design system
Every ratio was computed with tools/a11y/contrast.py, not eyeballed. This page is
noindex: it documents the template for whoever builds with it.
Colour tokens
--color-bg
#F7F7F8 — Test-kitchen white
--color-bg-alt
#E9E9EC — Banding, and the empty part of a window bar
--color-text
#131317 — 17.31:1 on ground · AAA
--color-text-muted
#55555E — 6.89:1 on ground · AA
--color-border
#7E7E88 — 3.75 / 3.32 / 4.02 — clock rules carry structure
--color-accent
#7A1E86 — Timer violet, hue 293° — 8.32:1 on ground · AAA
--color-band
#131317 — Inverted band
--color-on-band
#F7F7F8 — 17.31:1 on band · AAA
--color-on-band-muted
#A0A0AA — 7.15:1 on band · AAA
--color-accent-on-band
#DFA6E8 — 9.49:1 on band · AAA
The gallery and the argument are the same object
The shot clock is an <ol> of <article> elements — a
device the library has barely touched. It is ordered longest window to shortest, which is
the order a real shoot day runs in, and that order is computed from the data rather than
typed. There is no separate portfolio section, because a second gallery would be the same
six pictures with the argument removed.
The bar is decorative and says so
Each window bar is aria-hidden. The window is already stated in figures and
in words beside it, so nothing depends on seeing the bar or the violet. Duplicating it into
the accessibility tree would mean hearing every window twice.
Throughput is arithmetic, not a policy
"You want forty dishes, we can do fourteen" is the day length divided by the summed steps. A first draft had steps totalling 25 minutes, which computed to 16 and contradicted the rates table's "up to 14" two sections below. The steps were corrected rather than the headline, because the steps are the claim.
Type
DM Serif Text — display
Anonymous Pro — 90 sec · 25 min
The windows are the loudest figures on the page, so they are monospaced and tabular and line up down the column. Neither face appears in days 1–94.