Radii

A 1.25 ratio scale from a 0.8rem base, plus a full pill. Each box carries its own radius.

Click any specimen to copy the token it documents, as var(--token).

How it works

Steps. Twelve, 3xs to 6xl, on a 1.25 ratio from a 0.8rem base - four under it and seven over it, with --root-r--md the base itself. The top three carry the radius a full-bleed panel or a sheet needs, which the scale used to stop short of.

The two ends. Neither is a step, so they bracket the ramp rather than sit in it: --root-r--full opens the list and --root-r--none closes it. full is a literal pill - any number past half the box's height clamps to the same shape - and none is 0, a corner squared on purpose and named so it can be found again.

What to write. md for a field or a button, lg and up for a card or a dialog - the bigger the surface, the bigger the radius it carries - xs and down for a tag or a swatch, full for what reads as a pill or a circle.

Nested boxes. The outer radius wants to be the inner one plus the padding between them, or the two curves read as concentric when they are not.

Scale basis

--root-r--base

.8rem

--root-r--ratio

1.25

Radii

How it works

Scale basis

Tokens