Spacing Scale Generator

Generate consistent spacing scales for design systems

Base Unit (px)

Scale Type

Linear
Exponential
Fibonacci
Golden Ratio

Number of Steps

Visual Preview

Steps	Spacing Values
0	--spacing-04px
1	--spacing-18px
2	--spacing-216px
3	--spacing-332px
4	--spacing-464px
5	--spacing-5128px
6	--spacing-6256px
7	--spacing-7512px
8	--spacing-81024px
9	--spacing-92048px
10	--spacing-104096px
11	--spacing-118192px

CSS Variables

:root {
  --spacing-0: 4px;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 32px;
  --spacing-4: 64px;
  --spacing-5: 128px;
  --spacing-6: 256px;
  --spacing-7: 512px;
  --spacing-8: 1024px;
  --spacing-9: 2048px;
  --spacing-10: 4096px;
  --spacing-11: 8192px;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "0": "4px",
        "1": "8px",
        "2": "16px",
        "3": "32px",
        "4": "64px",
        "5": "128px",
        "6": "256px",
        "7": "512px",
        "8": "1024px",
        "9": "2048px",
        "10": "4096px",
        "11": "8192px"
      }
    }
  }
}