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.
A mid-tone ground
Every dark template in this library is a near-black and every light one a near-white. This one is graphite, and the banding goes darker than the ground while the cards go lighter, so the page has depth in two directions rather than one. It suits a page whose subject is the space between “we” and “I”.
Four states, three signals each
Led, Did, Helped, Not me. Each cell prints the word in full, a glyph precedes it through
data-glyph and a ::before, and the hue comes last. The key sits
above the table and defines all four in prose before any of them is used. Switch the
stylesheet off and the matrix still reads. This is the first four-state scale in the
library; everything before it has been two or three.
No blockquote anywhere
Every portfolio in this trade has a testimonial section, and a page whose argument is against overclaiming has no business opening with somebody else saying how good it is. The absence is a design decision and a test asserts it.
knowsAbout is deliberately short
A ProfilePage around a Person, with
knowsAbout built by one strict rule: a discipline appears only if the matrix
says it was led on at least one project. Not “did”, not
“helped”. Schema has no vocabulary for partial contribution —
knowsAbout is a flat list of strings, and putting eight disciplines in it
would make the machine-readable version say exactly what the page refuses to say. The rule
costs the list prototyping, which three of the four projects mark as
“Did”, and paying that is the point.
Every count in the prose is arithmetic
The headline — how many cells say Led, how many say Not me — and the flat and never-measured counts in the outcomes eyebrow are computed over the same data the tables render. There is no second place where a contribution is asserted, so the prose cannot claim something the matrix does not show.
Type
Noto Serif Display — display
Encode Sans — 32 cells · 5 not me · 2 never measured
Body is the system stack. Encode Sans carries the role words and every figure; the matrix needs a face that stays legible at 0.74rem in uppercase across eight columns. Neither face appears in days 1–120.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #2E3238 | Graphite — a mid tone, which nothing in days 1–120 uses | |
--color-bg-alt | #262A30 | Banding, darker than the ground | |
--color-surface | #383E45 | Cards, lighter than the ground | |
--color-text | #F0F2F4 | 11.48 / 12.85 / 9.63:1 · AAA | |
--color-text-muted | #A9B0B8 | 5.88 / 6.58 / 4.93:1 · AA | |
--color-border | #838C96 | 3.78 / 4.23 / 3.17 — non-text only | |
--role-led | #C6E04A | Led — 8.69 / 9.72 / 7.29:1 · AAA | |
--role-did | #7FD1E8 | Did — 7.48 / 8.37 / 6.27:1 · AAA | |
--role-helped | #F0F2F4 | Helped — the plain text colour, on purpose | |
--role-none | #F0A2A2 | Not me — 6.38 / 7.14 / 5.35:1 · AA | |
--color-band | #F0F2F4 | The band inverts: light on a graphite site | |
--color-on-band | #20242A | 13.89:1 on band · AAA | |
--color-on-band-muted | #55606B | 5.72:1 on band · AA | |
--color-accent-on-band | #4A5A00 | 6.80: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.