Spacing & 8-Point Grid Calculator
Spacing without a system turns into random numbers. Pick a base unit, 8 is common but not a rule, see the scale on real components, then copy CSS variables or Tailwind spacing.
Free Tool Design System
Tools OverviewSpacing & 8-Point Grid Calculator
Spacing without a system turns into random numbers. Pick a base unit, 8 is common but not a rule, see the scale on real components, then copy CSS variables or a Tailwind spacing object.
Catalog Context Part of Design System
See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.
Starter Kits Including This Tool
Next Move - Strong resultDesign System
Recommended: Typography Scale & Pairing Generator
Spacing is locked. Pair it with a typography scale for full layout rules.
Base unit
Start with your grid unit. 8 is the most common product baseline.
Generating 17 steps from 8px up to 768px.
Scale & export
Preview spacing on a component and copy the code.
| Token | Value | Preview |
|---|---|---|
| space-0-5 | 4px | |
| space-1 | 8px | |
| space-1-5 | 12px | |
| space-2 | 16px | |
| space-3 | 24px | |
| space-4 | 32px | |
| space-6 | 48px | |
| space-8 | 64px | |
| space-12 | 96px | |
| space-16 | 128px |
CSS Variables
:root {
--space-0-5: 4px;
--space-1: 8px;
--space-1-5: 12px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
--space-16: 128px;
--space-24: 192px;
--space-32: 256px;
--space-40: 320px;
--space-48: 384px;
--space-64: 512px;
--space-80: 640px;
--space-96: 768px;
}Tailwind Config
spacing: {
'0-5': '4px',
'1': '8px',
'1-5': '12px',
'2': '16px',
'3': '24px',
'4': '32px',
'6': '48px',
'8': '64px',
'12': '96px',
'16': '128px',
'24': '192px',
'32': '256px',
'40': '320px',
'48': '384px',
'64': '512px',
'80': '640px',
'96': '768px',
}