Spacing
Spacing scale aligned with Radix UI.
Visual scale
0
0px
--space-01
4px
--space-12
8px
--space-23
12px
--space-34
16px
--space-45
24px
--space-56
32px
--space-67
40px
--space-78
48px
--space-89
64px
--space-9Recommended usage
| Context | Step | Value | Class |
|---|---|---|---|
| Button padding | 2-3 | 8–12px | px-2, px-3 |
| Form field gap | 3 | 12px | gap-3 |
| Card padding | 5 | 24px | p-5 |
| Gap between cards | 4 | 16px | gap-4 |
| Page padding | 5-6 | 24–32px | p-5, p-6 |
| Section separation | 6-8 | 32–48px | gap-6 to gap-8 |
Demo: gap between items
gap-2
gap-4
gap-6