Brand PeelBrand Peel (Alpha)

Spacing & 8-Point Grid Calculator

Build a consistent spacing scale from a base unit, preview it on real components, and copy CSS variables or Tailwind config.
Design Tokens
Free Tool Design System
Tools Overview

Spacing & 8-Point Grid Calculator

Generate a spacing scale from a base unit, preview it on components, and export 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.

Category HubBuild Stack
Adjacent Brand Foundations Brand Governance Developer Marketing
PreviousNext
Next Move - Strong resultOffer Design

Recommended: Stack Optimizer

You are in a good place. Increase offer strength and conversion leverage next.

Optimize offer stack

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-54px
space-18px
space-1-512px
space-216px
space-324px
space-432px
space-648px
space-864px
space-1296px
space-16128px

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',
  }