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 are at the Lowered elevation level for elements with less than 96px height.

Control effects


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

Card effects


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.

Menu effects - example