The Shadow system defines a controlled set of elevation and inset effects used to communicate depth, separation, and interaction states across the interface.
Shadows should be used intentionally. They are not decoration; they help users understand the relationship between surfaces and which elements are raised, floating, or pressed into a surface.
The system uses black as the foundational shadow color with controlled opacity rather than a separate grayscale palette.
The system uses five outer-shadow levels and one inset shadow:
Token X Y Blur Spread Color Opacity Primary purpose
shadow-xs 0 1 2 0 Black 10% Very subtle
separation
shadow-sm 0 2 4 -1 Black 8% Raised surfaces
and cards
shadow-md 0 4 8 -2 Black 10% Floating
controls and
menus
shadow-lg 0 8 16 -4 Black 12% Popovers and
elevated
overlays
shadow-xl 0 16 24 -6 Black 14% Dialogs and
high-elevation
overlays
shadow-inner 0 2 10 0 Black 15% Pressed /recessed states
Source of truth: current shadow variables exported from the design system (
Mode 1.tokens.json).
Every shadow is made from five properties: