Elevation
Elevation conveys how far a surface sits above its background or other elements. Compass combines shadows, borders, surface colors, and overlays.
Defining elevation
Elevation describes relationships, not a physical height in pixels. Keep normal content flat and distinguish floating surfaces such as menus and sheets.
Shadow scale
Compare shadows at the same size and surface color. Keep basic surfaces flat and apply only the depth floating surfaces need.
Component usage
Do not add shadows to every card or button.
Distinguish with borders and surface color
Distinguish the selected surface from its background
Show options above existing content
Show a supporting task above content
Distinguish with a border and backdrop instead of a shadow
Stacking order
Normal document flow
Fixed navigation at the screen edges
Filters retained while scrolling
Global navigation above filters and sidebars
Popup surfaces above the page
Themes and states
Retain borders and surface colors to distinguish depth on dark backgrounds.
Do not arbitrarily increase shadow strength for button selection or hover states.