This section explains the Dropbox colors, values, and how they’re used across our three main applications: See, Buy, and Use.
Color application guide
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.
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.
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 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 theme color
Secondary theme color
Accent theme color
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
Provides the highest contrast/emphasis for content
Provides lower contrast/emphasis compared with Standard
For specific UI elements that are in a disabled state
Text field labels
Applies to UI elements that are elevated above the primary surface.
Menus (examples: file, account)
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
Warrants additional emphasis over related content
An event/action was successful or affects the user in a positive way
Warrants the highest emphasis over all other content
Notification dot badge
An event/action may deviate from a normal state
Person out of organization (sharing)
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
See accent palette usage details above.
NOTE: These screens do not reflect actual product UI.
Web example: Light mode
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.