Layout and Planes

Use

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

Elevation

Planes elevation guide

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

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.

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