Radius
One base token (--radius, 8px) drives the whole ramp, so corners stay consistent and a single change re-tunes every component.
The ramp
Five steps — from tight chips to full pills.
sm
4px
md
6px
lg
8px
xl
12px
pill
24px
Where each step is used
| Token | Size | Use |
|---|---|---|
--radius-sm | 4px | Badges, inline code chips, tight controls |
--radius-md | 6px | Buttons, inputs, menu items |
--radius-lg | 8px | Cards, popovers, alerts — the default surface radius |
--radius-xl | 12px | Large containers, preview panels, dialogs |
--radius-pill | 24px | Fully-rounded pills and avatar chips |
Rules of thumb
- Nested surfaces step down: a card at
lgholds controls atmd. - Use the Tailwind aliases (
rounded-sm/md/lg/xl) — they resolve to these tokens. - No per-corner mixing except for connected elements (e.g. the calendar's range endpoints).