# Dropbox

> `dropbox@1.0.0`

Dropbox is a cloud storage and file-collaboration platform that has expanded from sync-and-share into Dash (AI universal search), Sign, and content collaboration. The brand voice — refreshed by Collins in 2017 — is editorial, bold, and human: large typographic blocks set on warm-white or near-black, anchored by the saturated Dropbox Blue open-box mark (#0061FF). Where competing storage brands recede into utility, Dropbox commits to a magazine-cover composition.


**Tags:** `saas`, `productivity`, `dropbox`, `storage`, `collaboration`

## Atoms

### Palette

**Dropbox** · `dropbox@1.0.0` · Proprietary — All Rights Reserved

> Dropbox's brand palette, anchored on Dropbox Blue (#0061FF) — the signature open-box blue that has carried the brand since its 2017 Collins-led refresh. The institutional voice pairs that saturated blue with a near-black canvas for text-forward marketing and a clean white for product surfaces. Where competing storage brands lean on cool neutrals, Dropbox commits to one strong blue. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `dropbox-blue` | Dropbox Blue | `#0061FF` |
| `dropbox-white` | Dropbox White | `#FFFFFF` |
| `dropbox-black` | Dropbox Black | `#000000` |
| `dropbox-canvas-dark` | Dropbox Canvas Dark | `#1E1919` |
| `dropbox-surface-light` | Dropbox Surface Light | `#F7F5F2` |
| `dropbox-surface-dark` | Dropbox Surface Dark | `#2C2727` |
| `dropbox-text-secondary` | Dropbox Text Secondary | `#5A5A5A` |
| `dropbox-text-tertiary` | Dropbox Text Tertiary | `#909090` |
| `dropbox-blue-hover` | Dropbox Blue Hover | `#3D85FF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `dropbox-white` | `#FFFFFF` |
| `surface` | `dropbox-surface-light` | `#F7F5F2` |
| `surface-elevated` | `dropbox-white` | `#FFFFFF` |
| `text-primary` | `dropbox-black` | `#000000` |
| `text-secondary` | `dropbox-text-secondary` | `#5A5A5A` |
| `text-tertiary` | `dropbox-text-tertiary` | `#909090` |
| `primary` | `dropbox-blue` | `#0061FF` |
| `primary-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `accent` | `dropbox-blue` | `#0061FF` |
| `accent-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `warning` | `dropbox-blue` | `#0061FF` |
| `warning-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `error` | `dropbox-blue` | `#0061FF` |
| `success` | `dropbox-blue` | `#0061FF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `dropbox-canvas-dark` | `#1E1919` |
| `surface` | `dropbox-surface-dark` | `#2C2727` |
| `surface-elevated` | `dropbox-surface-dark` | `#2C2727` |
| `text-primary` | `dropbox-white` | `#FFFFFF` |
| `text-secondary` | `dropbox-text-tertiary` | `#909090` |
| `text-tertiary` | `dropbox-text-secondary` | `#5A5A5A` |
| `primary` | `dropbox-blue` | `#0061FF` |
| `primary-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `accent` | `dropbox-blue` | `#0061FF` |
| `accent-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `warning` | `dropbox-blue` | `#0061FF` |
| `warning-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `error` | `dropbox-blue` | `#0061FF` |
| `success` | `dropbox-blue` | `#0061FF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `dropbox-blue` | `#0061FF` |
| `on-identity` | `dropbox-white` | `#FFFFFF` |
| `primary` | `dropbox-blue` | `#0061FF` |
| `primary-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `accent` | `dropbox-blue` | `#0061FF` |
| `accent-hover` | `dropbox-blue-hover` | `#3D85FF` |
| `success` | `dropbox-blue` | `#0061FF` |
| `warning` | `dropbox-blue` | `#0061FF` |
| `error` | `dropbox-blue` | `#0061FF` |
| `background-light` | `dropbox-white` | `#FFFFFF` |
| `background-dark` | `dropbox-canvas-dark` | `#1E1919` |
| `surface-light` | `dropbox-surface-light` | `#F7F5F2` |
| `surface-dark` | `dropbox-surface-dark` | `#2C2727` |
| `text-primary-light` | `dropbox-black` | `#000000` |
| `text-primary-dark` | `dropbox-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (7)

#### `colorChoice` → `logo.mark`

- **allowed:** dropbox-blue, dropbox-white, dropbox-black
- **forbidden:** any-non-brand-color

> The Dropbox open-box mark is rendered in Dropbox Blue on light surfaces and in white on dark surfaces. Dropbox's brand guidance forbids recoloring the mark into off-brand hues. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Dropbox's brand resources prohibit stretching, rotating, recoloring, or applying decorative effects to the open-box mark. The geometry of the mark is fixed. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Dropbox Black (#000000) on Dropbox White (#FFFFFF) clears AA at 21:1. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use Dropbox's documented light-fill open-box variant; do not invert the blue mark on the fly. 

#### `variantSelection` → `logo`

- **use:** `logo-blue`
- **when:** `backgroundColorScheme="light"`

> On light surfaces, the canonical mark renders in Dropbox Blue. A black-on-white monochrome variant is permitted; off-brand hues are not. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Dropbox's trademark guidance forbids use of the Dropbox name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Dropbox-skinned surfaces must clear AA on body text. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700, 800

> Dropbox's editorial marketing surfaces render display headings in the medium-to-heavy band (500–800); lighter weights undermine the magazine-cover voice of the 2017 refresh. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** dropbox-white, dropbox-black, dropbox-surface-light

> Dropbox Blue is calibrated to read on white, on warm off-white, and on near-black. Pairing it with an unrelated saturated hue breaks the brand's tightly-composed magazine-cover voice. 

## Provenance

- **Source:** <https://www.dropbox.com/branding>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Dropbox and the Dropbox logo are trademarks of Dropbox, Inc. The primary brand color Dropbox Blue (#0061FF) is documented on Dropbox's brand and press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Dropbox name and mark is governed by Dropbox's brand-use program at dropbox.com/branding. 
- **Imported:** `2026-05-18`
- **Notes:** Sharp Grotesk and Atlas Grotesk are Dropbox's proprietary corporate typefaces. brand-atoms references Inter as the open-source fallback (Inter is already in the catalog and is the closest neutral-grotesk sans available); consumers with licensed Sharp Grotesk or Atlas Grotesk files should override this reference at consumption time. 

---

*Generated by the brand-atoms converter. Source: `dropbox@1.0.0` from the encyclopedia.*