Visual
Elevation
Elevation is the distance between any two elements along the z-axis.
Overview
Reserved level
Different dimensional plane
Elevation Level high
<Box boxShadow='high' />X: 0, Y: 16 | Blur: 32
Elevation level medium
<Box boxShadow='medium' />X: 0, Y: 8 | Blur: 16
Elevation level low
<Box boxShadow='low' />X: 0, Y: 2 | Blur: 4
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--400CSS
--elevation-level--400JavaScript
ELEVATION_LEVEL_400Value
0px 16px 32pxComponent
<Box boxShadow='high' />Elevation 300
Elevation 300 is often used for small to medium interactive interface elements.
Examples include , , or an expressive style.
Sass
$Elevation-level--300CSS
--elevation-level--300JavaScript
ELEVATION_LEVEL_300Value
0px 8px 16pxComponent
<Box boxShadow='medium' />Elevation 100
Reserved for functional hover interactions and focus states.
Sass
$Elevation-level--100CSS
--elevation-level--100JavaScript
ELEVATION_LEVEL_100Value
0px 2px 4pxComponent
<Box boxShadow='low' />Base
The lowest level, visible container.
Background
The app's background color.