Overview
Elevation adds depth to the interface by simulating how elements stack on top of each other. In MDS, we use shadows to create a sense of layering, making it easier for users to understand how elements relate visually.
Elevation levels
We define elevation in four elevation levels, each mapped to a shadow token:
|
Level |
Token |
Description |
|---|---|---|
|
Flat |
shadow.0 |
No visible elevation. Used when no separation is needed, such as for ghost buttons. Commonly paired with background.static.flat. |
|
Raised |
shadow.100 |
Soft resting elevation for components like nested cards or panels. Helps distinguish a surface from its parent without adding strong depth. Paired with background.static.raised. |
|
Floating |
shadow.200 |
Medium elevation for floating components within the interface, such as dropdowns, tooltips, notifications, or popovers. Also used during drag interactions for elements elevated with shadow.100. |
|
Modal |
shadow.300 |
High elevation for top-layer containers like dialogs that appear above an overlay. Paired with background.static.floating. |
Tokens