Materials
Radii, borders, and elevation. Every edge is a 1px ring, never a soft shadow.
Corners
Four steps and full, chosen by role. Nested corners are concentric: an inner surface within a few pixels of its container takes the outer radius less the gap, so a 9px frame holds 5px panels and a 9px menu holds 4.5px rows.
rounded-sm3pxBadges, kbd, spec chipsrounded-md4.5pxButtons, inputs, rows in a popuprounded-lg6pxTables, small cards, example framesrounded-xl9pxFrames, menus, popovers, toastsrounded-full—Pills, avatars, status dotsElevation
Every edge is a 1px ring, never a soft drop shadow; elevation only adds a faint lift under the ring. Plain shadow-sm through shadow-2xl are switched off.
shadow-borderFlat: cards, frames, tables. The ring alone.
shadow-border-smRaised: switch thumbs, the selected segment.
shadow-border-mdFloating: menus, popovers, selects, tooltips, toasts.
shadow-border-lgModal: dialogs, sheets, overlay panels.