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 states are rendered, not drawn
Every one of the nine states on the home page is live DOM. Resize the window and the
too-long address rewraps; tab into the scroll container and it takes focus; the 200% state
is the same component at font-size: 2em rather than a picture of one. A
portfolio that shows an image of an empty state has demonstrated that somebody drew an
empty state, which is a strictly weaker claim, and it is the claim the whole genre makes.
Pure white, on purpose
Every other light template in this library is a tinted near-white — manila,
newsprint, bone. This one is #FFFFFF, because the page renders real product
UI and a tinted paper would make that UI read as an illustration of UI. The component sits
on --color-surface at #FAFBFC with rows in true white, which is
the stack an actual application has.
Three verdicts, and one of them is not a failure
Designed, Browser default, Missing. Browser default gets its own colour rather than a
shade of red because leaving a behaviour to the browser is sometimes correct and drawing
over it is worse; only Missing means nobody decided. Word first, glyph through
data-glyph, hue last, and the key defines all three in prose above the table.
No animation anywhere
The loading state uses static skeletons at the real row height rather than a shimmer.
Nothing on the page moves, so there is nothing for
prefers-reduced-motion to have to switch off — which is a stronger
position than honouring the query, and it is the one the numbers table argues for.
The markup declares its own accessibility
A Person plus a WebPage carrying
accessibilityFeature, accessibilityHazard and
accessibilityControl — a real schema.org vocabulary that almost nothing
uses. Two of the nine states on this page are conformance requirements rather than
niceties, so this is the one part of the argument a machine can read. The claims are
narrow on purpose: no highContrastDisplay, no captions, no sign language. A
page claiming every feature in the vocabulary has claimed nothing.
Type
Red Hat Display — display
Lexend Deca — 44 × 44 px · 1.2 scale · 94 chars
Body is the system stack. The component uses a 1.2 minor third across six steps, 14 to 34 px; a 1.333 scale looks better on a specimen sheet and produces a heading that is too large three levels down. Neither face appears in days 1–121.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #FFFFFF | Pure white — the first in the library, and here for a reason | |
--color-bg-alt | #F2F4F7 | Banding | |
--color-surface | #FAFBFC | The ground the rendered component sits on | |
--color-text | #14161A | 18.11 / 16.44 / 17.48:1 · AAA | |
--color-text-muted | #5A6270 | 6.15 / 5.58 / 5.93:1 · AA | |
--color-border | #7B8494 | 3.77 / 3.42 / 3.64 — non-text only | |
--color-accent | #3730C4 | Indigo — 8.81 / 8.00 / 8.51:1 · AAA | |
--v-designed | #146B4A | Designed — 6.50 / 5.90 / 6.27:1 · AA | |
--v-default | #8A5200 | Browser default — 6.39 / 5.80 / 6.17:1 · AA | |
--v-missing | #A81F32 | Missing — 7.22 / 6.56 / 6.97:1 · AAA | |
--color-band | #14161A | The band inverts: dark on a white site | |
--color-on-band | #FFFFFF | 18.11:1 on band · AAA | |
--color-on-band-muted | #A4ACBA | 7.93:1 on band · AA | |
--color-accent-on-band | #9E97FF | 7.18:1 on band · AAA |
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.