Tokens
Everything the site is allowed to look like, in one place. If a value is not on this page, it does not exist in a component either.
Switch the control in the masthead to check both themes. It cycles system → light → dark, so the OS preference stays reachable after a reader has overridden it once.
Colour
Six values, taken verbatim from spec §5. The three derived tokens are color-mix() of those six rather than new hexes, so §5 check 1 — no colour outside the token table — stays true by construction instead of by discipline.
--paper--raised--ink--muted--rule--accent--wash--wash-strong--rule-strong
Measured contrast
Computed in the browser from the resolved variables, for the theme currently active. Not a table someone typed.
Typefaces
Handgloves 1234
Headings only. Soft serif with an optical-size axis — this is the token carrying §5’s “human touch” requirement.
Handgloves 1234
Deliberately not Inter, and deliberately not system-ui — §5 check 4.
Handgloves 1234
Quoted artefacts, file paths, metrics, status. §5 check 9 lives here.
Self-hosted through next/font/local from /fonts. Licence notices and the OFL obligations we meet are in fonts/LICENSES.txt.
Type scale
--text-displayI build the machinery
--text-titleWorkflow Studio
--text-headingSelected work
--text-subheadingThe tension
--text-leadA standfirst sits under the heading and sets up the argument.
--text-bodyBody copy at seventeen pixels, because this is a reading site.
--text-smallCaption text and table cells.
--text-metaavailable · Q4 2026 · Prayagraj, remote
Measure
The four widths, drawn. Prose is the default and should stay the default; wide exists for tables and code, which do not obey a reading measure.
Spacing
Geometry
§5 forbids rounded-2xl cards with a heavy shadow on everything, so the radii stop at 4px and there are no shadow tokens at all. That is not an omission — hierarchy is carried by whitespace, type scale and 1px rules. A token that does not exist cannot be reached for.
Motion
Three durations, all under the 200ms ceiling §5 sets, and one easing curve. Hover a swatch to see it. Everything is cut to 0.01ms globally under prefers-reduced-motion: reduce — the rule lives in globals.css so no component has to remember it.
- 90ms — colour change on hover
- 140ms — control state
- 190ms — scroll-in. The ceiling — §5 caps motion at 200ms.
Focus and states
A 2px --accent outline at 3px offset, on :focus-visible only. It measures 7.1:1 on light paper and 6.9:1 on charcoal, well past the 3:1 that WCAG 1.4.11 asks of a focus indicator. Nothing in the codebase is permitted to remove it without replacing it.
The status dot is the one decorative use of --accent §5 allows. It is never the only signal — the word “live” sits beside it, so the state survives both colour blindness and a monochrome print.
Prose specimen
This paragraph runs at the prose measure, in Instrument Sans at 17px with 1.65 leading, which is the setting the case studies in §8 will use. It is here so the review can judge the reading experience rather than a colour grid — the type is most of the design, and a token table does not show whether a 500-word case study is comfortable to read.
Inline technical material sits in --font-mono at 0.92em, because JetBrains Mono runs optically large next to Instrument Sans and matching the sizes exactly makes code look shouted. A file path reads recorder/scripts/vendor-injected.mjs, and a link reads like this.
"@workflow-studio/core": "link:../workflow-studio/packages/core"(The quoted-artefact treatment §5 check 9 asks for — a verbatim line in mono, credited to its path. The block scrolls on its own rather than letting the page scroll sideways.)