This principle relates to the distance of a component from the user. As a result, this affects hierarchy, colours and shadows on the interface.


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.

Stack Order

Stack Order

Elements and their relevant layer order

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.



Example of a nested card and a card displayed on a background

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.