Corner rounding sets how soft an edge reads. The ramp below is the raw scale; components never bind it directly, exactly as they never bind a colour ramp. They bind the roles in the second table, and a brand retunes the ramp underneath them. Two values sit outside the ramp by intent: none squares an edge that must meet another flush, and full is a cap rather than a size — it rounds to the shape's own height, so a pill stays a pill at any scale.
| Example | Token | Value | Usage |
|---|---|---|---|
radius.none | Flush edges: tables, full-bleed dividers | ||
radius.sm | The smallest useful curve; backs radius.small | ||
radius.md | Backs whichever roles a brand points at it | ||
radius.lg | Backs whichever roles a brand points at it | ||
radius.xl | Feature panels and large media — the one step no role binds; it belongs to composition | ||
radius.full | Pills and circles: badges, avatars, toggles, spinners. Bound directly — it already names its role |
The roles. nested is the only one that is not a free choice: a plate inside a rounded container must equal container minus that container's inset, or the two curves stop running parallel — the gap holds along the flats and opens out at the corners. The validator holds a brand to it, and a computed value under 2px goes square instead of faking an arc.
| Example | Role | Value | Bound by |
|---|---|---|---|
radius.small | Tiny affordances: checkbox, dismiss buttons, code chips, breadcrumb and link focus boxes | ||
radius.nested | Plates inside a padded parent: menu items, select options, command results, nav links, pagination cells | ||
radius.control | A control's own corner: Button, Input, Select trigger, Textarea, Toast, Tooltip, Alert, SegmentedControl | ||
radius.container | Surfaces that hold other things: Card, Dialog, Menu panel, Select listbox, CommandMenu, Accordion item |