Depth and motion
How far a surface sits from the page, what covers what, and how things move.
Elevation
Five depths, each a shadow with a hairline edge. Cards and panels stay flat: they use a border and a raised surface instead.
attachedTooltips: touching the control they describe.overlayMenus, listboxes, context cards and toasts.overlay-stackedThe command palette, and a row being dragged.modalDialogs.floatingThe composer, floating in the page.Layers
What covers what. The order matches the shadows: the further a surface floats, the higher it stacks.
Why
A tooltip outranks the modal because a tooltip on a dialog control has to clear the dialog; it never traps focus, so nothing hides behind it. Toasts outrank everything so a save that fails while a dialog is open is still readable.
| Token | Covers | z-index |
|---|---|---|
| --z-sticky | Sticky headers and the docked rail. | |
| --z-scrim | The dimmer behind a dialog. | |
| --z-drawer | Drawers, sheets and side panels. | |
| --z-menu | Menus, popovers and listboxes. | |
| --z-modal | Dialogs and the command palette. | |
| --z-tooltip | Tooltips, above menus and dialogs. | |
| --z-toast | Toasts, above everything. | |
Motion
Fast for presses, default for hovers and most changes, slow for overlays and dialogs, springs for arrivals such as a toast. Press Play to compare them.
Why
Springs are sampled into CSS linear(), so they feel physical without JavaScript. Never pair a --spring-* curve with a --duration-* value; each spring has its own duration. With reduced motion on, every duration resolves to 0ms.
--duration-fast --duration --duration-slow --spring-snap-duration --spring-smooth-duration --spring-bounce-duration