Sizing & spacing

The pad scale, borders, radii, outlines and shadows.

All spacing is derived from a single base unit, --pad (15px), and a small set of element-level tokens.

Base unit — pad

All paddings, margins and gaps are multiples of --pad.

0.5× 7.5px

1× 15px

2× 30px

3× 45px

4× 60px

8× 120px

padding: var(--pad);
margin: calc(var(--pad) * 2);
gap: calc(var(--pad) * 0.5);

Touch target --touch-target-size — 44px

Input --input-size — 40px

Radio --radios-size — 40px

Border width --border-width — 3px

Focus border width --border-focus-width — 1px

Multiples of --border-radius (12.5px).

1× var(--border-radius)

2× calc(var(--border-radius) * 2)

Default offset --outline-offset — 3px

Focus offset --outline-focus-offset — 0px

Active offset --outline-active-offset — 3px

Shallow Deep

box-shadow: var(--shadow-shallow); /* 0px 3px 0px var(--color) */
box-shadow: var(--shadow-deep);    /* 0px 5px 0px var(--color) */

padding: var(--input-padding); /* 10px 15px */