The system, running.
Five rules: the hairline is the structure, monospace is a material, one signal colour, sharp geometry, instant motion. Everything below inherits them.
One signal colour. Brand blue is the only hue that means interactive — status appears as a small dot plus mono text, never a background wash.
Inter for prose and headings; JetBrains Mono for every index, duration, timestamp, status and kicker. That split is what makes a list read as data and a paragraph read as writing, without touching colour.
Display
Heading 2
Body large — the size lesson copy runs at, capped at the prose measure so a line never outgrows comfortable reading.
Body, muted.
SELECT Id FROM Account LIMIT 1
//The code-comment kickerExactly one solid fill per screen — that is the next action.
A dot and mono text. Never a coloured background.
Heads up
Enrolled
Expiring
Payment failed
The most 'console' component in the kit — a mono index chip over the media, a spec-sheet metadata row, and a hover state that is a 1px top rule plus a border brighten. Never a shadow lift.
A terminal row: mono tabular index, hairline separators, metadata right-aligned, and a left accent bar on hover rather than a background tint. Reads like `ls -l` for a course.
6px cards, 4px controls, pills only for true pills. State changes resolve in 120–180ms with a plain ease-out — no bounce, no lift.