Radius and elevation

Rules

1. 1Every radius derives from --radius (12px): rounded-md for small controls, rounded-lg for buttons and inputs, rounded-xl for cards.
2. 2Nested corners are concentric: inner radius = outer radius minus the gap. An image inset 8px in a 17px card gets a 9px radius.
3. 3Badges and switches are the exceptions: badges are full pills, switches are rounded squares.
4. 4Primary buttons are tactile: top-to-bottom gradient, 1px darker edge, a soft salmon top highlight (--primary-highlight) and a colored glow below.
5. 5Cards sit flat with a hairline ring. Popovers, menus and toasts float with a soft shadow.
6. 6On press, buttons sink 1px and the glow tucks underneath. They never scale, so wide buttons don't visibly shrink.

Radius scale

Elevation

Primary button anatomy