The pattern kit.
Chrome, tokens, type, and the handful of components every screen is built from. The menu top-left and the dashes mid-left are real, and every exhibit below uses the actual shared classes.
02 · dash table of contents
Mid-left, vertically centered: one dash per page or section — like the edge of a closed book. Hover the stack and labels appear; the current dash is gold and slightly longer; visited dashes brighten. Click jumps.
hover — all labels at 45%, hovered at 100%
current — gold, 24px · done — brightened
scrollspy — follows as you read
03 · mini contexts
Small decisions never get a screen. A quiet trigger in the prose — name + caret — opens a floating context beside it: switch interviewee, add a person, rename the org, pick a wave. One shadow, no border, closes on esc or outside click.
never for — anything with more than ~6 choices
04 · ink, not boxes
State is carried by ink weight and one mark, never by fills, chips or borders. Text darkens as things complete; the mark is the only colored pixel.
numbers — tabular, mono · labels — mono, uppercase · prose — Space Grotesk
05 · transitions
One easing — cubic-bezier(.2,.7,.2,1) — and durations under 300ms. Forward slides in from the right, back from the left, contexts rise 8px. Reduced-motion turns it all off.
Can you see the bill?
scenario 01 · slides in from the direction of travel
06 · utility rail
Top-right, the mirror of the menu — icon at rest, label slides out: theme · account · zen. Theme flips light/dark and remembers. The account icon is gold when signed in and opens a mini context; signed out, it triggers sign in. Zen hides every piece of chrome and esc brings it back.
theme — light ⇆ dark, persists
account — signed in: gold + mini context · out: → sign in
zen — all chrome recedes · exit — esc or the toggle
07 · tokens
Two typefaces, one gold, everything else grey. Space Grotesk for prose and headings; JetBrains Mono for labels, numbers and UI chrome.
accent — gold only, never a second hue · dark is home turf
08 · type scale
Six shared roles — .ty-kick · .ty-h1 · .ty-h3 · .ty-h4 · .ty-body · .ty-label — so no page redefines a heading from scratch.
ty-body — prose that explains, in muted ink. Bold lifts the one word that matters.
09 · spacing & layout
One page column — 720px prose, 760px working paper (interview, report). Rhythm between sections is ~90px; inside a section rows breathe at 15–17px.
11 · form fields
An input is an underline, nothing more — label in mono above, focus turns the rule gold. State that would elsewhere be a checkbox is the ○ → ● → ◐ mark from pattern 04.
12 · tabs
For 2–4 views of the same content — never for navigation, that's the menu. Mono, uppercase, a gold rule slides beneath the active label.
The basics exist — a report ships, a policy is written. Manual, but real.
Self-serve and reviewed on a cadence. Someone owns the number, not just the report.
Enforced in tooling, referenced in decisions. It runs without a person pushing it.
13 · accordion
One open at a time. FAQ-style disclosure — and, live in the interview, the action points that unfold beneath an in-progress practice.
A practice is done when it holds without a person pushing it — automated, reviewed on a cadence, enforced in tooling.
Yes — crawl/walk/run/fly is a guide, not a gate. Some orgs jump straight to enforcement.
Every note attaches to its practice and resurfaces as a quote in the capability review of the report.
see them working together: the interview →