Five levels of depth, each with a fixed shadow recipe and a clear job. Elevation communicates what floats above what — it is never decoration.
Shadow scale
Flat
--shadow-noneLow--shadow-smMid--shadow-mdHigh--shadow-lgOverlay--shadow-xlShown on a light background — shadows are visible against white.
Shadow signals hierarchy
Higher elevation = more visual weight = content that demands attention. Every level is intentional — don't use Overlay for a tooltip.
Flat uses border, not faint shadow
Flat surfaces are separated by a 1px border token, not a subtle shadow. Faint shadows are hard to control across light and dark modes.
Dark mode lifts the surface
In dark mode, elevation is often communicated by lightening the surface color — not deepening the shadow. Tokens handle this automatically.
Flat
Elevation.0No shadow. Distinguish with a 1px border instead.Default cardsList itemsTable rowsInput fieldsLow
Elevation.1Subtle lift. Interactive or slightly raised surfaces without strong hierarchy.Hover state cardsSticky table headersInline action menusMid
Elevation.2Moderate depth. Standard elevation for floating elements and focused surfaces.Dropdown menusPopoversFocused cardsTooltipsHigh
Elevation.3Strong depth. Content sits significantly above the base surface.ModalsDialogsSide drawersCommand palettesOverlay
Elevation.4Maximum elevation. Reserved for full-screen overlays and blocking surfaces.Full-screen modalsBottom sheetsContext menus with backdrops