Foundation
Layout and Planes
This section explains how we use planes to guide customers, create order, and focus attention.
Use
Planes guidance is meant for UI design only, and is not intended as guidance for information architecture.
Elevation

Planes elevation guide
A
Base plane
The base plane is the base layer of any Dropbox interface. Customer content is usually placed on this bottom-most layer.
Examples: banners, tables, breadcrumbs, text editor
B
Navigation plane
The navigation plane appears above the base plane and contains navigation.
Examples: global navigation, local navigation
C
Elevated components (Z1)
Elevated components appear above the base plane and navigation plane.
Examples: snackbars, tooltips, menus
D
Overlay
Overlays separate one plane surface from another, and are often used below modals.
E
Modal surface (Z2)
Modals are contextual surfaces that require a user interaction to dismiss them. Modal planes function as unique surfaces that have their own set of internal elevated planes and components.
Use planes as the foundation for layout
Planes create visual distinction between groupings of information and allow users to understand the context of the content. Using planes as the foundation for layout creates cohesion among modules in a web page, as well as cohesion across platforms and devices.
When possible, strive for full-width planes rather than inset containers.
Always apply planes that are full height and/or width—they should touch at least two edges of the container.

Onboarding

Signed-in
Characteristics of planes
Planes should react to the needs of the user, always seem alive, and transition with the proper easing and duration values. If moving between states of an application, you can use plane animations to aid those transitions.
Planes are solid—they have definite boundaries.
Planes are reactive—resizing and reorganizing in response to one another to guide the user.
Planes are continuous—scaling and morphing content to preserve continuity and limit distraction.
Planes should move on- and off-screen infrequently, to limit distractions
Anchor the plane to the edge of the view area, or the edge of another plane (top/bottom, right/left)
Use animation to resize planes when possible
Use DIG motion tokens to enhance the feeling of fluidity and cohesion
Planes are nestable—to limit clutter and information density, planes can conceal other planes (within reason).
Nesting should be only one level deep. Avoid having multiple planes nested within a plane.
How planes behave
Planes are solid, not ephemeral - They come from off-screen, as surfaces for content
Planes are anchored, not free-floating - They are always anchored to two sides of the screen (top/bottom, right/left)
Planes are fluid, not jolting - Planes use organic easing and sensible durations
Planes are foundational, not ornamental - Planes define a layout and create structure; they aren’t visual adornment
Planes move infrequently - Planes move into and out of the view area infrequently, to avoid distraction
Horizontal and vertical orientations
Depending on the width of the container, planes can be designed in either a horizontal or a vertical orientation.
For desktop, use horizontal orientations. For mobile and the tray, use vertical orientations.
Do not combine horizontal orientations with vertical orientations in a view.

For desktop, use horizontal orientations. For mobile and the tray, use vertical orientations.
Use keylines to delineate space
When color variation between planes does not suit, use keylines to delineate space and to aid in the subdivision of content.

Don’ts
When possible, don’t use inset planes. Opt instead for edge-to-edge UI design
Never use a plane with a triangular shape
Never use a plane with a diagonal edge
Don’t apply shadow to a plane
Don’t use multiple background colors in a plane
Don’t use more than four planes within a view
Don’t move planes constantly on and off the screen, especially the contextual plane
Don’t use rounded corners
Don’t have free-floating planes
Don’t use jolting transitions
Don’t use planes as a junk drawer for content