Elevation
Things that float cast shadows; things that sit do not. Cards and panels are flat plates with a hairline edge. Only popovers, menus, dialogs, drawers and toasts get elevation, and dark mode uses darker, tighter shadows so edges stay visible.
Levels
elevation3 tokensShadows that lift surfaces. raised for cards, overlay for menus and dialogs. Stronger in dark mode so edges stay visible.
Flatno shadow
Raisedelevation.raised
Modalelevation.modal
Flatno shadow
Raisedelevation.raised
Modalelevation.modal
- Interactive cards on hover, sticky headers.shadow 1 · dark-1
5 components
Components
- Popovers, menus, listboxes, tooltips.shadow 2 · dark-2
- Dialogs, drawers, toasts.shadow 3 · dark-3
Shadow primitives
shadow6 tokensThe raw two-layer shadows. The dark variants exist because a light shadow disappears on a dark surface.
5 components
Components
5 components
Components