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, modals, and the floating App sidebar) earn a shadow, and the elevation tokens below are the only ones that exist for it. 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, chat surfaces, the floating App sidebar, the command palette
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, paired with the --color-scrim backdrop

Depth without shadows

Everything below the floating layer expresses hierarchy through background steps. Each level takes its own step on the neutral ramp, so a boundary reads from the contrast between adjacent surfaces, not from a lift. In light the containers are the bright side of that contrast, white against a soft grey floor; in dark they step up from a near-black one.

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.