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 Intro Core colors

Core colors

RBG

CMYK

Color Intro Base colors

Base colors

RGB

CMYK

Color Intro Accent colors

Accent colors

RGB

CMYK


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

Color Intro Harmony 1

Example of harmonious color use. The yellow in the photo is analogous to the yellow in the right plane.

Color Intro Harmony 2

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

Color Intro Orientation

Example of color used for orientation. Same accent color follows product from marketing to web.

3. Hierarchy

Color Intro Hierarchy 1

Example of highlight a specific word for emphasis.

Color Intro Hierarchy 2

Example of accent color used to call attention to high-priority content on the website.