Elevation
Our elevation system is used to visually differentiate the hierarchy in the interface. We use directional shadows as a visual cue to indicate depth and create a spacial relationship between objects.
Level 3
Level 2
Level 1
Surface (base level with no shadows)
- Level 1: Use for elements that sit directly on the surface, like
Card - Level 2: Use for
Toast,Popover, or other supplemental actions - Level 3: Use for large elements that temporarily block or draw a user’s focus, e.g.
Dialog,Drawer
Apply Elevation values in Figma from the Effects style tab.
Shadow level 1 example
Card using shadow level 1.