Radius & Borders
Corner radius scale from 6px (smallest) to 16px (cards). Border widths: 1px (subtle), 1.5px (balance pill), 2px (interactive), 3px (selected state).
Radius scale
xs · sm · md · lg · xl · 2xl · full
xs
6px
sm
8px
md
10px
lg
12px
xl
14px
2xl
16px
full
pill
- Stops
- 7 steps
- Smallest
- xs · 6px
- Largest
- 2xl · 16px
- Full
- 999px (pill)
Border weights
subtle · balance · interactive · selected
subtle
1px
card outlines
balance
1.5px
balance pill
interactive
2px
buttons, inputs
selected
3px
selected card state
- Subtle
- 1px · card outlines
- Balance
- 1.5px · balance pill
- Interactive
- 2px · buttons, inputs
- Selected
- 3px · selected card state