Token reference
Z-index
Named stacking layers for predictable overlap and focus visibility.
Overview
Named stacking layers for predictable overlap and focus visibility. Values come from canonical DTCG JSON or are derived from governed responsive and preference contracts. Published names are versioned APIs. This page is a governed extension to the audited reference information architecture.
Token Reference
| Token path | Set | Type | Canonical value | CSS custom property |
|---|---|---|---|---|
zIndex.base | global | number | 0 | --he-z-index-base |
zIndex.raised | global | number | 10 | --he-z-index-raised |
zIndex.sticky | global | number | 20 | --he-z-index-sticky |
zIndex.overlay | global | number | 40 | --he-z-index-overlay |
zIndex.modal | global | number | 60 | --he-z-index-modal |
zIndex.toast | global | number | 80 | --he-z-index-toast |
zIndex.critical | global | number | 100 | --he-z-index-critical |
Usage
- Consume semantic or component aliases in application code.
- Use global values only to author or review foundation aliases.
- Keep responsive and preference behavior aligned across Web and Flutter.
- Do not edit generated outputs or introduce an unregistered literal.
Accessibility
Changes require cross-theme contrast, text-scaling, reflow, forced-colors, reduced-motion, and input-modality review where applicable. A token cannot make essential meaning depend on color, opacity, motion, elevation, or viewport size alone.
Web and Flutter API
/* Web */
color: var(--he-z-index-base);
// Flutter
final value = HeTokens.zIndexBase;The example uses an exact generated name. The table is the complete Web reference; global and semantic Flutter constants are generated in he_tokens.g.dart, while component contracts own component-level values.