Shape
All radii derive from --radius (10px). Nested elements use concentric radii — the most common interface 'feels off' mistake is mismatched inner/outer corners.
01Radius scale
sm
6px
Chips, kbd keys, tiny pills.
md
8px
Inline buttons, input fields, small badges.
lg
10px
Default — cards, popovers, alerts, primary buttons. The system anchor.
xl
14px
Larger card surfaces, dialog content area.
2xl
18px
Hero callouts, image containers.
3xl
22px
Decorative — sparingly.
4xl
26px
Rare. Reach for `rounded-full` instead if you want it round.
02Concentric radius
When a rounded element nests inside another rounded element, the inner radius should equal the outer radius minus the padding. Mismatched concentricity is the single most common 'this feels off' bug.
Correct — outer 16px, padding 8px, inner 8px
Corners feel like one piece. The eye reads the inner element as belonging to the outer container.
Wrong — outer 16px, padding 8px, inner 16px
The matching radii fight. The inner element looks pasted on. This is the "feels cheap" smell — and it's almost always concentricity.