The Golden Ratio

The Constant

$$\phi =\frac{1+\sqrt{5}}{2}\approx 1.618033988749895$$

The Golden Ratio is the unique positive number where the ratio of the whole to the larger part equals the ratio of the larger part to the smaller:

$$\frac{a+b}{a}=\frac{a}{b}=\phi$$

Why φ for a CSS framework?

Most design systems use either a linear scale (e.g., 4px, 8px, 12px, 16px...) or an arbitrary modular scale. Both require human decisions at every step.

The Golden Ratio scale is self-consistent: there are no decisions to make once you commit to φ. Every step follows mathematically from the previous. When two elements need visual separation, there is exactly one correct answer: the next step up.

The Scale

remCSS stores φ as a single CSS custom property and derives all other steps via calc():

:root {
	--phi: 1.618033988749895;
	--step-0: 1rem;
	--step-1: calc(var(--step-0) * var(--phi)); /* ≈ 1.618rem */
	--step-2: calc(var(--step-1) * var(--phi)); /* ≈ 2.618rem */
	/* ... */
}

This means the entire scale is live. If you change --phi on any element, all descendant spacing, type, and layout values recompute automatically.

Full Scale Reference

Token	φ exponent	Value (rem)	Value (@10px root)
--step-n3	φ⁻³	0.2361	2.36px
--step-n2	φ⁻²	0.3820	3.82px
--step-n1	φ⁻¹	0.6180	6.18px
--step-0	φ⁰	1.0000	10.00px
--step-1	φ¹	1.6180	16.18px
--step-2	φ²	2.6180	26.18px
--step-3	φ³	4.2361	42.36px
--step-4	φ⁴	6.8541	68.54px
--step-5	φ⁵	11.090	110.9px
--step-6	φ⁶	17.944	179.4px
--step-7	φ⁷	29.034	290.3px
--step-8	φ⁸	46.979	469.8px
--step-9	φ⁹	76.013	760.1px
--step-10	φ¹⁰	122.99	1230px
--step-11	φ¹¹	199.01	1990px
--step-12	φ¹²	322.00	3220px

Semantic Aliases

For component authors who don't want to think in steps, semantic aliases map intent to scale positions:

Token	Step	Approx.
--space-xs	n2	0.382rem
--space-sm	n1	0.618rem
--space-md	0	1.000rem
--space-lg	1	1.618rem
--space-xl	2	2.618rem
--space-2xl	3	4.236rem
--space-3xl	4	6.854rem

Fluid Type

Text sizes use clamp() to interpolate smoothly between adjacent GR steps as the viewport grows:

$$\text{size}=\text{clamp}({\text{step}}_n,f(\text{viewport}),{\text{step}}_{n+1})$$

--text-base: clamp(var(--step-1), 1.3rem + 1vi, var(--step-2));

At narrow viewports, text locks to --step-1 (≈16px). At wide viewports, it approaches --step-2 (≈26px). The browser interpolates via the viewport expression in between.

Local Scale Override

Because all steps are calculated from --phi via calc(), you can create a locally denser or looser scale on any element:

.compact-card {
	/* Compress the scale — steps are smaller within this context */
	--phi: 1.4;
}

.hero-section {
	/* Expand the scale — more dramatic spacing */
	--phi: 1.8;
}