Shadows

The elevation scale of record is Tailwind's shadow scale, used as-is — seven steps from a hairline lift to a full takeover. Elevation is chosen by meaning, not by taste: the higher a surface floats above the page, the higher its step.

shadow-2xs--shadow-2xs

The faintest lift — pressed/flat controls that still need separation from their surface.

shadow-xs--shadow-xs

Resting controls and inputs — the default shadcn control elevation.

shadow-sm--shadow-sm

Cards at rest — grouped content sitting just above the page.

shadow-md--shadow-md

Raised interactive surfaces — dropdown menus, popovers, hover-lifted cards.

shadow-lg--shadow-lg

Floating surfaces — the assistant's panel, sheets, toasts.

shadow-xl--shadow-xl

Prominent overlays — large dialogs, the spotlight shell.

shadow-2xl--shadow-2xl

The heaviest elevation — full-screen takeover surfaces. Rare by design.

A shadow is a step, never a literal. Components use the utilities (`shadow-sm`, `shadow-lg`); a hand-written box-shadow has no place in the Figma sync and no meaning on the elevation ladder.

Shadows are deliberately not a Foundation config — a product's elevation language comes from which steps its surfaces use, and those choices live with the components that make them.