Foundations
Spacing & Grid
A strict 4px base unit. Every gap, padding, and margin in the system is a multiple of 4 — there is no "just this once" 5px or 18px.
Scale
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
Nesting example
Card padding: --space-5 (20px)
Inner control padding: --space-3 (12px)
Usage rules
| Rule | Detail |
|---|---|
| Base unit | 4px. Every spacing token is a multiple of it. |
| Component padding | Small controls (chips, badges) use --space-2/--space-3; buttons and inputs use --space-3/--space-4. |
| Section spacing | Related content groups use --space-6; distinct page sections use --space-8 or --space-10. |
| No raw values | A gap, padding, or margin that isn’t one of the tokens on this page is a bug, not a design decision. |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug spacing to manage the usage rules above from the CMS.