The type and spacing scales

How a step is computed

Each step of the type scale is worked out twice — once at your mobile base and ratio, once at your desktop base and ratio — and the two are fused into a single clamp() that interpolates between your breakpoints.

The result is one declaration per size that scales smoothly, with no breakpoint jumps and no media queries in your own CSS.

Do not hand-edit a clamp

The individual clamp() values are calculated. Editing one by hand breaks the internal consistency of the scale, and it will be overwritten on the next save.

To change the scale, change the ratio and let every step recompute.

The container-relative variant

.cq-fluid overrides the same size tokens to scale by container width rather than viewport width.

Put it on a component and its type responds to the space the component is in. That is usually what you actually wanted from a card that appears both in a wide row and in a narrow sidebar.

Spacing works the same way

Spacing is generated from its own base and ratio, on the same fluid principle, then exposed as three sets of tokens: --padding-*, --margin-* and --gap-*, all pointing at the same --space-* scale.

Use the semantic one. Reaching for --space-m directly works, but --padding-m says what you meant and can be retargeted later without touching the component.