Designer / Layout

Spacing Scale Generator

Generate spacing scales from a base size and ratio, preview token steps, and copy production-ready CSS instantly. Useful for spacing tokens, component gaps, and padding systems that stay coherent as the UI grows.

Base sizeRatioSteps upSteps down

Token prefix

Status

Loaded soft UI starter scale

CSS tokens

--space-n2: 3.56px;
--space-n1: 5.33px;
--space-0: 8px;
--space-1: 12px;
--space-2: 18px;
--space-3: 27px;
--space-4: 40.5px;
--space-5: 60.75px;
--space-6: 91.13px;

Step -2

3.56px / 0.222rem

Step -1

5.33px / 0.333rem

Step 0

8px / 0.5rem

Step 1

12px / 0.75rem

Step 2

18px / 1.125rem

Step 3

27px / 1.688rem

Step 4

40.5px / 2.531rem

Step 5

60.75px / 3.797rem

Step 6

91.13px / 5.695rem