Radius & depth

Corners and elevation are one language of surface weight. Twelve radii but the system leans on three — 16px inner, 24px card, 36px dialog — and nine shadow steps carry the same hierarchy: the heavier the surface, the harder it rounds and the higher it floats.

Surface weight

Corners carry meaning: the heavier the surface, the harder it rounds. Three weights do the work of the whole scale.

Modal

rounded-modal36px

Card

rounded-3xl24px

Inner

rounded-2xl16px

The full ladder

Twelve corner radii, from a 1px hairline to a full pill.

rounded-2xs1px

rounded-xs4px

rounded-sm6px

rounded-md8px

rounded-lg10px

rounded-xl12px

rounded-2xl16px

rounded-3xl24px

rounded-4xl32px

rounded-5xl40px

rounded-modal36px

rounded-full9999px

Elevation

Nine steps, from a 1px seam to a floating overlay. Depth reads as distance from the page.

shadow-2xs

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

shadow-3xl

shadow-4xl

Inset

Inner shadows press a surface inward — pressed states, wells, recessed fields.

shadow-inner-2xs

shadow-inner-xs

shadow-inner-sm