From sharp panels to rounded chips, and when each is the right call.
Radius carries tone. Sharp corners read as structure — panels, tables, the code block. Soft corners read as something you touch — buttons, chips, cards. And full rounding is reserved for identity: pills, avatars, the toggle knob.
| Token | Value | Where |
|---|---|---|
| --radius-0 | 0px | Structural panels, tables, code |
| --radius-2 | 2px | Inputs, small fields |
| --radius-6 | 6px | Chips, tags, hit areas |
| --radius-8 | 8px | Buttons, menu items |
| --radius-10 | 10px | Cards, notifications |
| --radius-12 | 12px | Panels, modals |
| --radius-16 | 16px | Large surfaces |
| --radius-full | 999px | Pills, avatars, toggles |
Full-bleed panels, tables and the code block stay square. Rounding a structural edge makes it feel like a floating widget.
A radius-8 button inside a radius-12 card. An inner radius should never exceed its container's.
Reserve 999px for pills, avatars and toggles — shapes that are meant to read as round, not just soft.