Elevation Levels
The SDX elevation concept uses shadows to visually convey depth, hierarchy, and importance of interface elements. SDX defines 3 layers: Background, Elevation Layer 1, and Elevation Layer 2. Each elevation layer has its own distinct shadow.
- Background: flat/no shadow
- Layer 1: Elevated, Layer 1 Shadow
- Layer 2: Overlay, Layer 2 Shadow
Higher elevation indicates prominence and interactivity (e.g., modals), while lower elevation signals background elements or supportive content.
Elements can move from one layer to the next on interaction, but they can never skip a layer. For example, an element on the background can be elevated to Layer 1 on hover, or an element already placed on Layer 1 can be elevated to Layer 2 on hover; however, elevating an element from the background directly to Layer 2 should be avoided.
Layer 1 Shadow
The Layer 1 Shadow is designed to add depth to otherwise flat pages and to direct focus to certain content elements without compromising the clean and light aesthetic.
Usage
The Layer 1 shadow is your go-to shadow whenever you want to elevate content or elements that are currently sitting flat on the background. If you are not sure which shadow to use, the Layer 1 Shadow is your friend.
Examples:
Layer 2 Shadow
The Layer 2 Shadow is a more prominent Shadow than the Layer 1 Shadow. It is designed to work seamlessly with the layer 1 shadow in scenarios in which you want to elevate an element with a shadow to an even higher level.
Usage
Use the Layer 2 shadow to boost your element's visibility if it already features a Layer 1 shadow. This is especially useful for emphasizing hover states or when a modal overlays other elements.
Avoid going from no shadow directly to a Layer 2 Shadow.
Examples:
