Elevation
Depth by tone first, a 1 px border second, a shadow last.
Stacking order is a named scale, never a raw number. The TopBar and the PageHeader tab row share z-sticky; everything that floats sits above them, so a menu opened from a sticky row is never clipped.
| Token | Value | Utility | Use for |
|---|---|---|---|
| z.base | 0 | z-base | Page content. |
| z.raised | 10 | z-raised | An element lifted inside its section, such as a dragged row. |
| z.sticky | 100 | z-sticky | TopBar, the PageHeader tab row, sticky table headers. |
| z.dropdown | 1000 | z-dropdown | Select lists and menus. |
| z.overlay | 1100 | z-overlay | The scrim behind a dialog. |
| z.modal | 1200 | z-modal | Dialogs and sheets. |
| z.popover | 1300 | z-popover | Popovers opened from inside a dialog. |
| z.toast | 1400 | z-toast | Toasts and the focused skip link. |
| z.tooltip | 1500 | z-tooltip | Tooltips, above everything. |