Elevation is the distance between any two elements along the z-axis.
Used for primary, global elements (main/left navs) that need to exist on an independent plane and should rarely if ever be obstructed by other elements.
Should be primarily used on temporary elements that are intended to interrupt a users workflow or draw their attention. Think alerts, modals, takeovers, tours, etc.
0px 16px 32px rgba(39,51,51,.24)
Should be used for built in tools and recurring UI that is often intentionally accessed and hidden by the user. Think compose, global drawer, help drawer.
0px 8px 16px rgba(39,51,51,.24)
Used for elements that expose additional information to users accessed either intentionally or as a result of another action. Think layer, menu, tooltip.
0px 4px 8px rgba(39,51,51,.24)
Reserved for optional hover interactions and focus states.
0px 2px 4px rgba(39,51,51,.24)
The lowest level, visible container.
The app’s background color.
When an element is elevated relative to another it retains it’s default elevation value regardless of it’s parent’s value.