Core

Elevation

Elevation is the distance between any two elements along the z-axis.

ExampleCopy URL

Reserved Level
Different dimensional plane
Elevation Level 400
X: 0, Y: 16 | Blur: 32 | RGBA: 39, 51, 51, .24
Elevation Level 300
X: 0, Y: 8 | Blur: 16 | RGBA: 39, 51, 51, .24
Elevation Level 200
X: 0, Y: 4 | Blur: 8 | RGBA: 39, 51, 51, .24
Elevation Level 100
X: 0, Y: 2 | Blur: 4 | RGBA: 39, 51, 51, .24
Base Containers
Border: Neutral 200
Background
Background: Neutral 100

GuidelinesCopy URL

Reserved Level
Used for primary, global elements (main/left navs) that need to exist on an independent plane and should rarely if ever be obstructed by other elements.

Elevation 400
Should be primarily used on temporary elements that are intended to interrupt a users workflow or draw their attention. Think alerts, modals, takeovers, tours, etc.

Elevation 300
Should be used for built in tools and recurring UI that is often intentionally accessed and hidden by the user. Think compose, global drawer, help drawer.

Elevation 200
Used for elements that expose additional information to users accessed either intentionally or as a result of another action. Think layer, menu, tooltip.

Elevation 100
Reserved for optional hover interactions and focus states.

Base
The lowest level, visible container.

.base {
background: $Color-neutral--0;
border: 1px solid $Color-neutral--200;
}

Background
The app’s background color.

background: $Color-neutral--100;

Relative PositioningCopy URL

When an element is elevated relative to another it retains it’s default elevation value regardless of it’s parent’s value.

Relative elevation stacking

TokensCopy URL

Token NameValue
$Elevation-level--100
0px 2px 4px rgba(39,51,51,.24)
$Elevation-level--200
0px 4px 8px rgba(39,51,51,.24)
$Elevation-level--300
0px 8px 16px rgba(39,51,51,.24)
$Elevation-level--400
0px 16px 32px rgba(30,51,51,.24)

Using Elevation in codeCopy URL

Design token documentation