Shadows

Use of shadows in design

Shadows should be used consciously and consistently, as they communicate that an element is positioned above something else in the interface.

Shadows can assist users with visual impairments in identifying components. The combination of shadows and outlines makes it easier to locate elements when scanning a page.
(Research: Material Design)

Shadow strengths

We provide different shadow strengths, ranging from xs to xl. These levels indicate the perceived height of a surface. Elements that appear higher should use larger shadows, while lower surfaces should use smaller shadows. Shadows help create a visual hierarchy, making it easier to see which elements are layered above or below others.

Tokens

Make sure you have light mode activated to see the shadows. Shadows are not intended for use in dark mode, as they are based on darker color tones. To create hierarchy and contrast in dark mode, it is better to use other means such as light edges.

Example

Popover is a component that overlays other content. This is made clear by using a medium shadow.