Elevation

Elevation is the optical distance between elements from the background, along the z-axis.

 

---

How elevation works

Elevation is applied to components, states or other individual elements on a page to create contrast and visual hierarchy.

Every elevation level is linked to specific shadow properties, meant to simulate an optical distance from the background (or from other components) on the z-axis of the page. That way, an element or component can present itself to be more in the foreground or further in the background. It creates a layered effect in a three-dimensional space, as the image above demonstrates.

 

---

When to apply elevation

We always apply one of our elevation levels to our components. Based on the following questions, we can decide what level to apply:

• Should the surface of the component or individual elements be contrasted with its surroundings?
• Should it trigger some kind of interaction? This does not necessarily mean it should have elevation, but elevation can help to make a certain action that can be performed extra clear.
• What would be the visual hierarchy on the z-axis? In other words: how much it should be in the foreground, in relation to the background and (other) elevated elements? To know this, we’re keeping track of all components and elevation levels.

 

---

Elevation levels

Our elevation levels go from 0 (flat) to 4, with the shadow properties as displayed below. Every component has an elevation, which is listed in the next section. The more you move to a higher level the larger and softer the shadows are, expressing more distance on the z-axis in relation to other elements.

For KLM, elements are often placed on a white background. This means that we need shadow properties that still clearly outline the element, also when the element itself is white.

Levels 2 and 3 also have a ‘b’ variant which reverses the position on the y-axis. These are applied to components that are aligned to the bottom of the viewport. These components are high in visual hierarchy and need a reversed y-value to separate them from other elements on the page. This doesn’t match real-life logic but serves a functional purpose.

 

 

---

Component elevation

 

 

How to apply

You can find me in Figma, under the “Effects” panel.