Colour carries depth; shadows are the exception

Standard containers never carry a shadow. Depth comes from stepping through the container colour ramp, which keeps surfaces flat, crisp, and legible against the page floor. Only surfaces that genuinely float above the page (anchored overlays and modals) earn a shadow, and there are exactly two tokens for that. Never write a literal box-shadow value in component CSS.

Shadow tokens

Both tokens are defined per theme, with stronger opacity in dark mode so they still read against the #050505 floor.

Floating--shadow-floating
Light
0 4px 16px rgba(0, 0, 0, 0.12)
Dark
0 4px 16px rgba(0, 0, 0, 0.55)
Used by
Popover, Dropdown and DropdownMenu, Combobox, ContextMenu, ColorPicker, chart tooltips, Toast
Modal--shadow-modal
Light
0 8px 32px rgba(0, 0, 0, 0.2)
Dark
0 8px 32px rgba(0, 0, 0, 0.6)
Used by
Dialog and AlertDialog panels, Drawer, CommandPalette, paired with the --color-scrim backdrop

Depth without shadows

Everything below the floating layer expresses hierarchy through background steps. A nested surface reads as deeper because it is a shade further along the ramp, not because it is lifted.

Page floor--color-bg-page-primary
Body background, app root
Container primary--color-bg-container-primary
Sidebars, card fills, section bands
Container secondary--color-bg-container-secondary
Nested cards, inner panels
Container tertiary--color-bg-container-tertiary
Pressed and active states, deepest UI surfaces

The one exception

Interactive Card and EntityCard navigation tiles lift on hover. That shadow is a deliberate navigational affordance, a signal that the whole tile is clickable, not an elevation pattern to copy onto static containers.