Five radii. One job each.
Five sanctioned radii, each tied to a single role. The ladder runs from chip to tile-hero, smallest things nested inside bigger things. The pill is for status, not for buttons. There is no sixth.
From chip to tile-hero, in order.
Each step roughly doubles the corner radius. Nothing rounder than 16px ships in the operator surface.
Full pill. Status only. Never on a button, never on an input.
The smallest radius. Used on tags and short inline blocks where the corner should still register as soft.
Every operator-touchable control. Big enough to read as a tile, tight enough to read as precise.
The everyday card. Sits flat on Glacier; the radius is what reads as a surface boundary, not a shadow.
The biggest sanctioned radius. Reserved for the few tiles that anchor a page. Nothing rounder ships.
Each radius rendered at its native role.
A chip looks correct as a status pill and wrong as a CTA. A tile-hero radius looks correct on a KPI block and wrong on an inline button.
Pill button reads as marketing CTA, not operator instrument.
Tile-hero radius on a button is the SaaS-template tell.
A list row at 24px reads as a hero block, not a row.
A KPI hero with control-radius looks like a button trying to be a card.
Four rules that decide the radius for you.
One role per radius.
Five radii, five jobs. If a designer reaches for a sixth radius, the answer is no. Reuse one of the five and adjust padding instead.
Radius ladder, small inside big.
A chip nests inside a control nests inside a tile nests inside a tile-hero. Never the reverse: a tile-hero radius on a button is the SaaS-template failure.
No rounded-2xl grids.
Three identical tile-hero cards in a row reads as the Tailwind UI cover image. Vary the variant and pick the radius for the role, not for visual rhythm.
Pill is status only.
Full 9999px belongs to status indicators and the live-dot. A pill button reads as marketing-bro CTA. The Insyte button is 8px, always.