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
#F4F3EF — Paper
--color-bg-alt
#E7E5DE — Banding
--color-surface
#FFFFFF — Cards
--color-text
#17181A — 16.00:1 on ground · AAA
--color-text-muted
#55565A — 6.60:1 on ground · AA
--color-border
#7E7A72 — 3.85 / 3.39 / 4.27 — rules separate accounts, so 3:1 everywhere
--color-accent
#2F6B2A — Hue 115°. Reserved for words a sitter said — 5.81:1 on ground
--color-band
#17181A — Inverted band
--color-on-band
#F4F3EF — 16.00:1 on band · AAA
--color-on-band-muted
#A2A49F — 7.06:1 on band · AAA
--color-accent-on-band
#8FCB86 — 9.35:1 on band · AAA
The green means someone is speaking
--color-accent is used for exactly one thing on the demo: words a sitter said.
The wall at the top, and the pull-quote in each sitting. Not navigation, not buttons, not
emphasis generally. Hue 115° also happens to be the emptiest bucket in the library — one
template across the 91 before this, and that one is a muted 23%-saturation olive at 106°
rather than this 44%.
The account sits on the picture
Above 900px each sitting is a 12-column grid where the image spans 1–7 and the account spans 7–12, so they overlap by a column. Below that the overlap is removed entirely rather than scaled down — a quote on top of a face is only legible when there is room for it.
Type
Gloock — display
Petrona — body, and the sitters’ own words at large sizes.
High-contrast display serif over a text serif that holds up at 2rem, because on this page the pull-quotes ARE the headlines. Neither face appears in days 1–91.