toolbox

Start here

Use --type to place one element in the hierarchy — this heading is bigger, that caption is smaller. Use --scale to make a whole region bigger or smaller while keeping its internal hierarchy intact.

The one thing to remember: --type does not inherit — set it on each element that needs sizing. --scale does inherit — set it once on a region and everything inside follows.

--type  local step

An integer step in the type hierarchy. 0 is body text; positive is bigger, negative is smaller. Letter-spacing and line-height adjust automatically — larger text gets tighter spacing.

<h1 style="--type: 3">Display heading</h1>
<p>Body text needs nothing — 0 is the default.</p>
<small style="--type: -2">Caption</small>

Because --type doesn't inherit, a child of a --type: 3 heading is back at body size unless you set its own step. That's deliberate — it keeps sizing explicit and local.

--scale  regional multiplier

A multiplier that inherits. Set it on a region to rescale everything inside — type, padding, gaps, component sizing — all at once, while the internal hierarchy stays intact.

<div style="--scale: 1.25">
  <!-- everything inside renders 1.25× -->
</div>

Use --scale on a section, a card, or the whole page. Each card above sets only --scale — the heading, body, button, and padding all follow from it.

Spacing comes free

There is no spacing API. No --gap token, no spacing scale, no padding utilities. Everything spacing-related derives from the scale knobs:

Change --type or --scale and the whole composition rescales coherently — text, padding, and gaps move together.