Spacing
Consistent spacing scale for padding, margins, and gaps. Base unit: 1px. Progression: +2 up to 8, then +4 up to 16, then +8.
Spacing Scale
Visual representation of all spacing values.
| Token | px | rem | Visual |
|---|---|---|---|
| 0 | 0 | 0 | |
| space-0.5 | 2 | 0.125 | |
| space-1 | 4 | 0.25 | |
| space-1.5 | 6 | 0.375 | |
| space-2 | 8 | 0.5 | |
| space-3 | 12 | 0.75 | |
| space-4 | 16 | 1 | |
| space-5 | 20 | 1.25 | |
| space-6 | 24 | 1.5 | |
| space-8 | 32 | 2 | |
| space-10 | 40 | 2.5 | |
| space-12 | 48 | 3 | |
| space-14 | 56 | 3.5 | |
| space-16 | 64 | 4 | |
| space-18 | 72 | 4.5 | |
| space-20 | 80 | 5 | |
| space-24 | 96 | 6 |
Scale Progression
How the spacing scale grows: small increments for fine control, larger for layout.
Fine (0-8px)
+2px steps for component internals
0
2
4
6
8
Medium (8-16px)
+4px steps for element spacing
8
12
16
Large (16px+)
+8px steps for layout gaps
16
24
32
40
48
Usage Guidelines
When to use each spacing range.
Compact (0-8px)
Icon-to-label gaps, inline element spacing, tight padding inside small controls.
gap: 8px (space-2)
Comfortable (12-24px)
Card padding, list item spacing, form field gaps, section paddings.
padding: 16px (space-4)
Spacious (32-48px)
Section gaps, page margins, hero areas, content separation.
gap: 32px (space-8)
Layout (56-96px)
Page-level spacing, section dividers, major content blocks.
margin: 64px (space-16)
Applied Example
A card showing spacing tokens in action.
p: 16
Card Header
mt:4
Subtitle text
p: 16
gap:12
Content block with comfortable spacing between elements.
gap:8 User Name
py:12 px:16