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)


Logo Intro Components png

Primary logo treatment

Logo Intro SecondaryLogo Example

Secondary logo treatment

Logo Intro Primary

Primary logo treatment

Logo Intro SecondaryLogo Example

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

The primary logo is our tab. It is a lockup of the glyph centered within a square plane.

Logo Intro Tab Components

Tab construction

Logo Intro Tab Small
Logo Intro Tab Animation

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.

Logo Intro Tab2

Regular: Used for all applications above 32x32 pixels. In applications such as billboards, videos, and on web.

Small

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.

Logo Intro DropboxWordmark

Secondary logo lockup

The secondary logo lockup is made up of our glyph and wordmark.

Logo Intro LogoComponents Nomenclature

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. 

Logo Intro TabIsPlane

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.

Logo Intro HumbleYetUnignorable

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.

Logo Intro Incorrect Left

Don’t anchor the glyph to the corner.

Logo Intro Incorrect Left

Don’t rotate the tab.

Logo Intro Incorrect Deconstructed

Don’t deconstruct the glyph.

Logo Intro Incorrect Stretched

Don’t stretch the glyph

Logo Intro Incorrect Inverted

Don’t invert the colors.

Logo Intro Incorrect Outline

Don’t outline the glyph.

Logo Intro Incorrect ColorChange

Don’t change the color of the tab.

Logo Intro Incorrect Gradient

Don’t use a gradient.

Logo Intro Incorrect Mask

Don’t use an image.

Important

The tab should never appear with the wordmark in a horizontal lockup outside the planes layout system.

Logo Intro DropboxLogoPadding