Shadows bring depth to the interface and bring the user's attention to some specific areas. Use them wisely and sparingly.

Elevations will be updated soon.

The shadows listed here are inherited from Fluid 2 legacy. For release updates and early access follow us on the team channel


Elevation 2-dp

Elevation 4-dp

Elevation 6-dp

Elevation 8-dp

Elevation 16-dp

Elevation 24-dp


Shadow can be used in design to add depth and dimension to elements on a page. It can help to create a visual hierarchy and draw the user’s attention to specific parts of the design. Shadow can also be used to give the appearance of floating elements, or to create a sense of movement or interaction.


Please refer to the elevations design tokens.