Shadows and elevation on a surface indicate depth and direction. Together they create visual hierarchy through surface qualities that suggest their position on the z-axis relative to other surfaces.

1. Surface: any solid background element that can be stacked or attached to each other, but can not pass through. They can be transparent, cast shadows, and reflect light.
2. Elevation: the distance between surfaces.

• Tooltips
• Modals
• Cards
• Sticky Navigation
• Floating Bars (e.g. Credit Cards Compare Bar)

These are low level foundation styles that must be used consistently throughout the product.

• Assign a shadow 0-3 to all surfaces

Shadows help create a visual hierarchy between overlapping surfaces.

DOUse shadows available in the foundation for overlapping surfaces.

DON'TGo completely flat.

DOCreate a sense of depth by increasing the shadows as the surface elevation increases.

DON'TForget about elevation. Surfaces without elevation fail to create a separation from background elements.