# Dropbox Design — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Dropbox. "Dropbox Design" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Dropbox Design
**Owner:** Dropbox
**Official documentation:** https://dropbox.design/
**Visual character:** Post-rebrand confidence: warm paper neutrals under one unmissable blue, Sharp Grotesk personality, and craft-tool sensibility.

---

## Summary

Bold-typography brand system for a file-and-collaboration product.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Dropbox Blue | `#0061fe` | `--dropbox-blue` | Primary brand and actions |
| Ink | `#1e1919` | `--dropbox-ink` | Primary text (warm black) |
| Graphite | `#736c64` | `--dropbox-graphite` | Secondary text |
| White | `#ffffff` | `--dropbox-white` | Surfaces |
| Paper | `#f7f5f2` | `--dropbox-paper` | Warm background |
| Border | `#d8d4d0` | `--dropbox-border` | Borders |
| Success | `#1d7c4d` | `--dropbox-success` | Success |
| Alert | `#9b0032` | `--dropbox-alert` | Errors |

## Typography

- **Display:** Sharp Grotesk — weights 400, 500, 700 — `'Sharp Grotesk', 'Atlas Grotesk', 'Helvetica Neue', sans-serif`
- **Body:** Atlas Grotesk — weights 400, 500 — `'Atlas Grotesk', 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `52px` | `60px` |
| title-1 | `30px` | `38px` |
| title-2 | `22px` | `30px` |
| body | `16px` | `26px` |
| small | `13px` | `20px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `36px` · `52px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| default | `8px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 1px 4px rgba(0,0,0,0.1)` |

## Quick start (CSS)

```css
/* Dropbox Design — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://dropbox.design/ */

:root {
  /* Color */
  --dropbox-blue: #0061fe; /* Primary brand and actions */
  --dropbox-ink: #1e1919; /* Primary text (warm black) */
  --dropbox-graphite: #736c64; /* Secondary text */
  --dropbox-white: #ffffff; /* Surfaces */
  --dropbox-paper: #f7f5f2; /* Warm background */
  --dropbox-border: #d8d4d0; /* Borders */
  --dropbox-success: #1d7c4d; /* Success */
  --dropbox-alert: #9b0032; /* Errors */

  /* Typography */
  --font-display: 'Sharp Grotesk', 'Atlas Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Atlas Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-display: 52px /* line-height 60px */;
  --text-title-1: 30px /* line-height 38px */;
  --text-title-2: 22px /* line-height 30px */;
  --text-body: 16px /* line-height 26px */;
  --text-small: 13px /* line-height 20px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 36px;
  --space-5: 52px;

  /* Radius */
  --radius-small: 4px;
  --radius-default: 8px;

  /* Elevation */
  --shadow-card: 0 1px 4px rgba(0,0,0,0.1);
}
```

## Origin

Dropbox's 2017 rebrand introduced one of the most editorial-feeling design systems in software — Sharp Grotesk display type, saturated color, and bold imagery, paired with the more restrained product UI used inside the desktop, web, and mobile apps. The brand and the product system live as related but distinct surfaces.

## Governance

Dropbox's brand and design teams maintain the public guidance at dropbox.design; the production component implementations are internal. The system has matured through several brand evolutions while keeping a recognizable typographic voice.

## Known for

- Editorial-grade display typography (Sharp Grotesk) used at unusually large scale across the brand surface.
- Tight integration of brand and product — the file-management UI feels like the same company as the marketing site, which is rarer than it should be.
- File and collaboration patterns built for async workflows — selection states, multi-user presence, and conflict resolution are first-class.

## Underrated

- The illustration and motion library — used heavily on dropbox.design — is internally consistent and themeable in a way most public brand sites are not.
- Their accessibility documentation around screen readers and keyboard navigation in file-tree UIs is thorough; tree controls are a hard problem and they take it seriously.

## Watch out for

- Sharp Grotesk is licensed; the brand isn't directly reusable. The patterns are.
- Brand surface and product surface are intentionally different. Picking up only the brand voice for a SaaS UI produces an uncanny mismatch.

## Components worth studying

- **FileTile** — Selectable file representation with preview, action overflow, and shared-with avatar stack.
- **ShareDialog** — Permission-aware sharing surface — link/people modes, role selection, expiry, and revocation.
- **Presence indicator** — Live-collaborator avatar group with overflow handling and offline / typing states.

## When to choose Dropbox Design

Study Dropbox if you're building a file-collaboration product or want to learn how a strong typographic brand can coexist with a quieter product UI. Don't expect the brand surface to map onto your application chrome — they're deliberately different.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Dropbox Design by Dropbox — Bold-typography brand system for a file-and-collaboration product. Character: Post-rebrand confidence: warm paper neutrals under one unmissable blue, Sharp Grotesk personality, and craft-tool sensibility. Use a primary colour near #0061fe, the typeface "Atlas Grotesk" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Lean into what it's known for: Editorial-grade display typography (Sharp Grotesk) used at unusually large scale across the brand surface. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Dropbox Design](https://dropbox.design/)
- [Dropbox brand](https://brand.dropbox.com/)
- [The 2017 rebrand essay](https://dropbox.design/article/our-brand-evolved)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/dropbox-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._