Scale
Generate spacing and type scales from a modular ratio.
Unit
Token naming
Visual scale
--space-2xs 0.382rem 6.1 px
--space-xs 0.618rem 9.9 px
--space-base 1rem 16 px
--space-sm 1.618rem 25.9 px
--space-md 2.618rem 41.9 px
--space-lg 4.236rem 67.8 px
--space-xl 6.854rem 109.7 px
--space-2xl 11.09rem 177.4 px
--space-3xl 17.944rem 287.1 px
Scale details
CSS output
/* Scale: golden (1.618033988749895), 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.09rem;
--space-3xl: 17.944rem;
}