Spacing
4pt base grid. Never use spacing primitives directly in components — always reference semantic spacing tokens.
Rule: --space-N × 4 = px value. Use --spacing-* tokens in all components.
Spacing Primitives
--space-00px
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1664px
--space-2080px
--space-2496px
--space-32128px
--space-40160px
--space-48192px
--space-64256px
--space-80320px
--space-96384px
Spacing Tokens
| Token | Value | Use case (optional) | Visual |
|---|---|---|---|
| --spacing-xs | 8px | Icon gaps, tight padding | |
| --spacing-sm | 12px | Icon gap in buttons, small padding | |
| --spacing-md | 16px | Default inner padding | |
| --spacing-lg | 20px | Medium button horizontal padding | |
| --spacing-xl | 24px | Large button horizontal padding | |
| --spacing-2xl | 32px | Card padding, section gaps | |
| --spacing-3xl | 40px | Section vertical padding | |
| --spacing-4xl | 48px | Large section gaps | |
| --spacing-section | 40px | Section padding | |
| --spacing-page | 96px | Page horizontal padding (desktop) |