Spacing
Standard Tailwind 4 spacing ladder (`n * 0.25rem`). The design system uses 6 (24px), 8 (32px), 10 (40px), 12 (48px), and 16 (64px) as the load-bearing steps for component and page layout.
Visual scale
0
0px
p-01
4px
p-12
8px
p-23
12px
p-34
16px
p-46
24px
p-68
32px
p-810
40px
p-1012
48px
p-1216
64px
p-16Recommended usage
| Context | Step | Value | Class |
|---|---|---|---|
| Button padding | 2–3 | 8–12px | px-2, px-3 |
| Form field gap | 3 | 12px | gap-3 |
| Card padding | 6 | 24px | p-6 |
| Gap between cards | 4 | 16px | gap-4 |
| Page padding | 6–8 | 24–32px | p-6, p-8 |
| Section separation | 8–12 | 32–48px | gap-8 to gap-12 |
Demo: gap between items
gap-2
gap-4
gap-8