Radius
Corner rounding, from a barely-there hairline to fully circular. Pick by element scale — inputs and buttons round tightly, panels and dialogs round softly.
The scale
These are the names to write. Each swatch renders with its actual token on all four corners.
Radius is the one category where tier 2 is a scale rather than a set of intents —
a corner can be derived from its position on a ramp, where a colour cannot. It carried roles
(--radius-surface, --radius-card) until 2026-08-16; those still
resolve as deprecated aliases, and /update-tokens rewrites them.
Usage
Match radius to element size — mixing radii across nested elements (a sharp input inside a soft card) reads as intentional layering.
.button { border-radius: var(--radius-md, 0.5rem); }
.card { border-radius: var(--radius-lg, 0.75rem); }
.avatar { border-radius: var(--radius-pill, 9999px); }
A theme re-points these, and --radius-md is the one to move first — it is the
default corner and the most-used step, so it takes the whole kit flatter or rounder in a line.
Ingredients (tier 1)
The raw ramp the scale above is assembled from. Listed so the mapping is legible — never read one of these in a component and never re-point one in a theme. Moving a primitive moves everything downstream of it, which is the blast radius the tier model exists to prevent.
--radius-0500.125rem · 2px--radius-1000.25rem · 4px--radius-2000.5rem · 8px--radius-3000.5rem · 8px--radius-4000.75rem · 12px--radius-5001rem · 16px--radius-full9999px
--radius-200 and --radius-300 are the same value — a duplicate rung
left over from when tier 2 pointed a separate role at each. Nothing references
--radius-300 now.