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

Color application guide

Foundation Color Use ColorApplicationGuideStandard


Foundation Color Use ColorApplicationGuideInverse


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.

Foundation Color Use ProductBaseColorApplicationSignUp

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

Foundation Color Use LightMode

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).

Initial-only Avatars in standard theme.

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

An illustration of a book with missing page and a bookmark highlighted in an accent color.

Each illustration uses a single accent color.

Bars of different accent colors shown as they might appear in a timeline visualization.

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.

Foundation Color Use ToolTip

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.

Foundation Color Use LightMode

Standard theme

Foundation Color Use DarkMode

Dark theme

Color Use LightDark

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 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.

Foundation Color Use StandardCoreTokens

Standard core colors

Foundation Color Use InverseCoreTokens

Inverse core colors

Foundation Color Use CoreColorsUsage

Primary button and controls


Based on

Coconut, Graphite


Primary theme color

Used for

  • Checkboxes

  • Radios

  • Toggles


Based on

Coconut, Graphite


Secondary theme color

Used for

  • Checkboxes

  • Radios

  • Toggles


Based on

Dropbox Blue


Accent theme color

Used for

  • Primary buttons


Base color tokens provide a foundation for UI elements such as typography, icons, borders, and planes backgrounds.

Foundation Color Use StandardBaseColors

Standard base colors

Foundation Color Use InverseBaseColors

Inverse base colors

Foundation Color Use CoreColorsUsage

Example usage of base tokens



Provides the highest contrast/emphasis for content

Used for

  • Titles/content labels

  • Primary content/surfaces



Provides lower contrast/emphasis compared with Standard

Used for

  • Secondary content/surfaces

  • Meta text



For specific UI elements that are in a disabled state

Used for

  • Buttons

  • Text field labels



Applies to UI elements that are elevated above the primary surface.

Used for

  • Menus (examples: file, account)

  • Snackbars

  • Tooltips


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).

Foundation Color Use StandardStateColors

Standard state colors

Foundation Color Use InverseStateColors

Inverse state colors

Foundation Color Use StateColorsUsage

Example usage - state color tokens


Based on

Dropbox Blue


Warrants additional emphasis over related content

Used for

  • New

  • Highlight


Based on

Lime, Canopy


An event/action was successful or affects the user in a positive way

Used for

  • Valid form

  • Positive response

  • Success

  • Confirm

  • Available

  • Complete


Based on

Sunset, Crimson


Warrants the highest emphasis over all other content

Used for

  • Invalid form

  • Negative response

  • Notification dot badge

  • Delete/Remove

  • Failed

  • Error


Based on

Banana, Gold


An event/action may deviate from a normal state

Used for

  • Potential issue

  • Person out of organization (sharing)


Opacity color tokens are used as a background for elements to communicate their state or hierarchy.

Standard opacity tokens

Standard opacity tokens


Inverse opacity tokens

Foundation Color Use OpacityColorsUsage

Example usage - opacity tokens

Opacity 1


Low-contrast background

Used for

  • Hover states

  • Backgrounds

Opacity 2


Medium-contrast background

Used for

  • Active/pressed states

Opacity 3


Light-contrast background

Used for

  • Selected states


See accent palette usage details above.

16 accent colors; Zen, Sunset, Tangerine, Lime, Cloud, Orchid, Pink, Banana, Ocean, Crimson, Rust, Canopy, Navy, Plum, Azalea, and Gold.


NOTE: These screens do not reflect actual product UI.

Foundation Color Use ExampleLightMode

Web example: Light mode

Foundation Color Use ExampleDarkMode

Web example: Dark mode


  • 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.