The 8px grid
Sizes and gaps are multiples of 8, with 2, 4 and 12 for tight spots. Tailwind steps map directly: p-2 is 8px, gap-4 is 16px, py-12 is 48px.
| Step | px | Tailwind | |
|---|---|---|---|
| spacing-01 | 2 | 0.5 | |
| spacing-02 | 4 | 1 | |
| spacing-03 | 8 | 2 | |
| spacing-04 | 12 | 3 | |
| spacing-05 | 16 | 4 | |
| spacing-06 | 24 | 6 | |
| spacing-07 | 32 | 8 | |
| spacing-08 | 40 | 10 | |
| spacing-09 | 48 | 12 | |
| spacing-10 | 64 | 16 | |
| spacing-11 | 80 | 20 |
Page layout
Content sits in a 1152px column (max-w-6xl) with a 16px gutter on phones and 32px from sm up. Sections are separated by 56–112px of vertical space.