Elevation

Elevation defines how content is presented along the z-axis of a design. All objects will exist within one of the panes, levels or nested distances described in the structure below. Different Shadow sizes communicate the distance between an elevated object and the pane behind it.

Structure

Elevation	Description	Shadow Size
Foundational Pane	Used to present the main content of any design.	None
Attention Pane	Used to elevate important information a large distance above the foundational pane. Usually these are objects that require user action or attention, such as the Modal pattern or Notification component.	Large
Interaction Level	Used to elevate interactive elements above either the foundational or attention pane. Usually these are objects that appear when triggered by a user action, such as the dropdown of the Select component.	Small
Frame Level	Used to elevate framing elements above either the foundational or attention pane. Usually these are objects that will remain fixed while the main content scrolls, such as the Header pattern.	Medium
Artificial Elevation	Used to create the appearance of visual depth within any level or pane without actually elevating any of the objects.	Small

Design Environment

The shadow size associated with an elevated object will remain fixed, even if it scrolls over or spans across two or more surfaces behind it. Objects that are artificially elevated within any pane or level will stay flush with their parent container. This means they will scroll under any objects that their parent container scrolls under, no matter how elevated they appear to be.