Foundations
Border Radius
A small, consistent scale referenced everywhere a corner is rounded.
Scale
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-full
When to use each level
| Token | When to use it |
|---|---|
| --radius-sm | Small chips, inline badges |
| --radius-md | Inputs, buttons, small chips |
| --radius-lg | Cards, tables, modals |
| --radius-xl | Auth cards, large elevated surfaces |
| --radius-full | Pills, badges, avatars, toggles |
Usage rules
| Rule | Detail |
|---|---|
| No arbitrary radii | Every rounded corner uses one of the five tokens on this page. |
| Nesting | A nested element’s radius is never larger than its parent’s. |
| Consistency over cleverness | The same component always uses the same radius token across the whole product. |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug border-radius to manage the usage rules above from the CMS.