Shadows ​

Shadows give users cues about the distance or elevation between surface and help communicate hierarchy and enhance navigation by giving visual cues about distance or elevation between surfaces. Our shadow system is built on an elevation scale from 1 to 10, and includes a predefined style for container elements.

Shadows

Usage guidelines ​

When to use ​

  • To communicate distance between objects.
  • To make an object stand out from the background.

Values ​

There are 11 shadows styles. 01 to 10 are shadow styles structured on an elevation scale, while "Card" is the default shadow style used for container components such as cards or modals.

CSS tokens ​

These are the values provided as part of the @zurich/design-tokens NPM library:

...