Foundation

Layout and Planes

This section explains how we use planes to guide customers, create order, and focus attention.

On this page

Use

Planes guidance is meant for UI design only, and is not intended as guidance for information architecture.

Elevation

Foundation LayoutsAndPlanes Use 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.

Foundation LayoutsAndPlanes Use Onboarding

Onboarding

Foundation LayoutsAndPlanes Use SignedIn

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

  1. Planes are solid, not ephemeral - They come from off-screen, as surfaces for content

  2. Planes are anchored, not free-floating - They are always anchored to two sides of the screen (top/bottom, right/left)

  3. Planes are fluid, not jolting - Planes use organic easing and sensible durations

  4. Planes are foundational, not ornamental - Planes define a layout and create structure; they aren’t visual adornment

  5. 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.

Foundation LayoutsAndPlanes Use Orientation

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.

Foundation LayoutsAndPlanes Use Keylines

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