Foundation
Color
This section explains the Dropbox colors, values, and how they’re used across our three main applications: See, Buy, and Use.
Intro
Color categories
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.
Color values
Core colors
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
Dropbox Blue Night
Coconut
Graphite
Base colors
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 02
Base 03 (Coconut)
Base 04
Base 05
Base 06
Base 07
Base 08
Base 09
Base 10
Base 11
Base 12
Base 13
Base 14
Base 15
Base 16
Base 17
Base 18 (Graphite)
Base 19
Base 20 (Black)
Accent colors
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.
Zen
Sunset
Tangerine
Lime
Cloud
Orchid
Pink
Banana
Ocean
Crimson
Rust
Canopy
Navy
Plum
Azalea
Gold
Principles
1. Harmony
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.
2. Orientation
Example of color used for orientation. Same accent color follows product from marketing to web.
3. Hierarchy
Example of highlight a specific word for emphasis.
Example of accent color used to call attention to high-priority content on the website.