01 — Color
Ramps and roles
Authored in OKLCH so equal steps read as equal steps across hues. Each step has an assigned role, so “which grey is the disabled border” stops being a decision. Swapping the brand means replacing these ramps and nothing else.
Neutral
Accent — placeholder, meant to be replaced
Semantic roles in use
--border-subtle and --border-default are decorative — dividers, card edges. --border-strong meets 3:1 and is mandatory for form controls, selected states, and anything a user must perceive to operate. Getting this wrong is the most common way a flat, hairline aesthetic quietly fails an audit.
02 — Type
Scale, leading, measure
Size, line-height and tracking are authored as triplets — leading tightens as size grows, tracking goes negative at display sizes. Family is a brand-layer slot; these are fallbacks.
Measure — set at 68ch
Line length is one of the few typographic rules with real reading research behind it: somewhere between 45 and 75 characters, with roughly 66 as the comfortable centre. Below that the eye returns too often; above it, finding the start of the next line gets unreliable.
This paragraph is secondary text at the small size — the pairing you will use most for hints, captions and metadata. It passes AA against both the base and raised surfaces.
03 — Spacing
Proximity as structure
Whitespace is not decoration — it encodes grouping. The scale is named by relationship rather than size, which is what makes the rule self-enforcing: space inside a group is always smaller than space around it.
The rule, demonstrated
Correct — ratio preserved
Broken — equal spacing everywhere
Same tokens, same components. The right-hand version is the single most common failure in generated UI, and it is visible in a screenshot — which makes it checkable.
04 — Depth
Nesting policy
The rule that matters most for a future tree renderer: never nest more than two surfaces. Past level two, switch from containment to indentation. Without this, deep data becomes nested-panel hell.
Everything deeper than this uses the same treatment, or drills into its own view.
05 — Controls
States and forms
Every state defined once, here, so nothing invents its own later. Focus is a ring rather than a border change — in a border-first system, a colour-only border swap is too quiet to serve as focus.
Buttons
Form — including a tight error
Payment declined
The card issuer rejected the charge. Try a different card, or contact your bank.
Stock running low
Three items in this cart have fewer than five units remaining.
Order placed
Confirmation sent to the billing address on file.
Popover
The only elements that carry shadow are ones that float above the page. Nothing in normal flow gets one.
06 — Data
Hostile content
Tokens proven against the content that actually breaks them: overlong names, tabular numbers, mixed status, and nothing at all.
| Item | Type | Status | Qty | Unit | Total |
|---|---|---|---|---|---|
| Anodised aluminium laptop stand, adjustable height, matte charcoal finish | …computer.accessory | In stock | 2 | 64.00 | 128.00 |
| 14" ultraportable notebook | …computer.laptop | Low | 1 | 1,499.00 | 1,499.00 |
| USB-C hub | …computer.accessory | Backordered | 3 | 39.95 | 119.85 |
| Extended warranty, 36 months | …service.warranty | Pending | 1 | 180.00 | 180.00 |
| Braided charging cable, 2 m | …computer.accessory | In stock | 12 | 11.50 | 138.00 |
Empty
Nothing in this cart yet
Items you add will appear here with live pricing and stock.