DocsFoundations
Radius & borders
Pills, cards and three border weights.
Radius scale
Controls are pills: buttons, fields and chips use a full radius. Surfaces get larger, softer corners the bigger they are.
- sm 4 px · checkbox
- md 6 px · small marks
- lg 8 px · inner elements
- xl 12 px · popovers
- 2xl 16 px · tiles, alerts, toasts
- 3xl 24 px · cards, panels, sheets
- full 9999 px · buttons, fields, chips
Three border weights
A border should never be heavier than the stem of the letter “I” in the text it frames (Inter 600 at 16 px is about 2.1 px, at 14 px about 1.9 px). So the weight is picked from the text size, not from habit.
2 px
Text of 16 px and more, elements of 44 px and more, and surfaces: cards, tiles, list rows, dialogs, sheets.
1.5 px
Semibold text of 12–14 px in elements of 24–44 px: badges, small chips, pagination, tabs, small selects.
1 px
Controls of 20 px and less (checkbox, radio), small regular text, and every divider inside a surface.
The only heavier line is the 3 px focus ring.
Inner corners
An area cut into a white surface (a “well” holding a list or a map) always has rounded inner corners of 24 px, like a card, and its inner shadow follows the curve. A square corner is never left, except where an active tab forms the wall of the well.