Space & structure
A 4px base with two half-steps for dense interiors. Layout components take a step number rather than a length, so an off-scale value is not expressible rather than merely discouraged.
The spacing scale
Steps 1–5 move in fours for interior spacing; 6 upward roughly doubles for separating blocks. The 0-5 and 1-5 half-steps exist for dense chrome — a badge's padding, a nav item's gap — and are deliberately not exposed as props, because a component-level gap should land on a whole step.
Structure
Four values carry the whole structural vocabulary. The important one is what's absent: there is no elevation ramp, and only one shadow in the entire system.
| Token | Value | What it does |
|---|---|---|
| --border-hairline | 1px | Nearly every border, at 10–12% opacity. Chrome recedes so content leads. |
| --border-strong | 2px | Focus rings, invalid fields, the active tab. Emphasis by weight, not only colour. |
| --radius-base | 3px | Near-square on purpose. With hairlines and flat planes this reads as engineered. |
| --shadow-overlay | layered, soft | The only shadow. Dialogs, popovers, menus, selects — surfaces that truly leave the page. |
Depth is tone, not shadow
A surface separates from the page by one step on the neutral ramp plus a hairline. That is the entire elevation system, and it is why each ramp needs eleven steps — the tone difference has to be available before you can stop reaching for a border or a shadow to do the job.
Stacking order
Six named layers, so nobody ever writes z-index: 9999.
Spacing belongs to the container
Children never carry margins. Margins collapse, double, and fight across component boundaries; gaps don't. Almost every margin in an application is a missing Stack or Cluster.