Spacing System

Consistent spacing creates rhythm, hierarchy, and visual harmony

Spacing Scale

0
0

(0px)

No spacing

1
0.25rem

(4px)

Tight spacing, icons

2
0.5rem

(8px)

Small gaps, compact elements

3
0.75rem

(12px)

Default small spacing

4
1rem

(16px)

Standard spacing unit

5
1.25rem

(20px)

Medium gaps

6
1.5rem

(24px)

Large gaps, sections

8
2rem

(32px)

Extra large spacing

10
2.5rem

(40px)

Major sections

12
3rem

(48px)

Page sections

16
4rem

(64px)

Major page breaks

20
5rem

(80px)

Hero sections

24
6rem

(96px)

Extra large sections

Padding Examples

p-2 (8px)

p-4 (16px)

p-6 (24px)

p-8 (32px)

Margin Examples

mb-2 (8px)

mb-4 (16px)

mb-6 (24px)

mb-8 (32px)

Gap (Flexbox/Grid Spacing)

Flex Gap

Item
Item
Item
flex gap-2

Grid Gap

1
2
3
4
5
6
grid grid-cols-3 gap-4
HeroUI • Build: 2025-08-04T19:49:45.912Z