Elevation

Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs.

Why do we use elevation?

We use elevation to create create a visual distinction between components and visual elements with different spatial relationships.

Each elevation level assigns a three-dimensional appearance to an object, using shadows and blurs to achieve it. The levels of elevation we have created help us differentiate the elevation within the Z-axis at which these components are placed.

Visual representation of squares.

Using elevations in your products

Here are some tips to keep in mind when using our elevation tokens:

Use elevation to help distinguish overlapping elements

For components which appear on top of other elements of the design, try using elevation to make them more visible.

Visual representation of the difference in hierarchy achieved by using $elevation-04 and $elevation-01.
Visual representation of the difference in hierarchy achieved by using $elevation-04 and $elevation-01.

Don’t overdo it

Using elevation consistently but sparingly will help your users understand the hierarchy and interaction patterns for the design elements in your product. Using too many elevation tokens in your designs will only empoverish the user’s experience.

Visual representation of an Icon Button floating over a carousel of cards.
Visual representation of an Icon Button floating over a carousel of cards.