Spacing
The 4px-based spacing scale used for padding, margins, and gaps.
Spacing tokens drive padding, margins, and layout gap. The scale is built on a 4px base unit with half-steps at the small end and a widening progression as values grow, so layouts stay on a consistent rhythm.
14px
28px
312px
416px
520px
624px
728px
832px
936px
1040px
1144px
1248px
1456px
1664px
2080px
2496px
28112px
30120px
32128px
36144px
40160px
44176px
48192px
50200px
52208px
56224px
60240px
64256px
72288px
80320px
96384px
px1px
half2px
1.56px
2.510px
3.514px
| Token | Value | Pixels | Description |
|---|---|---|---|
| 1 | 4px | 4px | Base spacing unit (4px) |
| 2 | 8px | 8px | 2x base (8px) |
| 3 | 12px | 12px | 3x base (12px) |
| 4 | 16px | 16px | 4x base (16px) |
| 5 | 20px | 20px | 5x base (20px) |
| 6 | 24px | 24px | 6x base (24px) |
| 7 | 28px | 28px | 7x base (28px) |
| 8 | 32px | 32px | 8x base (32px) |
| 9 | 36px | 36px | 9x base (36px) |
| 10 | 40px | 40px | 10x base (40px) |
| 11 | 44px | 44px | 11x base (44px) |
| 12 | 48px | 48px | 12x base (48px) |
| 14 | 56px | 56px | 14x base (56px) |
| 16 | 64px | 64px | 16x base (64px) |
| 20 | 80px | 80px | 20x base (80px) |
| 24 | 96px | 96px | 24x base (96px) |
| 28 | 112px | 112px | 28x base (112px) |
| 30 | 120px | 120px | 30x base (120px) |
| 32 | 128px | 128px | 32x base (128px) |
| 36 | 144px | 144px | 36x base (144px) |
| 40 | 160px | 160px | 40x base (160px) |
| 44 | 176px | 176px | 44x base (176px) |
| 48 | 192px | 192px | 48x base (192px) |
| 50 | 200px | 200px | 50x base (200px) |
| 52 | 208px | 208px | 52x base (208px) |
| 56 | 224px | 224px | 56x base (224px) |
| 60 | 240px | 240px | 60x base (240px) |
| 64 | 256px | 256px | 64x base (256px) |
| 72 | 288px | 288px | 72x base (288px) |
| 80 | 320px | 320px | 80x base (320px) |
| 96 | 384px | 384px | 96x base (384px) |
| px | 1px | 1px | Single hairline pixel |
| half | 2px | 2px | Half step (2px) |
| 1.5 | 6px | 6px | 1.5x base (6px) |
| 2.5 | 10px | 10px | 2.5x base (10px) |
| 3.5 | 14px | 14px | 3.5x base (14px) |