Docs Foundations
Spacing & Layoutstable
4px-base spatial scale (space-1 … space-10), print-plate radii, the two-weight border system, and desktop-first breakpoints. Values live in tokens/dimension.tokens.json.
Principles
The scale is the law
All spacing comes from space-1…10. Internal spacing (inside a component) is always smaller than the external spacing around it — that difference is what groups things.
Two border weights, two meanings
1px hairlines (color.border.hairline for separators, color.border.strong for frames — cards, tables, overlays, inputs) do the structural work. The 1.5px rule (color.border.rule) is TYPOGRAPHIC, never a box: table header underlines, tab underlines, section dividers, small controls (checkbox, secondary button). Rules boxed around every surface read heavy — Robin vetoed exactly that.
Nested radii step down
A child's corner radius is always at least one step smaller than its parent's (card md → inner control sm → chip xs). Badges and avatars are the only full-round shapes.
Guidelines
- shouldUse gap/grid for sibling spacing, not per-element margins.
- must-notDo not use border-width values other than border-width.hairline and border-width.rule.
- must-notThe rule (1.5px) never outlines a container; frames are always hairline-width in color.border.strong.
- shouldLayouts are desktop-first; breakpoint.sm (768px) is the supported floor, not a design target.