Surfaces
Surfaces and different levels of depth help us create visual hierarchy in our interfaces.
Depth
The different surface levels should be used sparingly to bring clarity. Overusing them might render the interface crowded.
0
At this level, content sits at the same level as its surroundings. The border can be omitted if there is enough contrast.
1
Level 1 slightly differentiates an element from its surroundings.
2
Level 2 provides an intermediate depth for flexibility.
3
Level 3 is used to strongly detach an element from the interface.
Interactive elements
The surface can bump lightly to emphasis an available interaction.
0
Hover me!
Hover me!
1
Hover me!
Hover me!
2
Hover me!
Hover me!
3
Hover me!
Hover me!
Z-index
Z-index determines elements' position in the stacking order. Values can be adapted to fit individual project needs.
| Content | Level |
|---|---|
| Background | -1 |
| Layout | 1 |
| Tooltip | 200 |
| Menu | 300 |
| Popover | 400 |
| Sticky | 500 |
| Modal | 600 |
| Toast | 700 |