Dropbox

---
name: dropbox-com-design-system
source: https://www.dropbox.com/
extracted: 2026-07-03
theme: dark  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#1e1919"
  ink: "#ebe9e6"
  text-muted: "#736c64"
  surface: "#2d2b29"
  hairline: "#44403d"
  accent: "#f7f5f2"  # pale-orange
  accent-2: "#3984ff"  # blue
  accent-3: "#0061fe"  # blue
fonts:
  primary: "SharpGrotesk"  # low-confidence: usage counts are low and close
---

# Dropbox: Secure cloud storage, file sharing, and more — Design System

Extracted from **https://www.dropbox.com/** on 2026-07-03.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as dark: measured neutral usage weighs 131 dark against 31 light. The palette is chromatic: 12 saturated values against 9 neutrals, led by pale-orange (`#f7f5f2`). Font usage counts are low and close together (SharpGrotesk: 12, AtlasGrotesk: 12, SharpGroteskSuperCondensed: 6) — the extractor can't confidently call a primary face from CSS alone. Geometry mixes sharp corners (4px) with full pills. No box-shadows were found — depth comes from color contrast, not elevation.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 63% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is dark (measured neutral weight 131:31). Don't flip individual sections to the opposite mode.
- `4px` is the workhorse radius (x4); treat the other radii as exceptions, not options.
- No elevation shadows were found — build depth with tonal contrast between surfaces, not box-shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-100` | `#ebe9e6` | 16 | **ink** — lightest neutral, highest contrast against canvas |
| `neutral-200` | `#d3cec9` | 15 | — |
| `neutral-300` | `#bbb5ae` | 12 | — |
| `neutral-500` | `#8e8b87` | 17 | — |
| `neutral-600` | `#736c64` | 19 | **text-muted** — most-used mid-luminance neutral |
| `neutral-700` | `#5b5650` | 11 | — |
| `neutral-800` | `#44403d` | 21 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-900` | `#2d2b29` | 10 | **surface** — neutral closest to canvas luminance |
| `neutral-950` | `#1e1919` | 51 | **canvas** — darkest neutral, matches the measured dark-leaning theme |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `pale-orange` | `#f7f5f2` | 88 | **accent** — most-used chromatic color |
| `blue` | `#3984ff` | 30 | **accent-2** — supporting chromatic color |
| `blue-2` | `#0061fe` | 27 | **accent-3** — supporting chromatic color |
| `yellow` | `#fad24b` | 25 | — |
| `lime` | `#b4dc19` | 25 | — |
| `orange` | `#fa551e` | 17 | — |
| `pale-blue` | `#b4d1ff` | 16 | — |
| `pink` | `#9b0032` | 16 | — |
| `deep-teal` | `#0f503c` | 14 | — |
| `orange-2` | `#9b6400` | 13 | — |
| `deep-orange` | `#684505` | 12 | — |
| `indigo` | `#c8aff0` | 11 | — |

## Typography

Usage counts here are low and close together, so no family can be confidently called primary from CSS declarations alone — sites that set fonts via shorthand or JS under-count. Verify visually. Full list by usage:

| Family | Usage |
| --- | --- |
| SharpGrotesk | 12 |
| AtlasGrotesk | 12 |
| SharpGroteskSuperCondensed | 6 |
| SharpGroteskCondensed | 6 |
| SharpGroteskWide | 6 |
| Atlas Grotesk Web | 4 |
| Sharp Grotesk | 4 |
| Sharp Grotesk 23 | 3 |

**Size scale (px):** `10`, `12`, `14`, `16`, `18`, `20`, `24`, `32`, `40`, `48`, `72`

**Weights in use:** `100` (x2), `300` (x2), `400` (x25), `500` (x21), `600` (x5), `700` (x9)

## Spacing

Most-used values (px): `1`, `2`, `3`, `5`, `6`, `8`, `10`, `12`, `14`, `16`, `24`, `28`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `4px` | 4 |
| `radius-md` | `8px` | 1 |
| `radius-lg` | `40px` | 1 |
| `radius-full` | `50%` | 2 |

### Focus rings (spread-only box-shadows, kept out of the elevation scale)

- `0 0 0 2px #a0d1fa` (x2)

## Breakpoints

`480px`, `768px`, `1024px`, `1280px`, `1440px`, `1920px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #f7f5f2 */
  color: var(--color-canvas); /* #1e1919 — contrast 16.0:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #2d2b29 */
  border: 1px solid var(--color-hairline); /* #44403d */
  border-radius: 4px; /* most-used finite radius */
  /* no shadow — this system builds depth with tonal contrast */
}

.input {
  background: var(--color-canvas); /* #1e1919 */
  color: var(--color-ink); /* #ebe9e6 — contrast 14.3:1 */
  border: 1px solid var(--color-hairline); /* #44403d */
  border-radius: 4px;
  /* placeholder color: var(--color-text-muted) #736c64 */
}

.nav {
  background: var(--color-canvas); /* #1e1919 */
  border-bottom: 1px solid var(--color-hairline); /* #44403d */
  color: var(--color-ink); /* #ebe9e6 */
  /* inactive links: var(--color-text-muted) #736c64 */
  /* active link: var(--color-accent) #f7f5f2 — contrast vs canvas 16.0:1 */
}

.modal {
  background: var(--color-surface); /* #2d2b29 */
  border-radius: 4px;
  border: 1px solid var(--color-hairline); /* no shadows mined — hairline instead */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #ebe9e6 */
}

.input-error {
  border-color: #fa551e; /* mined token: orange */
  /* error text: #fa551e on canvas — contrast 5.3:1 */
}

.input-success {
  border-color: #0f503c; /* mined token: deep-teal */
}
```

## Observations

- 9 of 21 extracted colors are neutrals.
- 6 breakpoints, from 480px to 1920px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --scheme__color: light;
  --scheme__inverse__color: dark;
  --spacing__base_unit: 8px;
  --spacing__unit--0_5: 4px;
  --spacing__unit--1: 8px;
  --spacing__unit--1_5: 12px;
  --spacing__unit--2: 16px;
  --spacing__unit--2_5: 20px;
  --spacing__unit--3: 24px;
  --spacing__unit--4: 32px;
  --spacing__unit--5: 40px;
  --boxshadow__elevation1: 0px 8px 32px #1e191908, 0px 8px 16px #1e191908, 0px 4px 8px #1e191908, 0px 2px 4px #1e191908, 0px 1px 2px #1e191908;
  --__desktopMacBodyFontStack: Atlas Grotesk Web, Atlas Grotesk, system-ui;
  --__titleFontStack: Sharp Grotesk, SharpGrotesk, Sharp Grotesk KR, Sharp Grotesk Thai, var(--__bodyFontStack);
  --type__body__monospace--fontweight__strong: 600;
  --color__core__primary: #1e1919;
  --color__core__secondary: #f7f5f2;
  --color__core__accent: #0061fe;
  --color__button__primary__hover: #0057e5;
  --color__button__primary__active: #0050d0;
  --color__standard__text: #1e1919;
  --color__standard__border: #a69e9299;
  --color__standard__background: #fff;
  --color__faint__text: #524a3ed1;
  --color__faint__border: #a6917133;
  --color__faint__background: #f7f5f2;
  --color__disabled__text: #524a3e66;
  --color__disabled__border: #c0bbb4;
  --color__disabled__background: #c0bbb4;
  --color__elevated__background: #fbfaf9;
  --color__attention__text: #0061fe;
  --color__attention__border: #0061fe;
  --color__attention__border--faint: #0061fe52;
  --color__attention__background: #0061fe29;
  --color__attention__background--faint: #0061fe14;
  --color__success__text: #2d7a02;
  --color__success__border: #2d7a02;
  --color__success__border--faint: #2d7a0252;
  --color__success__background: #2d7a021f;
  --color__warning__text: #9b6400;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-pale-orange`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.