Foundation
Color
This section explains the Dropbox colors, values, and how they’re used across our three main applications: See, Buy, and Use.
Color application guide

Standard

Dark
Product base-color application
We transition into a white base plane when entering the signed-in product experience.
Use Coconut to help indicate hierarchy in the UI—for example, between the base and navigation planes. More on planes hierarchy guidance here.
Use white space. The white base plane allows the user content to shine and provides clarity during sign-in/sign-up.
We’ve replaced all previous application of grays and blacks with warmer base-color values.

Sign-up drawer is white in preparation for signed-in experience.

Signed-in base and navigation planes.
Product accent-color application
Sparingly and with meaning, we use the accent-color palette for visuals, user identity, and UI that needs multiple options for visual separation (for example: data visualization in the admin console, timelines in Paper).

An avatar represents a user’s identity. Use either an image of the user or their initials with an accent color for the background.

Each illustration uses a single accent color.

Accent colors for timelines and data visualization can be customized by the user or predefined. When applying multiple accent colors within the same context, use colors that have a similar tone.
Standard and inverse
In order to accommodate surfaces with dark backgrounds, DIG offers both standard and inverse color tokens. When using inverse color tokens, it is critical to use them consistently within a container/surface. Mixing standard and inverse tokens within the same surface may lead to strange coloring in Dark mode. Inverse does not mean Dark mode.

Tooltips use inverse colors to achieve high contrast in any mode or theme.
Dark theme
Each color token has both a “light” and “dark” mode value in code. When a platform (macOS, Windows, Android, iOS) provides the option to change its theme to “dark/night mode,” our surfaces should respect that setting to meet user expectations.

Standard theme

Dark theme

Application through tokens
Color application for product is heavily tied to our existing DIG 2.0 semantic color token system. For product, the brand color usage principles are translated into semantic color tokens that help to define specific color values for UI elements such as text, border, and background.
Color token categories
Core
Button
Base
State
Opacity
Accent
Utility
Core
Core color tokens are used to express the Dropbox brand within its most fundamental UI elements. The most common application is with call-to-action elements such as buttons and links.

Standard core colors

Inverse core colors

Primary button and controls
Primary
Based on
Coconut, Graphite
Description
Primary theme color
Used for
Checkboxes
Radios
Toggles
Secondary
Based on
Coconut, Graphite
Description
Secondary theme color
Used for
Checkboxes
Radios
Toggles
Accent
Based on
Dropbox Blue
Description
Accent theme color
Used for
Primary buttons
Base
Base color tokens provide a foundation for UI elements such as typography, icons, borders, and planes backgrounds.

Standard base colors

Inverse base colors

Example usage of base tokens
Standard
Description
Provides the highest contrast/emphasis for content
Used for
Titles/content labels
Primary content/surfaces
Faint
Description
Provides lower contrast/emphasis compared with Standard
Used for
Secondary content/surfaces
Meta text
Disabled
Description
For specific UI elements that are in a disabled state
Used for
Buttons
Text field labels
Elevated
Description
Applies to UI elements that are elevated above the primary surface.
Used for
Menus (examples: file, account)
Snackbars
Tooltips
State
State color tokens are used when a UI element needs to draw attention and communicate its specific state. These tokens support content and concepts; however, it’s important to use more than just color to communicate a state (for example: icons, font weight, font style, text labels).

Standard state colors

Inverse state colors

Example usage - state color tokens
Attention
Based on
Dropbox Blue
Description
Warrants additional emphasis over related content
Used for
New
Highlight
Success
Based on
Lime, Canopy
Description
An event/action was successful or affects the user in a positive way
Used for
Valid form
Positive response
Success
Confirm
Available
Complete
Alert
Based on
Sunset, Crimson
Description
Warrants the highest emphasis over all other content
Used for
Invalid form
Negative response
Notification dot badge
Delete/Remove
Failed
Error
Warning
Based on
Banana, Gold
Description
An event/action may deviate from a normal state
Used for
Potential issue
Person out of organization (sharing)
Opacity
Opacity color tokens are used as a background for elements to communicate their state or hierarchy.

Standard opacity tokens

Inverse opacity tokens

Example usage - opacity tokens
Opacity 1
Description
Low-contrast background
Used for
Hover states
Backgrounds
Opacity 2
Description
Medium-contrast background
Used for
Active/pressed states
Opacity 3
Description
Light-contrast background
Used for
Selected states
Accent
See accent palette usage details above.

Examples
NOTE: These screens do not reflect actual product UI.

Web example: Light mode

Web example: Dark mode
Don’ts
Don’t use hard-coded values.
Don’t use Dropbox Blue to flood a plane. Rather, it should be used sparingly to draw attention and to reinforce interaction.Â
Don’t use an accent color to flood a plane in the product.
Don’t use texture, gradient, excessive shadow, or blurring.
Don’t use accent colors outside the possible applications listed.
Don’t use a color other than white for the base plane.