93 Scaled Corner Radius. 93 of 95.
93/VISUAL DESIGN/93 of 95
Scaled Corner Radius
As components grow, the radius should grow with them.
The problem
A single corner radius across every size makes small controls look pillowy and large panels look sharp and cheap.
The solution
Radius scales with size: 12px on XS, 16px on S, 24px on M — softness stays balanced.
Experiment
Play with the values
12px
12px
16px
24px
How it works
- Components are grouped into size tiers instead of sharing one corner radius.
- Radius maps with the tier: smaller controls get a tighter radius, larger ones a softer one.
- Buttons, cards, and panels each use the radius for their tier.
- Relative softness stays constant, so a big card does not look sharper than a small button.
- A single global radius is avoided because it only looks right at one size.
Seen in
Design systems
Radius tokens step up with space and type scales instead of a single --radius.
Component libraries
Buttons stay crisp while dialogs keep a softer, larger corner.
Dashboards
Dense chips and roomy content cards share the same visual language at different sizes.
Marketing UI
Hero panels feel soft without making CTAs look over-rounded.