Dropbox Brand Book

August 26, 2017 Dropbox Brand Guidelines

Overview 1 Logo/Glyph Guidelines & Don’ts 2 Color Don’ts 3 Typography Don’ts 4 Motion Guidelines 5 Sample Banner Design & PSD

LOGO

LOGO

GLYPH

LOGO PLACEMENT

LOGO GUIDELINES - DONT’S Do not rotate glyph Do not deconstruct glyph Do not stretch glyph Do not fill in glyph Do not color logotype Do not outline glyph Do not use wrong Do not use gradients Do not center lockup or wordmark colors

COLORS The extended Dropbox brand color palette consists of 18 colors (including the Dropbox blue, black and white) that combine to create complimenting and contrasting pairings. These colors are formulated to work well with each other while promoting interesting and often unusual combinations. Do not use colors that are not found in the Dropbox core color palette. RGB ASE FILE

COLOR PAIRINGS There are 32 possible color pairings within the Dropbox color system. Color combinations can elicit strength and vibrance or subtlety and calm. This interplay of color within our pairings should always be considered when selecting colors for communications. The color palette has been designed with this interplay in mind, though some color combinations work better than others.

COLOR SELECTION The selection of colors is a simple process where we select a color from one quadrant of our spectrum and pair it with a color diagonally across our spectrum, creating a two-color combination. For example, we would pair light & cool colors with dark and warm colors, and cool & dark colors with light & warm colors.

COLOR PAIRING EXAMPLES Here are a few examples on how the colors can be paired.

COLOR DONT’S Do not use black as a Do not use non Do not use non brand Do not use color Do not use gradients background with system color pairings colors effects brand colors Do not use white Do not use high Do not use one color Do not use DBX blue Do not use black on glyph with colored contrast colors for logo and glyph with non-system dark colors wordmark colors

TYPEFACE Sharp Grotesk is the primary brand typeface for Dropbox. It is used for all display text and information for all communications. The majority of our company communications, across campaigns and websites, will only use three primary weights of Sharp: Book 22, Medium 22, and Semibold 22 in roman.

TYPOGRAPHY Alignment and Rag Paragraphs are always set flush left with a ragged right. The left edge of the paragraph is always straight, the right edge is always ragged. Paragraphs are never centered. Scale Our headline type should be large and bold. Please try to keep copy short and to the point as this allows the use of larger point sizes for more visual impact. A large difference between the headline and text copy should be readily apparent. Hyphenation Headlines should never be hyphenated. Case Body copy is always set sentence case (upper and lowercase). Never set body copy in all caps or all lowercase.

INCORRECT TYPE USAGE

MOTION GUIDELINES Plane Principles Planes can affect change on content Planes can push/pull each other Planes can reveal/hide new content

MOTION GUIDELINES - PLANES DONT’S Do not use planes on Do not use too many Do not use multiple an angle planes background colors

MOTION GUIDELINES Plane Grid & Isometric Perspective Glyphs are constructed from planes that occupy a grid, which is being viewed from an isometric perspective. Plane movement on the grid should be single axis - Single Axis Movement — Scale We will need a device for hiding & revealing planes on the screen. Scaling the planes is a simple way to do that, but should not be combined with any other types of movement.

MOTION GUIDELINES Single Axis Movement — X or Y Once a plane is on the screen, it’s movement should only take place on one axis at a time, preferably only the X or Y. Adding some squash & stretch to plane gives the animation some extra energy & character. Single Axis Movement — Z Since certain glyphs have planes that occupy multiple Z-Depths, planes can sometimes move along the Z axis.

SAMPLE BANNER: Type and Plane only SAMPLE PSD LINK

SAMPLE BANNER: With Images / Co-Creation

Static Banners | Campaign Awareness 300x250 1 ½ Equal Margins Sublines: Sharp Grotesk Medium 22 - 7.5 pt Option 01 Headline: Sharp Grotesk Medium 22 - 15 pt type type size (half of headline) size / 15 pt leading

Campaign Messaging Overview ONE OVERARCHING MESSAGE The world needs your creative energy Let’s Keep It Flowing [LOGO] + Dropbox