Color

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

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

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

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

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.