System
Eleven named layers, ordered by what has to cover what. The registry has no z-index tokens, so this order exists only here. The point of naming them is that z-dropdown above z-header states a relationship, where z-60 above z-50 states a number somebody once picked.
| Token | Value | Use |
|---|---|---|
| raised | 10 | A card or tile lifting under the pointer. The floor of the stack: anything that just needs to beat its own siblings. |
| sticky | 20 | A sticky element inside the page body, such as a table header or the section rail on this page. |
| banner | 25 | A page-level notice sitting above sticky content but below the site chrome. |
| drawer | 30 | The Milo drawer. |
| mobile-menu | 40 | The mobile navigation panel, which must cover the drawer. |
| header | 50 | The site header. Above the page and its own sticky children, below anything it opens. |
| dropdown | 60 | A menu or popover opened FROM the header, so it has to clear it. |
| overlay | 70 | The scrim behind a modal. |
| modal | 80 | The modal itself, one step above its own scrim. |
| toast | 90 | A toast, which must be readable over an open modal. |
| max | 999 | The escape hatch. Nothing in this codebase should reach for it without a reason written at the call site. |