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 menus, DropdownMenu, 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.