Shadows

A five-step elevation scale. Each step expresses a different layer of hierarchy so a reader can tell at a glance how far a surface sits from the page.

shadow-xs

--shadow-xs

Hairline lift (inputs, toggles)

shadow-sm

--shadow-sm

Cards at rest

shadow-md

--shadow-md

Popovers, dropdowns

shadow-lg

--shadow-lg

Modals, command palettes

shadow-xl

--shadow-xl

Heavy overlays, onboarding