Spacing
A 4px base unit system with named scale steps from xs to 2xl.
Spacing Scale
All spacing is based on a 4px unit. The scale is designed for consistent rhythm across components.
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
Token Reference
| Name | CSS Variable | Value | Pixels |
|---|---|---|---|
xs | --spacing-xs | 0.25rem | 4px |
sm | --spacing-sm | 0.5rem | 8px |
md | --spacing-md | 1rem | 16px |
lg | --spacing-lg | 1.5rem | 24px |
xl | --spacing-xl | 2rem | 32px |
2xl | --spacing-2xl | 3rem | 48px |
Stack with Different Gaps
gap="sm"
A
B
C
gap="md"
A
B
C
gap="xl"
A
B
C
<Stack gap="sm">...</Stack>
<Stack gap="md">...</Stack>
<Stack gap="xl">...</Stack>Design Philosophy
4px base unit.Every spacing value is a multiple of 4px. This creates a consistent visual rhythm and prevents "pixel pushing" decisions.
Named scales, not arbitrary values. Use gap="md" instead of gap-4. Named tokens make the intent clear and are easy to change globally.
Layout primitives own the spacing. Stack, Cluster, and Grid handle gaps — individual components rarely need margin.