Four promises, and what it costs to break one.

A system is not a set of values. It is a set of values plus a promise about what happens when someone wants one that is not in the set. These four are written at the top of the stylesheet, above the tokens, so they are read before anything can be copied.

1. 01Every value below the token block resolves to a token. A rule needing a size, space, color, duration or tracking the ramps do not name is a signal to extend a ramp, never to type a number. Four exceptions are allowed and all four are enumerated.
2. 02Hairlines, never shadows. No radius, except the fluency pills and the gate’s disc. One border token exists, so there is no decision to get wrong.
3. 03A color is declared only where it changes. Nothing restates what it already inherits, which is why a diff on this file is readable.
4. 04One ground, one ink, two accents. Every tint composes from four channel tokens, so recoloring the site is a four-line edit and cannot be done partially.

Five channels, one ground, and an accent that no longer needs a second shade to speak.

The ground is a soft, warm black rather than a hard one. A true #000 behind warm off‑white text halos at every letter’s edge and reads as a screen rather than a page, so the ground sits a few steps up from it and warm rather than neutral, which is also why it is never retyped as #000 anywhere on the site. Salmon is the accent, and for the first time it is the accent for marks and for text: the primitive itself clears 7:1, so it does not need a second, darkened shade before a word can stand on it the way the old teal did. A lifted step still exists for small sizes, for comfort rather than to pass a line it was already past. Teal is new too, a second accent that exists to be a different participant from salmon: the gate’s second cursor, and nothing else. It never carries body copy, because a system with two hues that can each carry running text has no way to say which claim matters more.

Where the tints stop being decorative

Everything below the ink, salmon and teal text rows is a divider, a fill or a decorative rule, which WCAG 2.2 exempts from a contrast requirement, because nothing there is read as a word. Selection is the pairing that looks like it should be checked anyway: accent text sits on a 14% accent tint rather than the ground itself, and composited, that pairing still clears roughly six to one, past the 4.5:1 a highlighted sentence owes.

Every semantic token, one row each, measured this second

The ratio column below is not typed. A script composites the token’s real computed color over the ground’s real computed color, the moment this page renders, and prints whatever comes out: the only way a contrast claim can survive someone editing section 2 without also editing this paragraph. A token with no readable role (a border, a fill, a grid line) shows “decorative” instead of a ratio, because WCAG has nothing to say about a rule that is never read as a word.

1. Token · usageWhere it appearsContrast, live
2. --bgThe ground itself. body{background:var(--bg)}Every page’s <body>, and the gate’s plate.
3. --inkrgb(var(--ink-rgb)), full strengthh1,h2,h3{color:var(--ink)} · every heading and value.
4. --ink-80ink at 80%body{color:var(--ink-80)} · the site’s default running copy.
5. --ink-72ink at 71.5%.rail .y{color:var(--ink-72)} · the milestone year, secondary labels.
6. --ink-30ink at 30%.tie{border-bottom:1px solid var(--ink-30)} · the standing underline on a prose link.
7. --ink-28ink at 28%.slot{border:1px dashed var(--ink-28)} · every unfinished edge.
8. --ink-22ink at 22%.card:hover .ph{border-color:var(--ink-22)} · the only state a well’s hairline has.
9. --ink-10ink at 12%, composed into --hair--hair:1px solid var(--ink-10) · the one border token, everywhere.
10. --ink-02ink at 3.5%.nxt:hover{background:var(--ink-02)} · the only fill on the site.
11. --ink-015ink at 2.5%.ghost{background:var(--ink-015)} · under a placeholder’s crossed diagonals.
12. --accrgb(var(--acc-rgb)).pull{border-left:2px solid var(--acc)} · rules, carets, the focus ring, and text.
13. --acc-inkrgb(var(--acc-ink-rgb)), lifted a step.eyebrow{color:var(--acc-ink)} · every eyebrow, live link, unit label.
14. --acc-70acc at 70%.lede a::after{background:var(--acc-70)} · a lede link’s drawn underline.
15. --acc-40acc at 40%.ask .links a.hot{border-bottom-color:var(--acc-40)}
16. --acc-10acc at 14%::selection{background:var(--acc-10)}
17. --acc2rgb(var(--acc2-rgb)).peer{color:var(--bg);background:var(--acc2)} · the gate’s second cursor, a filled key.
18. --acc2-ink#5eead4Reserved for teal text; not yet spent on a live selector.
19. --acc2-40acc2 at 40%The teal rule at partial strength, --acc-40’s counterpart.
20. --acc2-10acc2 at 12%The teal fill at partial strength, --acc-10’s counterpart.
21. --hair1px solid var(--ink-10)The one border. Every card, band, nav and case rail.
22. --grid-lineink at 4.5%body::before{background:linear-gradient(…var(--grid-line)…)}
23. --peer= --acc2.me b{background:var(--peer)} · the visitor’s own cursor tag on the gate.
24. --warn#ff8a80, not composed from a channel.di-plate.bad .di-lab{color:var(--warn)} · a refused password.

Why there is no light mode

The whole color system is five channels composed against one warm dark ground; a light variant is not a media query away, because every semantic token would need a second composition rather than an inverted lightness, and nobody has asked for one.

Three families with three jobs, and a ramp that has stopped being one.

Serif carries every heading and every claim set large, sans carries running copy, mono carries anything that is a label, a year, a unit or a number being compared. The family tells you what kind of statement you are reading before you read it. The ramp below is the weakest thing here, and every step is drawn at its real size.

Eleven of those steps live inside five pixels

Between 10px and 15px the ramp goes 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15. The largest ratio between neighbors is about 1.05. A closed ramp exists to force a choice; this one forces nothing, so nobody adding a caption can tell whether 12.5 or 13 is correct.

The audit raises nothing, because check 1 asks whether every font-size is a token and has no opinion about how many tokens there are. That is the most useful thing on this page: a guardrail that cannot see the defect it was built to prevent.

The specimen sheet: all three families, every step

Below is what the ramp looks like from a family’s point of view rather than a selector’s: the same 25 sizes, set in serif, sans and mono at once, each carrying the tracking and line height that family actually uses on this site (serif tightens to --ls-tight, mono opens to --ls-06 and goes uppercase, sans runs at rest). No row above is a repeat of the earlier ramp; that one shows which single family a step is actually spent on, this one shows what the other two would look like if it were spent there instead.

Ten text roles, and the recipe under each

Every role below is the real element, wearing the real class, not a redrawn copy: the h1 in the first row is an actual <h1>, and it inherits site.css section 4 exactly like the one at the top of index.html does. The line beside it names the declarations that make it that role rather than plain text.

The two axes most systems leave as literals.

A type system that tokenizes size and nothing else has done a quarter of the job. Both of these are closed ramps, which is the part worth copying.

Fourteen steps, every one a multiple of four, and three that are not.

Nothing on this site is 7px or 22px. Each bar below is drawn at the width of the step it names, so the ramp is showing you itself.

The three that leave the ramp, and why

Each is declared as its own token with its reason on the line. The documentation does not name them at all.

Two columns, and three aspect ratios that are the whole height system.

Height rhythm comes from per-card ratios, never from a multi-column span grid, because a span grid makes the reading order argue with the visual order. Adding a card means choosing one of three, not inventing a fourth.

The measure, the wrap and the gutter

Three layout tokens govern every non-full-bleed section on the site. Values below are read live from :root, the same way the space ramp is; nobody typed a pixel here.

Five breakpoints, largest first, one collapse each

Section 15 is the only responsive section on the site; the audit’s check 10 exists to keep it that way. Each rule fires when the thing it governs runs out of room, not on a shared schedule, which is why there are five queries and not two.

One curve, four durations, and a stagger that cannot re-time itself.

Arrival delay is a token on the element rather than an nth-child rule, because an nth-child stagger silently re-times itself the moment anything is inserted above it. Three delay steps exist and no more. Under a reduced-motion preference the arrival, the drawn underline and every transition are removed rather than shortened.

The curve, traveling

One easing function carries every move on the site, from a 0.22s hover to the 1.6s signature. Click to send the dot across at --dur-sig on --ease itself, read live from :root rather than approximated: fast off the mark, then spending most of the distance settling into the landing, which is why nothing here ever feels like it slams.

Ten moves, one older than the rest

Sections 16 and 17 layer nine new interactions onto the components above; the tenth, the .rv rise, predates the redesign but both 16.6 and 16.7 had to account for it, so a motion inventory that skipped it would be incomplete. None invents a new duration or a second curve; each cites the token it spends and what is left when motion is switched off.

A hundred selectors, and the ones deliberately missing.

Sections 5 through 13 of the stylesheet are the components, and they reference the semantic tokens and nothing else: 109 class selectors, 244 rules, fifteen views. A component earns its place by appearing on more than one page, or by holding a rule that would otherwise be retyped.

Two of those, the placeholder and the artifact slot, exist to make unfinished work look unfinished, and both are designed to be deleted rather than filled in. A third, the working note, was deleted from the stylesheet the day the last page carrying one was finished.

Every state, rendered rather than described

Each row below is the real class, not a picture of it. Hover, focus, click and open the ones that take input; the rest render every state they have because CSS gives them no other way to reach it.

Sixteen mechanical checks, run before every commit.

The contract is enforced by a script, not by discipline. It exits with a list rather than an opinion: it will not say whether the design is good, only whether the system is still intact.

Two are unusual enough to point at. Check 12 counts italics per audience, stripping the variant not being rendered, because both audiences’ copy lives in the DOM at once. Check 4 reads classList calls, so a selector only JavaScript applies does not read as dead. Both were written after the check produced a false positive once.

What it still cannot see

It has no opinion about how many tokens there are, and it cannot compare the stylesheet against the documentation. Both of those are the first item on the next list.

Four things. One is now fixed, and the fix is in the file.

Each one names its fix, because a list of complaints is not a critique. Two items the 2026 color redesign carried away on its own, a lighter ground with more headroom in it than the old one had, so they are not listed here as fixed; they are simply gone.

01 · The documentation and the stylesheet disagree

DESIGN-SYSTEM.md describes fourteen type steps and twelve checks, the README says fourteen checks, and the file has twenty-five steps and sixteen checks. Fix: generate the document from the stylesheet. Every fact in it is already in the file the audit parses.

02 · Twenty-five type steps, eleven inside five pixels

A closed ramp exists to force a choice; at ratios of 1.05 there is none to force. Fix: collapse the reading sizes back to the documented six and pull the half-steps one at a time, letting the dead-token check say when each is genuinely unused. The only one of the four that would change how the site looks.

03 · A three-column hairline row does not fit a phone

The About page’s domain band reserves 320px of fixed track and gutter before the description column gets a pixel; a 375px phone has about 319px. Fix: one rule inside the existing 620px block. This page carries it, scoped to itself, so you can see it working.

04 · The audit could not measure the thing the color system is about

The whole argument for two accents is a contrast threshold, and the guardrail never checked one. Fixed: check 16 ships as tools/audit-contrast.py. It composites each tint over the ground, measures the ratio, and compares it to the role written on the token line, so the next token that claims a number it does not clear fails a build rather than a review.

A system is not the values. It is the argument about what happens when someone wants a value that is not in the set, and the argument is only real if a script can lose it.