The implied measured distance above the base layer is the elevation. Its effect on a layer is defined by the intensity and depth of the shadow it casts.


See the Pen Elevation by USANA UX (@usana_ux) on CodePen.


Elevation scale

Shadows bring an element into focus as a reference to the physical world. Elements can be stacked on top of each other but cannot pass through each other.

The scale of distances are on a scale from 0 to 24.

  • 0px
  • 2px
  • 4px
  • 8px
  • 16px
  • 24px
  • flat
  • TBA
  • Cards, tool tips
  • Popovers, toasts
  • Cards (on hover), side navigation
  • Modals
  • Do use elevation/shadows to demonstrate differences between two components.
  • Using shadows and outlines increases the ease and speed of finding a component when scanning pages.
  • Using a shadow or stroke outline around a component improves one’s ability to determine whether or not it can be interacted with.
  • Use elevation on icons
  • Use elevation on text
  • Use elevation for style only