Layout and Planes

See

Core layouts for See

The planes layout system is modular and flexible. It’s a chaotic world out there, so this system provides order without veering into bland repetitiveness.

But starting from scratch can be overwhelming. To resolve this tension, we’ve designed six core layouts that can work in a variety of ratios and with most content. Consider these for most marketing communications.

Adapting the core layouts to different communication ratios

Core Layout 1: Two content planes; sometimes simple is best

Core Layout 2: Three content planes for slightly more versatility

Core Layout 3: Four content planes

Core Layout 4: Four content planes with a “windmill” pattern

Core Layout 5: Four content planes with an asymmetrical arrangement

Core Layout 6: Four content planes with ever-increasing sizes

Advanced layouts for See 

If the six core layouts are not suitable for a communication, you can build your own layout while maintaining consistency within the planes system.

Base grid

The base grid expands from the edges of the tab. Additional planes can be created by subdividing the cells symmetrically.

Examples of base-grid application

This simple grid provides a multitude of options for content arrangement.

Minimum two planes; maximum five planes

Planes can have a variety of sizes, as long as they don’t exceed five total (not counting the tab).

Base Grid

Planes Applied

Content applied

As your layout becomes more complex and incorporates more planes, they don’t all need to extend from the tab to the edge of the canvas. It can be beneficial to introduce a plane running perpendicular for a more asymmetric use of the grid.

Vertical and horizontal planes

When more than three planes appear in a layout, use a combination of vertical and horizontal orientations.

Base grid

Planes applied

Content applied

Split grid

A desirable “windmill” pattern is achieved when planes emanate from different edges of the tab. This pattern can be created with a subtle shift in the base grid, shown in the illustrations below.

Split grid with “windmill” pattern

How to create a split grid

Split the base grid along a line that includes an edge of the tab. Take the section that does not include the tab and rotate it 180 degrees. Then rejoin it to the rest of the base grid. This simple act creates a split grid in which the cells appear to be rotor blades encircling the tab, like a windmill.

Examples of a split grid

Four or five planes only

Split Grid

Content Applied

Base grid vs. split grid

Base grid

Content applied to base grid

Split grid

Content applied to split grid

Don’ts

Don’t apply grid lines randomly in a layout. Grid lines should always be compatible with the visual identity system guidelines for either a base grid or a split grid.

Planes should extend from the edges of the tab

Don’t position a plane randomly in a layout; it should always be anchored to the tab, unless it’s a subdivision.

When planes are subdivided, always use the grid.

Planes should be subdivided symmetrically.

Don’t subdivide planes randomly.

When filling a split grid with content, avoid having a stairstep pattern.

Split-grid planes should meet at the tab.

Don’t create a stairstep pattern with planes.

Other general don’ts

How to apply elements to planes

Tab + wordmark

Begin by choosing a layout structure and place the tab in the center. The tab always uses the primary colorway—a Coconut glyph on Dropbox Blue (the tab itself should be considered a small plane)—and the wordmark is always Graphite on a Coconut background.

See Logo for more information about the tab and wordmark.

Typography

There are several ways to use typography in the planes layout system:

• Headline (Sharp Grotesk 23 Book)

• Body copy (Atlas Grotesk Medium)

• Combination of headline and body copy

• When deciding placement, think about the message you’re trying to convey and which plane would best deliver it.

See Typography for more information.

Headline

Body copy

Headline + body copy

Visual imagery

Next, decide which type of visual imagery to use: illustration, photography, or hero iconography. Each type has different qualities, which are described in the Visual imagery overview. Choose the type that best communicates your idea, and never use more than two types of imagery in a piece of communication.

See Illustration, Photography, and Iconography for more information about each type of imagery in the Dropbox visual identity system.

Illustration

Photography

Iconography

Customer files

Sometimes more than one image is needed to properly tell a story. A customer file can be a great way to add context or another layer of narrative to a piece of communication.

A customer file should always relate to the larger story you’re telling, and it should appear as an inset within a plane.

See Photography for more information about customer files.

Color

The final step is picking an accent color that is harmonious with the other elements. Use only one accent color per piece of communication. For the other planes, use base colors.

See Color for more information about how to pair color with content

That’s it—you’re now equipped to create beautiful, thoughtful pieces of communication that feel uniquely Dropbox. The possibilities are endless!

Don’ts

Don’t use visual effects such as drop shadow.

Don’t use full bleed for a customer file.

Don’t use more than one accent color.

Don’t use keylines in a See communication.

Don’t use the same type of imagery more than once (example: two customer files).

Don’t use more than two types of imagery (example: customer photography, customer file, iconography).