THE SPEC
Every token on this page is read out of protocol.css when the page loads, and every specimen is rendered with the real class. There is no second copy to keep in sync — change the stylesheet and this changes with it.
Reading protocol.css…
Colour
Contrast is measured against --p-bg and scored to WCAG 2.1.
AA needs 4.5:1 for body text and 3:1 for large text (≥24px, or ≥19px
bold). A token failing both is not a bug on its own — rules, scrims and
disabled states are meant to be quiet — but it must never carry reading
copy.
Type
Three families, three jobs (PLAYBOOK §1.5): Archivo caps is the shout, EB Garamond italic is the wink, Azeret Mono letterspaced is the machine. Specimens below are the live utility classes, not reproductions.
Body lead — the opening paragraph weight.
Body — the default reading size.
Body small — captions, notes, fine print.
Label — the machine voice Label dim Label faintControls
Every control has one authoritative height and no vertical padding — the prototype's ADD TO BAG bug was padding fighting min-height. Measured heights below are read off the rendered elements, so a drift between the token and the real box shows up here.
Space
The ramp comes from the original system sheet
(PROTOCOL System.dc.html, panel 05). It was never carried
across during the port, so section gaps throughout the theme are inline
and chosen by eye. Tokens now exist; adoption does not. The usage count
on each is the honest measure of that — a ramp nothing references is a
statement of intent, not a system.
Radius + motion
Radius 0 everywhere; circles only for stickers. Durations are from the same panel — reveal 600ms with y+24px, image swap 450ms crossfade, quick-add rise 350ms — sharing the one easing curve.
Everything else
Components
Every block-level .p- class declared in the stylesheet,
counted from the source. This page renders specimens for only a handful
of them — the rest are listed so the inventory is at least complete and
the gap between "documented" and "exists" is visible rather than implied.
Conformance
PLAYBOOK §11: tokens only, no new hex. The stylesheet is scanned
for raw hex outside the :root block. The sanctioned
exception is rgba of existing ink/accent inside scrims, so a handful of
hits is expected — a growing number is not.
Declared but unused
Tokens nothing references. Not necessarily wrong — the space ramp is deliberately ahead of its adoption — but a token no rule uses is a promise the CSS is not keeping.
Provenance
This system was ported from
PROTOCOL Store v4.dc.html in the Claude Design project
Protocol Shopify Design System, whose companion
PROTOCOL System.dc.html holds the original five-panel
sheet. Recorded here because the port was lossy in ways that are
invisible from the theme alone.
Carried across and expanded — 3 prototype greys became 35 tokens. Blush #FFD9E3 and Paper #F4F1EE were dropped, correctly: they belonged to direction 1B ("Confession", warm paper), and 1A won. The theme is fully dark. Accent alternates #FF5CA8 / #E8114F were editor options, never shipped.
Carried across. D1/D2/H3/Body/Label became the display, body and label scales. Note the prototype used Instrument Serif and IBM Plex Mono; the theme ships EB Garamond and Azeret Mono.
Carried across — primary, secondary, text link, sold-out, plus badges.
Partly. Input and variant pills shipped. The auto-replenish subscription toggle never did — consistent with the store having zero selling plans.
"12 col / 40px gutter desktop, 4 col / 20px mobile" was never tokenized. The theme uses --p-gutter: clamp(16px, 3vw, 44px) and per-section grids instead, which approximates it without stating it.
Not carried across at the time; added as tokens 2026-08-09 so they are at least declared. Adoption is tracked by the usage counts above.