Scale

Generate mathematical spacing and sizing scales from modular ratios.

Unit
Naming

Visual Scale

--space-2xs
0.382rem 6.1px
--space-xs
0.618rem 9.9px
--space-base
1rem 16px
--space-sm
1.618rem 25.9px
--space-md
2.618rem 41.9px
--space-lg
4.236rem 67.8px
--space-xl
6.854rem 109.7px
--space-2xl
11.089rem 177.4px
--space-3xl
17.942rem 287.1px

Meta

Ratio golden (1.618)
Base 16px
Steps 9 (2 down, 6 up)
Unit rem

CSS Output

/* Scale: golden (1.618), base 16px */
:root {
  --space-2xs: 0.382rem;
  --space-xs: 0.618rem;
  --space-base: 1rem;
  --space-sm: 1.618rem;
  --space-md: 2.618rem;
  --space-lg: 4.236rem;
  --space-xl: 6.854rem;
  --space-2xl: 11.089rem;
  --space-3xl: 17.942rem;
}