Elevation
Last Updated: June 2025Elevation defines the depth and layering of surfaces — from flat backgrounds to highly elevated, interactive elements. Use these values to create visual hierarchy, focus, and separation between components.
FigmaUsage
link| Value | Name | Usage | Example |
|---|---|---|---|
flat | Indicates zero elevation. No shadow is applied. Used for static or foundational surfaces. | Flat tiles, background-level surfaces | |
small | Subtle shadow that lifts components slightly above the base layer. | Tooltips, small floating elements | |
medium | Creates moderate separation from the background. Ideal for core interactive surfaces. | Cards, floating tiles, secondary surfaces | |
large | Strongest elevation. Emphasizes prominence and pulls the element to the forefront. | Modals, top-level UI, attention-heavy elements |
Examples
linkFLAT
Flat surface
No shadow — border only. Use for static tiles and background-level content.SMALL
MEDIUM
FAVORITES
PORTFOLIOS
Initiate payment
Medium elevation for interactive cards and menus.LARGE
Invite User
Best Practices
linkDo
- •Use elevation consistently across similar components and layouts.
- •Choose elevation based on hierarchy — higher importance → higher elevation.
- •Ensure shadows remain subtle; elevation should support, not distract.
Don't
- •Mix multiple elevation levels within the same component group without purpose.
- •Use large elevation for routine surfaces.
- •Override shadow tokens with custom values.
Accessibility
linkVisibility & Focus
- •Shadows must not be the only indicator of focus or interactivity.
- •Pair elevation with clear focus rings and contrast-compliant borders.
Depth & Comprehension
- •Elevation should reinforce grouping and flow.
- •Avoid sudden or drastic elevation jumps that disrupt visual order.
Q&A
linkDoes elevation change between light and dark mode?
No. Elevation tokens remain constant; shadow rendering adapts automatically per theme.
What's the difference between elevation levels?
Each level represents increasing visual prominence and separation from the base surface.
Can elevation be combined with borders?
Yes. Borders can reinforce separation when shadows alone are insufficient.
Should elevation replace focus indicators?
Never. Focus must always be signaled by a visible outline.