← Back to Tools

Spacing System Generator

Create consistent spacing scales for your design system

Settings

Spacing Scale

0
0px
0.5
4px
1
8px
1.5
12px
2
16px
3
24px
4
32px
5
40px
6
48px
8
64px
10
80px
12
96px
16
128px
20
160px
24
192px
32
256px
40
320px
48
384px
64
512px
:root {
  --spacing-0: 0px;
  --spacing-0-5: 4px;
  --spacing-1: 8px;
  --spacing-1-5: 12px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-8: 64px;
  --spacing-10: 80px;
  --spacing-12: 96px;
  --spacing-16: 128px;
  --spacing-20: 160px;
  --spacing-24: 192px;
  --spacing-32: 256px;
  --spacing-40: 320px;
  --spacing-48: 384px;
  --spacing-64: 512px;
}

Usage Examples

Padding

padding: 32px

Margin Between Elements

Element 1
↕ 24px gap
Element 2

Grid Gap

Item
Item
Item

gap: 32px

💡 Best Practices

  • • Use 8px base for most web projects
  • • 4px base works well for dense interfaces
  • • Stick to the scale for consistency
  • • Use smaller values for tight spacing
  • • Use larger values for section separation
  • • Avoid arbitrary spacing values