This section explains how to use the Dropbox logo and its system across our three main applications: See, Buy, and Use.


The tab moves from being the fulcrum to having a secondary role, which allows the viewer to focus more on the informational/functional content of the communication.

Logo Buy TabPlacement Corner

Tab placement

The tab appears in the top left corner of signed-out web on desktop and mobile.

Logo Buy Do Tab PlacementWeb

Tab color

In signed-out web, use the primary colorway in both Light mode and Dark mode. 

Logo PrimaryColorway


Logo PrimaryColorway DarkMode

Primary: Dark mode

Wordmark color

In the planes layout system for a Buy communication, the Dropbox wordmark can be either Graphite on a Coconut background or Coconut on a Graphite background. 

Logo Buy TabWordmark Sizing Web


Logo Buy WordmarkColor Web Dark

Primary: Dark mode

Logo Buy WordmarkColor Web Day

Don’t use an accent color.

Logo Buy TabWordmark Sizing Web

Don’t apply an effect such as shadow.


Logo Buy Dont Tab PlacementWeb-2

Don’t place the tab anywhere except the top left.

Logo Buy Dont Tab PlacementWeb-3

Don’t change the tab color.