Elevation

Elevation defines the perceived depth of elements through shadows and layering to help our customers understand visual hierarchy and focus.

With these Elevation tokens elements and components can be lifted up from the background to create depth. From far (0) to close (4).

0 8px 8px -8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.08)

0 16px 16px -16px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08)

0 16px 32px -8px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08)

0 24px 32px -8px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08)

For the levels 2 and 3 we have an Up variant when parts ar placed at the bottom of our designs. Think of use cases like a Bottomsheet.

0 -16px 16px -16px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08)

02b

0 -16px 32px -8px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08)

03b