Elevation
Spec
Flat, with three levels and one shadow.
Levels
- Page: the surface.
- Raised: panels, rows, inputs and bars, in surface-raised with a 1px border. No shadow.
- Floating: only what sits over the page gets shadow-float: menus, autocomplete, the date menu, the toast, dialogs, coach marks, the tab bar's Add button, the shortcuts button, and pinned bars while pinned.
The one shadow
- shadow-float: 0 4px 16px 0 in shadow-color (slate-900 at 16% light, black at 45% dark), built from Figma's elevation variables. Nothing about it is hand-written.
- Dialogs open in the browser's top layer over surface-scrim (slate-900 at 45% light, black at 55% dark).
Layers, bottom to top
| Layer | Value | What |
|---|---|---|
| --z-raised | 1 | A control above a stretched row button; a sticky footer inside a dialog |
| --z-pinned | 50 | The pinned balances bar |
| --z-floating-button | 60 | The keyboard shortcuts button (wide screens) |
| --z-tab-bar | 65 | The phone tab bar |
| --z-header | 70 | The sticky app header and the phone top bar |
| --z-popup | 80 | Menus, autocomplete lists, the date menu, coach marks |
| --z-toast | 100 | The undo toast |
| --z-skip-link | 110 | "Skip to main content" while focused |
Components never use raw z-index numbers.
Changes
- 1.0.0, Oct 2 2026: Three levels (page, raised, floating), one shadow (shadow-float) from Figma, named layers.