Spacing
Spacing System
XS — 8px
Use for:
Icon next to text
Checkbox spacing
Tiny labels
S — 16px
Use for:
Text under a heading
List items
Buttons next to each other
M — 24px
Use for:
Padding inside cards
Between paragraphs
Between images and captions
L — 32px
Use for:
Space after H2 headings
Medium-sized content blocks
XL — 48px
Use for:
Between groups of content
2XL — 64px
Use between major website sections.
Example:
Hero
↓
Process
↓
Projects
↓
Testimonials
L — 32px
Use for:
Space after H2 headings
Medium-sized content blocks
XL — 48px
Use for:
Between groups of content
2XL — 64px
Use between major website sections.
Example:
Hero
↓
Process
↓
Projects
↓
Testimonials
3XL — 96px
Use when you want the page to breathe.
Luxury brands love this.
More empty space = more confidence.
4XL — 128px
Reserved for:
Hero sections
Major transitions
Premium layouts
Don't overuse it.