Corner radius
Our shapes are soft, never sharp. Radius is the subtlest signal in the system — it's what keeps the product feeling calm under dense content.
Scale
Eight steps
The scale doubles every two steps until it hits the "pill" value (used for anything we want to read as a chip).
0
2
4
8
12
16
24
pill
Tokens
Semantic names
Token
Value
Where it's used
Shape
--radius-sm
4px
Inline chips, keyboard shortcut pills
--radius-md
8px
Buttons, form fields, list rows
--radius-lg
12px
Cards, menu surfaces, tooltips
--radius-xl
16px
Hero cards, modal sheets, page panels
--radius-2xl
24px
Mobile bottom sheets, marketing cards
--radius-full
999px
Avatars, filter chips, status pills
In product
Where each radius lives
Continue
Button
Input
⌘ K
Keyboard chip
Card
Modal
Active
Status pill
Avatar
Mobile sheet
Frequent
Filter chip
Nesting
Inner radius = outer minus padding
When you round a child inside a rounded parent, the child's radius should be the parent's radius minus the gap between them. This keeps the curve parallel.
Outer 16px · 12px padding → inner 4px.
If you made the inner 16px, the curves would collide at the top corners.
If you made the inner 16px, the curves would collide at the top corners.