Levels
Elevation can mean many things across design and development, but to keep it in simple, generic terms: the higher the level, the closer it is to the screen.
Our base level, level 0, is the main content area. On top of this, other components can be placed to show their levels. You can see where various components sit at different levels.
Shadow, layers and levels
Levels are used to separate key components based on their usage (you would always want components in the overlays to be above everything else).
Within each level, there are a degree of layers to show depth in the interface. Cards is the most common example.
A nested card will be on Level 0 but could have a tooltip component that displays above it. We use a shadow to show there is a layer above this.
In the first example below, card A has no shadow but tooltip B has a 'Shadow 10' applied.
If we took the example of card C that sits on a background, 'Shadow 10' is applied to show this is a layer above. In this instance, tooltip D uses 'Shadow 20' to show a greater degree of depth.
There is no strict formula to the shadows but the best mental modal is to think that layers stacked on top of each other should have a greater depth.
By using levels and layers together, we can work with a more manageable set of shadow styles.