Elevation
Elevation and Surfaces are an important aspect of our UI, allowing users to understand the hierarchical relationship between different elements on screen. In our products, the illusion of elevation is something that works best when it goes unnoticed, and our guidelines aim to accomplish just that, with sparing use of drop shadows that are meant only to complement interactions.
Elevation layers
Our products are constructed using a number of different planes, or layers, in which content lies. The following layers can generally describe the majority of layers found on our products:
Background layer
All of our products have an underlying full fill background layer, upon which all content will sit.
Scroll layer
The scroll layer contains most of the interactive or informational content on our products. It is meant to scroll if the amount of content displayed on any particular screen requires it. This layer can be perceived as sitting right on top of the background layer.
Fixed layer
All elements that are fixed (don’t scroll) lie on a layer above the Scroll layer, giving them significant elevation.
Modal layer
The modal layer sits on top of any other element on the screen. It may block interactions with the elements underneath, represented by a dimming effect above those elements. Modals also often reset the elevation layers, having background, scroll, fixed and modal layers of their own.
The following are representations of some of the elevation layers within our products:
Elevation styles
Different layers have different levers of elevation, supported by different drop shadow styles.
| Elevation Style | Level | Layers | Style |
|---|---|---|---|
| No elevation | 0 | Background & Scroll | No drop shadow |
elevation-low |
1 | Scroll | Drop shadow: 0x 1y 4b 25% #0000 |
elevation-mid |
2 | Fixed | Drop shadow: 0x 1y 8b 25% #0000 |
elevation-high |
3 | Modal | Drop shadow: 0x 1y 16b 25% #0000 |
No elevation - Background and scroll Layer
The starting background color of all our products is screen-background. The Scroll layer that sits on top of it may contain different components or varied surfaces, which can be imagined as being right on top of the background, with no elevation. For this reason components within this layer do not drop a shadow.
Low elevation - Scroll layer
While UI elements inside the Scroll layer aren’t meant to drop shadows, there might be punctual situations where highlighting a UI element is necessary. For this situations the lowest elevation style elevation-low can be used.
Middle elevation - Fixed layer
All headers, tab bars or any other components which do not scroll, will rest on an elevated layer, represented by the elevation-mid drop-shadow style. They should drop a shadow in most situations, serving as affordance for scrolling behaviour.
There may be components which initially scroll with the scroll layer until they reach a position in which they stay fixed. These can still be considered part of the fixed layer, since eventually the scroll layer will continue to move underneath them, and should also have elevation-mid style applied to them.
High elevation - Modal layer
Present on modals, sheets and popouts, using the most diffused elevation-high style. Even though these components may have a background and scrolling layers within them,the bottom layer of the component should still have the elevation-high set on it.
The drop shadows used in the elevation styles use a principle of overhead global lighting. This means the light source is placed facing the screen, slightly skewed from the top, and distanced enough to cast a uniform shadow. The farther the layer is placed against the background the more diffuse the shadow gets, giving the perception of higher elevation.