Telemetry rails, code blocks, tabular data. Sharp corners signal raw data.
Form fields, tag chips, dropdown items. 4px reads tight and precise — never round forms more.
The workhorse. Every default card, button, panel sits at 8px. If unsure, this is the right answer.
Status pills, badges, avatars, dialpad keys. Fully round signals identity or state.
Radius is a semantic token. An icon-button and an avatar are different things and shouldn't share a corner just because they're the same size. --r-3 for buttons, --r-full for avatars — every time.
A panel of cards uses one radius for every card. A toolbar of icon-buttons uses one radius for every button. Mixing r-3 and r-4 in the same cluster is visual noise.
If the outer card is rounded, the image inside it must clip to the same shape. Use overflow:hidden and border-radius:inherit on media. Sharp corners poking out of a rounded container is the #1 dev tell.