Skip to content

Design system

Documentation

DesignFoundations / Elevation

Foundations / Elevation

Stable

Elevation

Elevation is a small number of surface relationships, not a collection of decorative shadows.

On this page

Surface stack

Use the lowest level that communicates the relationship. A card should not look like a modal, and a popover must clear the content it temporarily covers.

Level 1 · Resting surface

Cards and contained previews.

Level 2 · Raised surface

Sticky controls and active panels.

Level 3 · Overlay

Temporary surfaces that need separation from the page.

Tokens

TokenUse forConstraint
--elevation-noneFlat content and dividers.Default when a border already establishes ownership.
--elevation-smResting cards.Should remain subtle on both theme canvases.
--elevation-mdRaised panels and sticky controls.Do not stack several mid-level shadows.
--elevation-lgDialogs, drawers, and full-width floating surfaces.Pair with a clear focus and dismiss behavior.
--elevation-popoverMenus and short-lived portals.Use above nearby content; never rely on shadow alone for meaning.

Portals and layers

  • Portaled content such as DropdownMenu belongs above the local stacking context and must keep keyboard focus inside its own interaction.
  • Reserve the shared high layer for overlays; do not raise ordinary cards until they compete with navigation.
  • When a shadow is not enough to distinguish a surface, add a border or backdrop rather than a darker shadow.