Overview
Elevation can mean many things across design and development, but to keep it simple, the higher the level, the closer an element is to the screen.
The base surface, level 0, is the main content area. Other components sit on top of this to build up a user interface (UI). Some components must appear above others, either due to their functionality or level of importance.
An elevation order ensures the components appear at the correct level, without any conflicts.
Shadow, layers and levels
The elevation order categorises components into levels.
Within each level, there are layers to show depth in the interface. Cards are the most common example.
A nested card appears on Level 0, but could have a tooltip that displays above it. Shadows are used to illustrate layers of components.
Example
In the first example below, card A has no shadow, but tooltip B has a shadow applied.
In the example of card C, which sits on an alternate background, a shadow indicates that this is a layer above. In this instance, tooltip D uses a deeper shadow to show a greater degree of depth.
No strict formula exists for shadows, but think of layers stacked on top of each other as having different depths.
By using levels and the correct design tokens for components and layers, squads can consistently create the correct elevation order.
Elevation Tokens