In a design system, elevation is how far a surface appears raised above the ones behind it, shown mainly with shadows so the interface reads as stacked layers. A higher elevation makes an element look closer to the user.
Synonyms
- z-depth
- depth
Related terms
- drop shadow
- z-index
- material design
- neumorphism
In plain words
- how 'lifted' a card or menu looks above the page
- the levels of shadow that make things float
Usage example
A dropdown sits at a higher elevation than the page, so its shadow makes it look like it's floating above the content.
Don't confuse with…
- drop shadowA drop shadow is the visual effect itself; elevation is the system that decides which surfaces get which shadow to signal how high they sit.
Categories
- Design systems