Foundations
Spacing
A 4px grid. Group tightly, separate generously, and let radii grow with size.
Nine steps
--tui-14px
--tui-28px
--tui-312px
--tui-416px
--tui-520px
--tui-624px
--tui-832px
--tui-1040px
--tui-1248px
Where each goes
- Inside a panel
- 20px · 24px with screws
- Between panels in a dashboard
- 16px
- Between page sections
- 72–96px
- Parts in a tray
- 3–4px from the walls, 3px apart
- Label to its control
- 6px
Radii grow with size
4 · tags, displays
7 · keys, fields
12 · panels
999
Round only for switches and round keys. Layout is CSS grid; blocks respond to their container with container queries, pages to the viewport.
The full law
grid-and-spacing.mdIn the brain
This page is a summary in plain words. The brain holds the law itself, written for an agent to follow.
The full law, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.