Elevation

Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs.

Alias tokens by theme

Surface separation is achieved using elevation tokens. Each token has a different depth, determining where they can be used.

Light theme

Dark theme

Example Description Token name

Elevation below 10 Used for slightly raised element such as cards and popovers. Global token used: $box-shadow-a
$elevation-below-10
Elevation below 20 Used for floating buttons, modals and toasts. Global token used: $box-shadow-b
$elevation-below-20
Elevation above 20 Used for bottom sheets and bottom menus. Global token used: $box-shadow-c
$elevation-above-20
Elevation 01Deprecated Used for map markers. Global token used: $box-shadow-01
$elevation-01
Elevation 02Deprecated Used for raised buttons (e.g. over a map), knobs on sliders and dropdown input fields. Global token used: $box-shadow-02
$elevation-02
Elevation 03Deprecated Used for FABs and sticky CTAs, sticky headers, navigation bars or banners and notifications. Global token used: $box-shadow-03
$elevation-03
Elevation 04Deprecated Used for modals. Global token used: $box-shadow-04
$elevation-04
Elevation 05Deprecated Used for bottom sheets and bottom menus. Global token used: $box-shadow-05
$elevation-05
Elevation cardDeprecated Used for cards. Global token used: $box-shadow-11
$elevation-card

Example Description Token name

Elevation inverse below 10 Used for slightly raised element such as cards and popovers. Global token used: $box-shadow-d
$elevation-inverse-below-10
Elevation inverse below 20 Used for floating buttons, modals and toasts. Global token used: $box-shadow-e
$elevation-inverse-below-20
Elevation inverse above 20 Used for bottom sheets and bottom menus. Global token used: $box-shadow-f
$elevation-inverse-above-20
Elevation inverse 01Deprecated Used for map markers and cards. Global token used: $box-shadow-06
$elevation-inverse-01
Elevation inverse 02Deprecated Used for raised buttons (e.g. over a map), knobs on sliders and dropdown input fields. Global token used: $box-shadow-07
$elevation-inverse-02
Elevation inverse 03Deprecated Used for FABs and sticky CTAs, sticky headers, navigation bars or banners and notifications. Global token used: $box-shadow-08
$elevation-inverse-03
Elevation inverse 04Deprecated Used for modals. Global token used: $box-shadow-09
$elevation-inverse-04
Elevation inverse 05Deprecated Used for bottom sheets and bottom menus. Global token used: $box-shadow-10
$elevation-inverse-05
Elevation inverse cardDeprecated Used for cards. Global token used: $box-shadow-12
$elevation-inverse-card

Example Description Token name

Elevation inverse below 10 Used for slightly raised element such as cards and popovers. Global token used: $box-shadow-d
$elevation-below-10
Elevation below 20 Used for floating buttons, modals and toasts. Global token used: $box-shadow-e
$elevation-below-20
Elevation above 20 Used for bottom sheets and bottom menus. Global token used: $box-shadow-f
$elevation-above-20
Elevation 01Deprecated Used for map markers. Global token used: $box-shadow-06
$elevation-01
Elevation 02Deprecated Used for raised buttons (e.g. over a map), knobs on sliders and dropdown input fields. Global token used: $box-shadow-07
$elevation-02
Elevation 03Deprecated Used for FABS and sticky CTAs, sticky headers, navigation bars or Banners and Notifications. Global token used: $box-shadow-08
$elevation-03
Elevation 04Deprecated Used for modals. Global token used: $box-shadow-09
$elevation-04
Elevation 05Deprecated Used for bottom sheets and bottom menus. Global token used: $box-shadow-10
$elevation-05
Elevation cardDeprecated Used for cards. Global token used: $box-shadow-12
$elevation-card

Example Description Token name

Elevation inverse below 10 Used for slightly raised element such as cards and popovers. Global token used: $box-shadow-a
$elevation-inverse-below-10
Elevation inverse below 20 Used for floating buttons, modals and toasts. Global token used: $box-shadow-b
$elevation-inverse-below-20
Elevation inverse above 20 Used for bottom sheets and bottom menus. Global token used: $box-shadow-c
$elevation-inverse-above-20
Elevation inverse 01Deprecated Used for Modal. Global token used: $box-shadow-01
$elevation-inverse-01
Elevation inverse 02Deprecated Used for FABS and sticky CTAs, sticky headers, navigation bars or Banners and Notifications. Global token used: $box-shadow-02
$elevation-inverse-02
Elevation inverse 03Deprecated Used for raised buttons (e.g. over a map), knobs on sliders and dropdown input fields. Global token used: $box-shadow-03
$elevation-inverse-03
Elevation inverse 04Deprecated Used for map markers and cards. Global token used: $box-shadow-04
$elevation-inverse-04
Elevation inverse 05Deprecated Used for bottom sheets and bottom menus. Global token used: $box-shadow-05
$elevation-inverse-05
Elevation inverse cardDeprecated Used for cards. Global token used: $box-shadow-11
$elevation-inverse-card