The 4px Grid System

All spacing follows a 4px base unit, creating visual harmony and consistency. This system ensures elements align properly and creates predictable layouts.

4px base unit repeated across 128px

4px

Base unit

8px

2× base (most common)

16px

4× base (standard)

Micro (0-8px)

Tight spacing for compact elements

00px0px

Reset spacingRemove margins

p-0

m-0

gap-0

0.50.125rem2px

Icon offsetsMinimal adjustments

p-0.5

m-0.5

gap-0.5

10.25rem4px

Tight spacingBadge padding

p-1

m-1

gap-1

1.50.375rem6px

Icon gapsSmall badges

p-1.5

m-1.5

gap-1.5

20.5rem8px

Button paddingCompact spacing

p-2

m-2

gap-2

Small (12-16px)

Standard component padding and spacing

30.75rem12px

Small component paddingIcon-text gaps

p-3

m-3

gap-3

41rem16px

Standard paddingComponent spacing

p-4

m-4

gap-4

Medium (20-32px)

Card and section spacing

51.25rem20px

Medium paddingCard content

p-5

m-5

gap-5

61.5rem24px

Card paddingSection spacing

p-6

m-6

gap-6

71.75rem28px

Generous padding

p-7

m-7

gap-7

82rem32px

Large paddingCard spacing

p-8

m-8

gap-8

Large (40-64px)

Major section gaps

102.5rem40px

Section spacingComponent gaps

p-10

m-10

gap-10

123rem48px

Large section gapsPage sections

p-12

m-12

gap-12

143.5rem56px

Major sections

p-14

m-14

gap-14

164rem64px

Hero sectionsLarge gaps

p-16

m-16

gap-16

Macro (80-128px)

Page-level spacing

205rem80px

Page sectionsHero padding

p-20

m-20

gap-20

246rem96px

Large page sections

p-24

m-24

gap-24

328rem128px

Extra large spacing

p-32

m-32

gap-32

Common Spacing Patterns

Card Padding

Use p-6 (24px) for standard card padding

<div className="bg-surface-1 border rounded-xl p-6">
  Card content
</div>

Button Padding

Horizontal padding larger than vertical for better touch targets

<button className="px-6 py-3 rounded-lg">
  Action
</button>

Stack Spacing

Use space-y-* for consistent vertical rhythm

<div className="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Grid Gap

Use gap-* for grid and flex container spacing

<div className="grid grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Section Spacing

Use mb-16 (64px) between major page sections

<section className="mb-16">
  Section content
</section>
<section className="mb-16">
  Next section
</section>

Best Practices

Do This

✓Use spacing tokens from the 4px scale
✓Maintain consistent spacing across similar components
✓Use space-y-* for vertical stacks
✓Use gap-* for grid/flex containers
✓Increase spacing for better touch targets on mobile

Do not Do This

✗Avoid arbitrary spacing like p-[13px]
✗Do not use spacing values outside the 4px scale
✗Never use inline styles for spacing
✗Avoid mixing spacing systems (rem + px)
✗Do not use overly tight spacing for touch interfaces