Shadows distinguish layers and demonstrate environmental hierarchy.

Also known as:
Box shadowText shadowShadeDrop shadow

AnchorNeed to know

  • Shadows help to define the various levels of elevation (z-index) in our product’s environment. They provide dimension to the interface, supporting individual objects and their interactions.

To keep in mind

  • Shadows incorporate a coherent set of values for their positioning, blur, and transparency
  • Shadows are created by using Black (#000 or 255, 255, 255), our default color for shade.
  • Our brand colors are not used as the base color for a shadow. Our text color is made up of a range of colors. When it is mixed with a primary or secondary color, it will create a muddied effect.
  • Black (#000000) is our default color for all things related to shade. It allows us to add a level of color control (no muddying of color) when applied as shade to our other base colors.
  • For overlays such as a modal backdrop, use 50% transparency.

External links

Here are some examples of existing design systems: