Radius

Corner-rounding tokens, from a barely-there hairline to fully circular. Pick by element scale — small controls round tightly, large surfaces round softly.

Radius scale

Each swatch is rendered with its actual token on all four corners.

--radius-050 — Hairline rounding.

--radius-100 — Inputs, small controls.

--radius-200 — Buttons, chips.

--radius-300 — Cards, menus.

--radius-400 — Panels, dialogs.

--radius-500 — Large surfaces, sheets.

--radius-full — Pills, avatars, toggles.

Usage

Match radius to element size — a sharp input nested inside a soft card reads as intentional layering.

.button { border-radius: var(--radius-200); }
.card   { border-radius: var(--radius-400); }
.avatar { border-radius: var(--radius-full); }