Foundation
Logo
This section explains how to use the Dropbox logo and its system across our three main applications: See, Buy, and Use.
Downloads
Primary logo lockup
Secondary logo lockup
Tab
Placement
When we use the planes layout system to compose a communication, we always include the Dropbox tab. The planes system is at the heart of our visual identity, and should be prioritized in all of our application takeovers, banners, ads, and billboards.
We place the tab in the center of the artboard, to reinforce our Composing Chaos strategy. For most communications that fall under See, use a centered tab.
No matter the application size, the tab remains in the middle with planes extending outward.
Alternate the tab placement in See communications
Central placement of the tab is core to communicating our strategy.
If you run into difficulties due to content complexity, consider whether your touch point falls under Buy, which is optimized for communications that are more content heavy and therefore use a top-left tab position.
If you find that you cannot make the planes system work for your layout, then the tab is disqualified and you should revert to the secondary logo treatment.
Size
The tab size is determined by the aspect ratio of its surface. To figure out the aspect ratio of your communication, divide the longer side by the shorter side. Once you have the aspect ratio, refer to the three options below. Pick the one closest to your own ratio, and use the tab sizing approach therein.
The following are commonly used aspect ratios. While these solve for most surfaces, there will be exceptions.
~1:3 and over
For long vertical or horizontal formats, stack the tab three times across the shortest width.
~1:2
For medium-sized formats, stack the tab seven times across the shortest width.
~1:1
For square-like formats, stack the tab nine times across the shortest width.
Color
For See communications, we use only the primary colorway: a Coconut glyph in a Dropbox Blue plane.
Primary
Wordmark
Placement
The wordmark always lives in the center of a plane.
Don’t anchor the wordmark to a corner or side of a plane.
Don’t position the wordmark at an angle or on its side.
The wordmark plane should connect to a corner of the tab.
Tab and wordmark in the planes layout system.
Tab and wordmark, touching corner to corner.
Extreme horizontal and vertical formats are the only exceptions for when the tab and wordmark can be separated.
Size
While the size of the tab is determined by its application, the size of the wordmark is determined by the size of the Dropbox glyph. The ascender of the “b” in Dropbox should align to the highest tips of the diamond shapes at the top of the glyph. The descender of the “p” should align to the lowest tip of the diamond shape at the bottom of the glyph.
Don’t make the wordmark smaller than the glyph.
Color
In the planes layout system for a See communication, the Dropbox wordmark is always Graphite on a Coconut background. Never use an accent color or Graphite background.
Don’t put the wordmark on a colored background.
Don’t put the wordmark on a Graphite background.
See the Layout and planes section for more about layouts.
Don’ts
Tab
Don’t position the tab outside the center point.
Don’t set the planes layout at an angle.
Wordmark
Don’t type the word Dropbox using Sharp Grotesk. Use the custom wordmark in the Figma file.
Don’t type the word Dropbox using any other font.
Don’t change the color of the wordmark from Graphite.
Secondary logo
The secondary logo is designed to work in communications that do not use the planes layout system.
Does not use the tab
Utilizes the glyph and wordmark (the classic lockup)
When you can’t use the planes layout system for an application, use the logo lockup of the glyph and the wordmark. This usually occurs with partnerships and sponsorships, which sometimes involve pieces that have sizes or dimensions that don’t fit within the planes system—for example: a round canvas, a neon sign, partnership lockups.
Construction
The Dropbox secondary logo includes both the glyph and the wordmark, using a carefully defined alignment and spacing between both elements.
Clear space
Clear space ensures the legibility and impact of the secondary logo by isolating it from competing visual elements, such as text or supporting graphics. This space should be considered the absolute minimum, and should be equal to the size of the glyph.
Placement
The following are the preferred placements of the secondary logo:
Center
Top left corner
Bottom left corner
Top right corner
Bottom right corner
In instances with unusual dimensions or without defined corners, always center the logo.
Color
The background color of the application determines which colorway to use. Always try to use the primary colorway, but there will be cases where the Dropbox Blue glyph and Graphite wordmark don’t contrast sufficiently with the background.
Primary colorway
On light, neutral backgrounds—such as white, cream, or light gray—use Dropbox Blue glyph + Graphite wordmark.
Secondary colorways
If the background is light but doesn’t contrast sufficiently with the primary colorway, use Graphite for both the glyph and the wordmark. If the background is dark, use Coconut for both elements. If the secondary logo appears on a colored background, choose the colorway that provides the most contrast.
Primary
Secondary
Partner logo lockups
Partner logos should not exceed the height of the Dropbox glyph. Use these placement guidelines for both partnerships and integrations. If an integration needs more specificity, place the product logos side-by-side with a plus sign between them.
Don’ts
Don’t stack the glyph and wordmark.
Don’t position the logo at an angle.
Don’t use alternative colors.
Don’t use an effect such as outline.