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-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 — a sharp input nested inside a soft card reads as intentional layering.

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