Elevation
Elevation is a visual layering system that uses surface color and shadow to communicate depth. Four levels plus
overflow are defined in the token system.
Levels
Sunken — lowest level; backdrop or well for grouped content (e.g. kanban columns).
Default — baseline flat surface; workspace background, title bar.
Raised — cards and movable panels; subtle lift above default.
Overlay — modals, dialogs, dropdowns, floating toolbars.
Overflow — scroll shadow indicating content extends beyond the viewport.
Surface mapping
| UI element |
Elevation level |
| Workspace / title bar |
0 |
| Panel sub-headers, separator bars |
1 |
| Panel, ribbon, document background |
2 |
| Dialogs |
3 |