Shape
Corners and borders.
radius.control
radius.badge
radius.container
radius.round
border-width.default
border-width.focus
The five answers
| Question | Answer | Why |
|---|---|---|
| Which shape roles does it need? | Controls and containers | Pills everywhere; badges share the control corner. |
| How many corner sizes exist? | Two | Pill controls and large container corners. |
| How are corners set? | Fixed for the product | One brand, one set of corners. |
| What should control corners say? | Pill | Pill controls feel playful. |
| Where does shape show most? | Buttons and badges | Pill buttons are the signature shape. |
Tokens
Each token points to another token. Values live only on primitives, below.
| Token | Points to |
|---|---|
radius.control | brand-expressive.theme.base.radius.control → radius.999 |
radius.badge | brand-expressive.theme.base.radius.badge → radius.999 |
radius.container | brand-expressive.theme.base.radius.container → radius.24 |
radius.round | radius.full |
border-width.default | border-width.2 |
border-width.focus | border-width.3 |
The raw values these tokens end at are on Primitives › Shape.
When to use what
| Situation | Use | Not | Why |
|---|---|---|---|
| Corners of buttons and inputs | radius.control (pill) | Sharp corners | Pills match the brand's round, playful shapes. Sharp corners would feel corporate. |
| Shape of a status badge | radius.badge (pill) | A rectangle | Pills match the controls. |