PayPal Tim Resudek

Plane Depth Guidelines

  • Save
Plane Depth Guidelines paypal guideline design system depth shadows z-index

As we've been working through our design system we've reached the point where our plane depth needs to be defined for things like tooltips, menu flyouts, select dropdowns, modal windows, cards, and handful of other elements.

My approach was to start by defining the lowest plane (cards) and the highest plane (modal windows). From there a little exploration led me to define the relative distance each plane maintains from the adjacent planes.

keyboard shortcuts: L or F like