Foundation
Color
This section explains the Dropbox colors, values, and how they’re used across our three main applications: See, Buy, and Use.
Buy
Tab is always Dropbox Blue
See Logo: Tab color for more information.
Accent color must be harmonious with content
See the Color: See for guidance on how to pair an accent color with content.
Examples of successful photo/accent color pairings.
The background for a customer file is determined by the color of the text.
If text is Coconut, customer file is placed on a Coconut background. If text is Graphite, customer file is placed on a Graphite background.
Examples of successful photo/accent color pairings.
If a headline appears on Graphite or Coconut, an accent color can appear behind the user content.
When text appears on a Graphite or Coconut background, customer files can appear on a smaller background created with an accent color.
Color theming with accents
Using color to visually “theme” groups of content is a great way to implicitly tie together a customer story. We have used it below to group the content of an entire page—because it’s all one continuous story—but it can be used in smaller modules to create content cohesion too.
This customer story is color-themed for a unified appearance.
More examples of color-themed customer stories.
Analogous colors for color theming.
Accent colors for orientation
Within a single page, accent colors can be used to differentiate pieces of content.
Accent colors for orientation
Use only one accent-color background per state or view of a page. For better harmony overall, be sure to use a base color between any two accent colors.
Base colors for hierarchy
Tonal variation can indicate a clear hierarchy of content without causing visual distraction.
Don’ts
Don’t use Dropbox Blue as a background color color.
Don’t place accent colors next to each other.
Don’t use accent colored text on an accent colored background.