Elevations and shadows

Overview

Designers often spend time talking about shadows on a component, but the intent is more than an arbitrary shadow.

Rather than thinking of it as a shadow, think about it as elevation. The key concept to grasp is that all of the pieces inside of the design are objects inside a 3D plane. Some objects are close to the user, offering an affordance that it can be interacted on. Other objects are distanced from the user and appear as static objects.

Usage

Each elevation value has a specific intent in our design language.

• None: Items that are on the page and not intended to be interactive, such as text and other content
• Skim: These items are higher to draw a little more attention to themselves, but not much. They may have some interaction inside of it, but itself is not entirely interactive. A tooltip or page message are examples of this level.
• Lifted: Components that are intended to be engaged themselves, like buttons and cards, are slightly higher to communicate the affordance of interaction.
• Raised: States of change
• Floating: States of change

Appearance and behavior

How it works

An object’s shadow imitates the simplified shadow behavior of the real world. To determine this, the system requires three items – a light source, a plane, and an object. The resulting shadow depends on where the object is, the direction of the light source, and where the object is relative to the plane and the light source.

For simplicity’s sake, we always assume:

• The object is between the plane and light source
• The light source is directed at the plane
• The light source is always a direct value (in other words, moves along the X and Y don’t affect shadow – only Z position). Making these assumptions makes for the system to be simple, easy and consistent, while still providing flexibility.

Making these assumptions makes for the system to be simple, easy and consistent, while still providing flexibility. Below is the description of how the values are calculated.

Z = Elevation value
Shadow X-offset = 0
Shadow Y-offset = Z
Shadow blur = Z * 4
Shadow spread = 0
Shadow color = 20%

Applying elevations in Figma

The shadow values to apply in Figma for each elevation value are as follows: