Spacing System Guide
Consistent spacing creates visual hierarchy and improves readability. Our spacing system is based on an 8px grid.
8px Grid System
Why 8px?
- • Most screens are divisible by 8
- • Creates consistent rhythm
- • Easy mental math (8, 16, 24, 32...)
- • Industry standard (Material Design, iOS)
Common Spacings
8px
Tight (p-2)16px
Default (p-4)24px
Comfortable (p-6)32px
Spacious (p-8)Section Spacing
Compact Section
py-8 (32px vertical)Standard Section
py-16 (64px vertical)Wide Section
py-16-lg (96px vertical)Component Spacing
Cards
Compact Card
p-4 (16px)Standard Card
p-6 (24px)Spacious Card
p-8 (32px)Buttons
Text Spacing
Tight Heading
Subtitle with mb-1 (4px)
Normal Heading
Subtitle with mb-2 (8px)
Spacious Heading
Subtitle with mb-4 (16px)
Grid & Gap Spacing
Tight Gap (gap-2 = 8px)
Item 1
Item 2
Item 3
Item 4
Medium Gap (gap-4 = 16px)
Item 1
Item 2
Item 3
Item 4
Large Gap (gap-8 = 32px)
Item 1
Item 2
Item 3
Item 4
Responsive Spacing
Adaptive Padding
This container's padding changes based on screen size:
- p-4 on mobile (16px)
- sm:p-6 on small screens (24px)
- md:p-8 on medium screens (32px)
- lg:p-10 on large screens (40px)
- xl:p-12 on extra large screens (48px)
Spacing Best Practices
✅ DO
- • Use consistent spacing multiples (8, 16, 24, 32)
- • Increase spacing for larger screens
- • Group related elements with less space
- • Separate sections with more space
- • Use responsive spacing utilities
❌ DON'T
- • Mix arbitrary spacing values (7px, 13px, 21px)
- • Use the same spacing everywhere
- • Forget mobile responsive spacing
- • Over-space elements (too much white space)
- • Under-space elements (too cramped)