Foundation
Logo
This section explains how to use the Dropbox logo and its system across our three main applications: See, Buy, and Use.
Intro
Logo treatments
There are two treatments for the Dropbox logo: primary and secondary.
Primary logo treatment
Designed to work in communications that use the planes layout system.
Always uses the tab
The wordmark and the tab are always separated and occupy their own planes
Secondary logo treatment
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)
Primary logo treatment
Secondary logo treatment
Primary logo treatment
Secondary logo treatment
NOTE: All mocks below are illustrative of the visual identity system. For example, the IA on the in-product screen does not reflect final surfaces IA.
Nomenclature
Primary logo
The primary logo is our tab. It is a lockup of the glyph centered within a square plane.
Tab construction
Tab Sizes
Because the tab contains the glyph, it must adhere to the sizing recommendations. The regular glyph should be used in a tab that is larger than 32x32 pixels. The small glyph should be used in a tab that is 32x32 pixels or smaller.
Regular: Used for all applications above 32x32 pixels. In applications such as billboards, videos, and on web.
Small: Used for all applications 32x32 pixels or smaller. In applications such as a favicon, in the tray, or the file tree.
Wordmark
The Dropbox wordmark uses a customized weight of Sharp Grotesk, size 20. Always use the wordmark from our Logo Library, and never type out the word Dropbox.
Secondary logo lockup
The secondary logo lockup is made up of our glyph and wordmark.
Principles
1. The tab is a plane
When the tab is included in a Dropbox communication, it serves as a fulcrum that organizes and motivates the page layout.
2. Humble yet unignorable
The tab is modest in size, yet its placement and treatment are always purposeful and unmissable. It is complementary to the content but in command of the composition.
Don'ts
Tab
Below are a few common errors to avoid when using the Dropbox tab. This is not an exhaustive list. As a general rule of thumb, avoid making any adjustment to the tab. Use only the supplied files.
Don’t anchor the glyph to the corner.
Don’t rotate the tab.
Don’t deconstruct the glyph.
Don’t stretch the glyph
Don’t invert the colors.
Don’t outline the glyph.
Don’t change the color of the tab.
Don’t use a gradient.
Don’t use an image.
Important
The tab should never appear with the wordmark in a horizontal lockup outside the planes layout system.
