Last updated: October 2020

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.

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.