Elevation

Principles

Elevations or shadows are used to create a depth effect in order to make certain blocks or components more visible. We have 2 types of elevations for 2 differents uses cases.

 

Soft shadow

Soft shadows are used to elevate a block of content and add some contrast, such as multiple blocks in a row.

Strong shadow

Strong shadow can be used for a single block that needs to be highlighted, such as a pop-up or the left menu.

 

Elevations in dark mode

To create a depth effect in dark mode, we rely on the border or the contrast between the differents layers. We don't use any kind of shadow in dark mode.