Spacing & layout
Four-pixel base, eight-pixel rhythm. The product is dense by nature; the chrome around it isn't. Generous air over hairline borders.
Spacing scale
Use multiples of 4 px. The default rhythm is 8 px. Three steps go big — 64, 80, 96 — for page-level separation.
Eight-point rhythm
The base unit is 8. Doubled at 16 for component padding; doubled again at 32 for section gaps. Half-step (4) only for tight contexts — toolbar chips, table cell content.
Radii
Six steps from sharp to pill. Default control radius is 8 px; cards round to 12. We never use 0 (the product feels softer when nothing is sharp).
Layout
Fixed 264 px sidebar. 24 px content gutter on every side. Forms cap at 900 px; data-heavy pages widen to 1300 px.
| Token | Value | Used for |
|---|---|---|
| --sidebar-w | 264 px | Default app shell sidebar |
| --sidebar-w-narrow | 240 px | Dense vertical kits |
| --rail-w | 220 px | Settings rail (inside content) |
| --content-max | 900 px | Form columns, settings, prose |
| --gutter-x | 24 px | Horizontal page gutter |
| --row-y | 12 px | Vertical padding inside list rows |
Control heights
Four control sizes. 36 px is default — the touch-friendly compromise between desktop density and finger-friendliness. Mobile portals lift to 44 px.
Do & don't
Use a token. padding: var(--space-4) is always 16 px and stays in rhythm.
Type 15px anywhere. Round to the nearest token — usually --space-4 (16 px).
Use bigger gaps between sections (48 px) than within them (16 px). Hierarchy is communicated by space.
Cram primary actions into 28 px tall controls. Anything that gets clicked is at least 36 px.