Skip to main content

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.

Default elevation

Example Description Token name
  • Elevation 01 Used for map markers. Global token used: $box-shadow-01
    $elevation-01
  • Elevation 02 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 03 Used for FABs and sticky CTAs, sticky headers, navigation bars or banners and notifications. Global token used: $box-shadow-03
    $elevation-03
  • Elevation 04 Used for modals. Global token used: $box-shadow-04
    $elevation-04
  • Elevation 05 Used for bottom sheets and bottom menus. Global token used: $box-shadow-05
    $elevation-05
  • Elevation card Used for cards. Global token used: $box-shadow-11
    $elevation-card

Inverse elevation

Example Description Token name
  • Elevation inverse 01 Used for map markers and cards. Global token used: $box-shadow-06
    $elevation-inverse-01
  • Elevation inverse 02 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 03 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 04 Used for modals. Global token used: $box-shadow-09
    $elevation-inverse-04
  • Elevation inverse 05 Used for bottom sheets and bottom menus. Global token used: $box-shadow-10
    $elevation-inverse-05
  • Elevation inverse card Used for cards. Global token used: $box-shadow-12
    $elevation-inverse-card