Foundations

Elevation

Shadow expresses layering — what's resting on the canvas versus what's floating above it. Higher elevation always implies temporary, dismissible content.

Shadow scale

shadow-100
shadow-200
shadow-300
shadow-400
TokenUsed for
shadow-100Resting cards, input focus rings' companion depth
shadow-200Hovered cards, dropdown menus
shadow-300Popovers, toasts
shadow-400Modals, dialogs — the highest layer in the UI

Usage

Modal content
Reserve shadow-400 for the single topmost overlay
Static page card
Don't apply high elevation to static, in-page content