W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Dropbox
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/dropbox/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/dropbox/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Dropbox
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Dropbox
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Dropbox
A clear hierarchy in Dropbox's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ dropbox-blue #0061FF accent-hover
→ dropbox-blue-hover #3D85FF background-dark
→ dropbox-canvas-dark #1E1919 background-light
→ dropbox-white #FFFFFF error
→ dropbox-blue #0061FF identity
→ dropbox-blue #0061FF on-identity
→ dropbox-white #FFFFFF primary
→ dropbox-blue #0061FF primary-hover
→ dropbox-blue-hover #3D85FF success
→ dropbox-blue #0061FF surface-dark
→ dropbox-surface-dark #2C2727 surface-light
→ dropbox-surface-light #F7F5F2 text-primary-dark
→ dropbox-white #FFFFFF text-primary-light
→ dropbox-black #000000 warning
→ dropbox-blue #0061FF Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from dropbox)
Light mode (14 roles)
accent
→ dropbox-blue accent-hover
→ dropbox-blue-hover background
→ dropbox-white error
→ dropbox-blue primary
→ dropbox-blue primary-hover
→ dropbox-blue-hover success
→ dropbox-blue surface
→ dropbox-surface-light surface-elevated
→ dropbox-white text-primary
→ dropbox-black text-secondary
→ dropbox-text-secondary text-tertiary
→ dropbox-text-tertiary warning
→ dropbox-blue warning-hover
→ dropbox-blue-hover Dark mode (14 roles)
accent
→ dropbox-blue accent-hover
→ dropbox-blue-hover background
→ dropbox-canvas-dark error
→ dropbox-blue primary
→ dropbox-blue primary-hover
→ dropbox-blue-hover success
→ dropbox-blue surface
→ dropbox-surface-dark surface-elevated
→ dropbox-surface-dark text-primary
→ dropbox-white text-secondary
→ dropbox-text-tertiary text-tertiary
→ dropbox-text-secondary warning
→ dropbox-blue warning-hover
→ dropbox-blue-hover Rules (9 typed constraints)
error · 7 rules
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 rule
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 rule
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.