Elevation
Shadows add depth and help distinguish elements from the background, reinforcing hierarchy and focus within the interface. Use sparingly to convey interaction across surfaces and components.
Depth Levels
Depth levels define a standardized range of shadow intensities used to represent elevation in the interface. Each level corresponds to a specific shadow token.
None
No elevation, default for the majority of elements.
Stroke
Visual treatment to increase hiearchy of standard elements.
Secondary
Soft elevation, used for grouped interaction.
Primary
Strong elevation, used to emphasize key interactions.
Elevated
Used for only the most raised UI elements such as floating menus.
