Elevation
Three shadow slots for physical depth, and a fixed layer order for stacking. Higher z never implies a bigger shadow — they are separate decisions. The monochrome base is flat: every tier resolves to none — a grey drop shadow under a tinted surface (a status toast) reads as dirt, so depth in the base comes from surface tones, hairline borders, and the overlay scrim. Every floating component still consumes its tier, so a brand opts into shadows by filling these three tokens alone — no component CSS changes.
Shadow slots
| Example | Token | Usage |
| shadow.low | Resting lift: cards, rows |
| shadow.medium | Floating layers: menus, popovers, toasts |
| shadow.high | The modal layer: dialogs, drawers |
Layer order
| Token | Value | Usage |
z.base | | In-flow content |
z.popover | | Anchored surfaces: menus, select listboxes, popovers |
z.sticky | | Sticky bars, pinned table headers |
z.overlay | | Scrims behind modals and drawers |
z.modal | | Dialogs, drawers |
z.tooltip | | Tooltips — above modals |
z.toast | | Toasts — above everything |