Visual

Elevation

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

Overview

Reserved level
Different dimensional plane
Elevation Level 400<Box boxShadow={400} />
X: 0, Y: 16 | Blur: 32 | RGBA: 39, 51, 51, .24
Elevation level 300<Box boxShadow={300} />
X: 0, Y: 8 | Blur: 16 | RGBA: 39, 51, 51, .24
Elevation level 200<Box boxShadow={200} />
X: 0, Y: 4 | Blur: 8 | RGBA: 39, 51, 51, .24
Elevation level 100<Box boxShadow={100} />
X: 0, Y: 2 | Blur: 4 | RGBA: 39, 51, 51, .24
Base Containers
Border:
Background
Background:

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

Elevation 400 is used for medium to large interface elements that are intended to temporarily interrupt a users workflow or draw their attention.

Think toasts, , , layers, or tours.

Sass
$Elevation-level--400
CSS
--elevation-level--400
JavaScript
ELEVATION_LEVEL_400
Value
0px 16px 32px rgba(39,51,51,.24)
Component
<Box boxShadow={400} />

Elevation 300

Elevation 300 is often used for small to medium interactive interface elements.

Examples include , , or an expressive style.

Sass
$Elevation-level--300
CSS
--elevation-level--300
JavaScript
ELEVATION_LEVEL_300
Value
0px 8px 16px rgba(39,51,51,.24)
Component
<Box boxShadow={300} />

Elevation 100

Reserved for functional hover interactions and focus states.

Sass
$Elevation-level--100
CSS
--elevation-level--100
JavaScript
ELEVATION_LEVEL_100
Value
0px 2px 4px rgba(39,51,51,.24)
Component
<Box boxShadow={100} />

Base

The lowest level, visible container.

Background

The app’s background color.

Relative Positioning

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