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 applied to all four corners.

--radius-050 0.125rem · 2px Hairline rounding, tags

--radius-100 0.25rem · 4px Inputs, small controls

--radius-200 0.5rem · 8px Buttons, chips

--radius-300 0.5rem · 8px Cards, menus

--radius-400 0.75rem · 12px Panels, dialogs

--radius-500 1rem · 16px Large surfaces, sheets

--radius-full 9999px Pills, avatars, toggles

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-200); }
.card   { border-radius: var(--radius-400); }
.avatar { border-radius: var(--radius-full); }