Elevation

Overview / Hero - KL

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.

 

Level 0 KL
Level 1 KL
Level 2 KL
Level 2b KL
Level 3 KL
Level 3b KL
Level 4 KL

 


Component elevation

 

0

Badge
Button
Checkbox
Expansion Panel (list form)
Filter Chips
Footer
Input fields
Loader
Pagination
Progress Bar
Label
Link
List item
Notification
Radio
Status Label
Tabs
Toggle

1

Content Card
Destination Card
Expansion Panel (elevated form) Image Card
Next Best Action

2

Banner
Content Card (hover)
Destination Card (hover)
Slider handle
Tooltip

2B

Bottom sheet

3

Calendar
Dropdown/ Select menu
Header/ Subheader

Toast

3B

Bottom navigation

4

Modal/ Dialog

 

How to apply

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

Find me in Figma KL