Radius
StableCorner radius tokens for components, cards, and containers.
Overview
A consistent set of border radius values keeps the UI visually cohesive. All radii are available as Figma variables bound to the Radius collection.
| Token | Value | Description |
|---|
Component radius mapping
| Component | Radius token |
|---|---|
| Button | Radius/md (8px) |
| Input / Textarea | Radius/sm (4px) |
| Badge | Radius/xs (2px) |
| Card | Radius/md (8px) |
| Modal | Radius/lg (12px) |
| Avatar | Radius/full |
| Tag / Pill | Radius/full |
Consistency rule
Always use a token — never write border-radius: 6px or other arbitrary values not in the scale.