Radius
The corner-radius scale Convert uses across every surface, from inner chips to hero cards. Each step is tuned to its element size so corners read as intentional, never arbitrary.
Coherence rule: every radius is a multiple of 4. No off-grid values (no 11px, 5px, 6px). Pick the nearest step on the scale.
Scale
Seven steps span the full range, from the tight 4px corner on tags to the fully-round pill. Each box below renders its own token.
xs · 4
sm · 8
md · 12
lg · 16
xl · 20
2xl · 24
pill · 999
Usage
Match the token to the element. Reference the token in code, never a bare pixel value.
| Token | px | Usage |
|---|---|---|
--radius-xs |
4 | Tags, inner chips |
--radius-sm |
8 | Small elements, navbar buttons |
--radius-md |
12 | Buttons, chips |
--radius-lg |
16 | Default cards |
--radius-xl |
20 | Large cards |
--radius-2xl |
24 | Logo / hero cards |
--radius-pill |
999 | Fully-round |