Elevation
Depth by tone first, a 1 px border second, a shadow last.
Tone first, border second, shadow last (DECISIONS.md #17). Regions separate by stepping the surface tone: the canvas, then layer-1 for the TopBar, SideNav, PageHeader and cards, then layer-2 and layer-3 for regions nested inside them. A 1 px line marks the edge where two tones are close. A shadow is reserved for UI that floats above the page.
Four elevation tokens name those shadows (flat, raised, floating, overlay): a card on the canvas may be raised, a dropdown is floating, a dialog is overlay. Radii stay at 8 px or less: shape.control (4 px) for buttons and inputs, shape.container (6 px) for cards, shape.overlay (8 px) for menus and dialogs, shape.pill for badges.
In practice
Tone
A layer-1 card on the canvas. The step in tone already separates it.
Footer on layer-2
Border
The 1 px line keeps the edge crisp where tones are close, as in dark mode.
Shadow, last
raised: only for a card that floats over the canvas.
Rules
- Do not use elevation to signal importance; use position and heading level.
- Do not nest cards. Nest a layer-2 region inside the card instead.
- Shadows are defined once per elevation; components never compose their own.