Spacing System Generator

Build a consistent spacing scale from a base unit. Generate linear, geometric or Fibonacci scales with CSS variables and Tailwind config.

Presets

Scale Type

Steps: 16

Preview

0.5

2px

4px

1.5

6px

8px

2.5

10px

12px

3.5

14px

16px

20px

24px

28px

32px

36px

40px

44px

Token	px	rem
0	0	0.000
0.5	2	0.125
1	4	0.250
1.5	6	0.375
2	8	0.500
2.5	10	0.625
3	12	0.750
3.5	14	0.875
4	16	1.000
5	20	1.250
6	24	1.500
7	28	1.750
8	32	2.000
9	36	2.250
10	40	2.500
11	44	2.750

Show Tailwindbase: 4px16 tokens

CSS Variables

:root {
  --space-0: 0.000rem; /* 0px */
  --space-0.5: 0.125rem; /* 2px */
  --space-1: 0.250rem; /* 4px */
  --space-1.5: 0.375rem; /* 6px */
  --space-2: 0.500rem; /* 8px */
  --space-2.5: 0.625rem; /* 10px */
  --space-3: 0.750rem; /* 12px */
  --space-3.5: 0.875rem; /* 14px */
  --space-4: 1.000rem; /* 16px */
  --space-5: 1.250rem; /* 20px */
  --space-6: 1.500rem; /* 24px */
  --space-7: 1.750rem; /* 28px */
  --space-8: 2.000rem; /* 32px */
  --space-9: 2.250rem; /* 36px */
  --space-10: 2.500rem; /* 40px */
  --space-11: 2.750rem; /* 44px */
}

Tailwind Config

// tailwind.config
spacing: {
  '0': '0.000rem', /* 0px */
  '0.5': '0.125rem', /* 2px */
  '1': '0.250rem', /* 4px */
  '1.5': '0.375rem', /* 6px */
  '2': '0.500rem', /* 8px */
  '2.5': '0.625rem', /* 10px */
  '3': '0.750rem', /* 12px */
  '3.5': '0.875rem', /* 14px */
  '4': '1.000rem', /* 16px */
  '5': '1.250rem', /* 20px */
  '6': '1.500rem', /* 24px */
  '7': '1.750rem', /* 28px */
  '8': '2.000rem', /* 32px */
  '9': '2.250rem', /* 36px */
  '10': '2.500rem', /* 40px */
  '11': '2.750rem', /* 44px */
}