Foundations
Proportion
One number, φ, and every scale derives from it with pow(). Drag the base unit below: nothing else is set by hand, so everything follows.
One ratio, every scale.
Space steps by φ, type by √φ. The demo redeclares both scales from one unit, the way data-density does for a whole page.
Space · unit × φⁿ, snapped to whole pixels
Type · base × φ^(n/2)
text-mQuiet, legibletext-lQuiet, legibletext-xlQuiet, legibletext-2xlQuiettext-3xlQuietComponents · read the same tokens
Northlight
Padding, gaps, type and the buttons below all come from the unit above.
Shape, blur and time.
The same ratio sets the corners once a shape preset brings them back, the depth of the glass and the length of every transition.
Radius · radius-m × φⁿ, under data-radius="round"
Blur · 1rem × φⁿ
Off the scale.
A few values are not powers of φ, on purpose. Each one is here so that nothing else has to be: any other value that is not on the scale is a bug.
| Hairlines | 1px separators are device pixels: a fraction would blur or vanish. |
| The 1.5px stroke | Field rings and chevron arms sit between a hairline and the state edge. |
| The 2px state edge | “This one is on” must read at any density, so it never scales. |
| Focus rings | 2px gap, 2px ring: sized for visibility, not proportion. |
| 24px pointer target | An accessibility floor (WCAG 2.5.8), not a design choice. |
| 11px small-text floor | --ae-text-xs is φ⁻¹ of the base, but never smaller than 11px to stay legible. |
| Breakpoints | 48, 64 and 80rem, plus 32 and 48rem for containers. Queries can't read custom properties. |
| Viewport caps | Values such as 85dvh keep sheets and dialogs inside the screen. |
| The 999px pill | A radius larger than any box, so the soft and round presets turn ends fully round. |
| Colour and alpha | OKLCH lightness and chroma are tuned for contrast, not ratio. |
| Tracking and weights | Letter-spacing and font weights are optical, set per size by eye. |
| Entrance scale and glass saturation | Layers grow in from 0.96 and frost lifts colour by 1.8: perceptual amounts. |
| Glyphs and markers | Icons, chevrons and the mark keep the geometry they were drawn with. |
Tokens.
Every --ae-* token is also exported as dist/tokens.json with its raw value, for JavaScript, Figma or your own build.
:root {
--ae-phi: 1.618034;
--ae-space-1: round(calc(var(--ae-unit) * pow(var(--ae-phi), -3)), 1px); /* 0.236 */
--ae-space-4: round(var(--ae-unit), 1px); /* 1 */
--ae-space-5: round(calc(var(--ae-unit) * var(--ae-phi)), 1px); /* 1.618 */
--ae-text-l: calc(var(--ae-text-base) * pow(var(--ae-phi), 0.5));
--ae-leading-normal: var(--ae-phi);
--ae-container: calc(1rem * pow(var(--ae-phi), 9)); /* ≈ 76rem */
--ae-measure: calc(40ch * var(--ae-phi)); /* ≈ 65ch */
}