This section explains the Dropbox colors, values, and how they’re used across our three main applications: See, Buy, and Use.
Each color is WCAG-compliant—4.5:1—with either Graphite or Coconut. We can divide the color palette into three categories:
Core: Dropbox at its most fundamental and pared back. Consistent across the See-Buy-Use framework.
Base: A carefully developed set of gray tones, allowing subtle hierarchy and nuance primarily in digital environments.
Accent: Visual life and energy—ranging from zippy to mature, accents are most prominently used in See and Use communications.
Beyond just Dropbox Blue, our core brand expression leans heavily on two other colors.
Coconut: a slightly warm off-white that’s both sophisticated and easy on the eyes. It replaces white in many applications.
Graphite: a slightly warm off-black with tonal qualities similar to
Coconut. It replaces black in many applications.
While technically these are base colors, they appear so consistently in our communications that they deserve the moniker “core” alongside Dropbox Blue.
Dropbox Blue Night
The base color palette provides a consistent, neutral connective tissue for brand expressions. It’s helpful in creating visual hierarchy without unnecessary noise.
Base 01 (White)
Base 03 (Coconut)
Base 18 (Graphite)
Base 20 (Black)
Accent colors bring flexibility and musicality to the expression of our brand—primarily as flood colors in planes layouts, and in illustrations. Note: The accent color palette is WCAG-compliant to a 4.5:1 contrast ratio with either Graphite text (lighter colors on the left) or Coconut text (darker colors on the right).
Always use Graphite or Coconut for text and buttons that appear on planes of color.
Example of harmonious color use. The yellow in the photo is analogous to the yellow in the right plane.
Example of harmonious color use. The red in the photo in the top right plane is analogous to the red in the illustration and the accent color in the bottom left plane.
Example of color used for orientation. Same accent color follows product from marketing to web.
Example of highlight a specific word for emphasis.
Example of accent color used to call attention to high-priority content on the website.