Overview

We combine a series of shadow effects that provide depth to our interactive elements, highlighting them above the rest of the interface in an elegant way.

These effects are available in Figma and code for quick and easy application and holistic iteration through design tokens.

Related content

---

Controls

Controls are at the Lowered elevation level for elements with less than 96px height.

---

Cards

Cards are at the Lowered elevation level for elements taller than 96px. As they’re larger, they need to cast larger shadows.

---

Menus

Menus are at the Raised elevation level, as they’ll live on top of other interface elements. Menus aren’t interactive themselves, but the elements inside them are, so they only come in the Dormant Resting role.