Primitives
Border radius
10 steps from flat to pill. Use CSS custom properties - never hardcode radius values in components.
Scale
none
0pxxs
2pxsm
4pxmd
6pxlg
8pxxl
12px2xl
16px3xl
20px4xl
24pxfull
9999pxToken reference
| Token | Value | Typical usage |
|---|---|---|
--radius-none | 0px | Flat edges, tables, full-width elements |
--radius-xs | 2px | Subtle rounding, checkboxes, small chips |
--radius-sm | 4px | Inputs, small components, code blocks |
--radius-md | 6px | Buttons, tags, form controls |
--radius-lg | 8px | Dropdowns, tooltips, small cards |
--radius-xl | 12px | Cards, panels, modals |
--radius-2xl | 16px | Large cards, sheets, elevated surfaces |
--radius-3xl | 20px | Full-bleed containers, hero elements |
--radius-4xl | 24px | Feature cards, prominent UI blocks |
--radius-full | 9999px | Pills, avatars, toggle switches |