---
version: alpha
name: Dropbox
description: A warm paper-white canvas — not stark white but a soft oat tone — where a tight Sharp-Grotesk display sits in near-black, supporting copy warms to a brown-grey, and one electric Dropbox blue does all the calling-to-action. Cloud storage that reads as calm, editorial, and human.

colors:
  # Surface / canvas
  background: "#f7f5f2"        # the signature warm oat canvas — never pure white
  surface: "#ffffff"           # crisp white product cards floating on the oat
  surface-warm: "#efece6"      # deeper warm band for alternating sections

  # Ink / text
  ink: "#1e1919"               # near-black headlines and body — warm-tinted, not pure black
  ink-secondary: "#524a3e"     # warm brown-grey supporting copy
  ink-muted: "#8c8279"         # captions, metadata, bold borders
  ink-tertiary: "#999999"      # lowest-emphasis helper text
  on-dark: "#ffffff"           # text on the blue CTA and dark sections

  # Brand accent — the singular electric Dropbox blue
  primary: "#0061fe"           # the blue that fills every primary button
  primary-hover: "#004dc7"     # hover / pressed state 1
  primary-strong: "#003a97"    # deepest pressed blue
  primary-container: "#c9ddff" # tinted blue surface for chips
  primary-soft: "#b2cdff"      # lighter tint, decorative
  on-primary: "#ffffff"

  # Secondary accent — DIG purple
  accent-purple: "#78286e"     # editorial purple used in illustration / accents
  accent-purple-soft: "#c8aff0" # purple tint

  # Borders
  border: "#e0ddd6"            # warm hairline dividers and card edges
  border-strong: "#a69e92"     # input and outline-button borders (warm grey)

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Sharp Grotesk, Inter Tight, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.4px
  display:
    fontFamily: "Sharp Grotesk, Inter Tight, -apple-system, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.8px
  heading:
    fontFamily: "Sharp Grotesk, Inter Tight, -apple-system, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  nav-link:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Atlas Grotesk, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-strong}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Dropbox Design System

## Overview

Dropbox's redesigned site opens with a decision most software companies are too nervous to make: the canvas is not white. It is a warm, oaty paper tone (`{colors.background}` = `#f7f5f2`) that immediately reads as calm and editorial rather than clinical and techy. Onto that paper, crisp white product cards (`{colors.surface}`) float like prints on a mat, and near-black headlines (`{colors.ink}`, itself warm-tinted at `#1e1919` rather than pure black) anchor the page. The warmth is the whole personality — it makes a cloud-storage utility feel handmade, considered, almost stationery-like.

The type tells the same story. Display headlines are set in **Sharp Grotesk** — a tight, slightly condensed grotesque at medium weight (`{typography.display-hero}`, 500 with heavy negative tracking) that gives lines like "Get to work, with a lot less work" a dense, confident, almost-editorial compression. Body and UI copy switch to **Atlas Grotesk** (`{typography.body}`), a neutral humanist sans that sits quietly beneath the display face. Supporting paragraphs warm even further into a brown-grey (`{colors.ink-secondary}` = `#524a3e`) rather than the usual cool slate, reinforcing that nothing on this page is accidentally cold.

Then, against all that warmth, the one electric note: Dropbox blue (`{colors.primary}` = `#0061fe`). It is the brand's stamp and it does exactly one job — it fills the primary call-to-action ("Try Dropbox free," "Get started") and nothing else of consequence. The contrast of a saturated, almost-glowing blue against an oat-paper field is what makes the button feel like the only thing you can press. Cards carry generous 12-16px radii and a single soft, low shadow; the rest of the structure is handled by warm hairline borders (`{colors.border}`). The overall impression is a brand that grew up — quieter, warmer, more design-literate — while keeping its one unmistakable blue.

**Key Characteristics:**
- Warm oat canvas (`{colors.background}` = `#f7f5f2`) — deliberately not white; the signature move
- Crisp white product cards (`{colors.surface}`) float on the oat paper like mounted prints
- Tight **Sharp Grotesk** display at weight 500 with heavy negative tracking (`{typography.display-hero}` at -1.4px) — editorial, condensed
- Neutral **Atlas Grotesk** body (`{typography.body}`) sitting quietly beneath the display face
- Warm-tinted near-black ink (`{colors.ink}` = `#1e1919`), never pure `#000000`
- Brown-grey supporting copy (`{colors.ink-secondary}` = `#524a3e`) — warm, not cool slate
- One electric Dropbox blue (`{colors.primary}`) reserved strictly for the primary CTA
- Generous 12-16px card radii (`{rounded.md}`–`{rounded.lg}`) and a single soft low shadow
- Warm hairline borders (`{colors.border}`) do most structural separation
- An editorial purple (`{colors.accent-purple}`) appears only in illustration and decorative accents
- Pill radius (`{rounded.pill}`) reserved for tags and avatars

## Colors

### Surface & Canvas
- **Oat Paper** (`{colors.background}`): The signature warm canvas — the page is never pure white.
- **White** (`{colors.surface}`): Crisp product cards that float on the oat for contrast.
- **Warm Band** (`{colors.surface-warm}`): A deeper warm tone for alternating sections.

### Ink / Text
- **Warm Black** (`{colors.ink}`): Headlines and body. Warm-tinted `#1e1919`, not pure black.
- **Brown-Grey** (`{colors.ink-secondary}`): Supporting paragraph copy — warm, not cool slate.
- **Warm Grey** (`{colors.ink-muted}`): Captions, metadata, bold border tone.
- **Faint Grey** (`{colors.ink-tertiary}`): Lowest-emphasis helper text.

### Brand Accent
- **Dropbox Blue** (`{colors.primary}`): The singular stamp — fills the primary CTA and nothing else of consequence.
- **Blue Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): Hover and pressed states for the CTA.
- **Blue Container / Soft** (`{colors.primary-container}`, `{colors.primary-soft}`): Tinted blue surfaces for chips and decorative fills.

### Secondary Accent & Borders
- **Editorial Purple** (`{colors.accent-purple}`, `{colors.accent-purple-soft}`): Appears in illustration and accents, never as a CTA.
- **Warm Hairline** (`{colors.border}`) / **Warm Border** (`{colors.border-strong}`): Dividers, card edges, and input outlines — all warm-grey, never neutral grey.
- **Shadow Tint** (`{colors.shadow-soft}`): Opaque stand-in for the single soft card shadow (original was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: **Sharp Grotesk** — a tight, slightly condensed grotesque at medium weight. Loadable substitute: **Inter Tight** (named after the brand face in the stack).
- **Body & UI**: **Atlas Grotesk** — neutral humanist sans. Loadable substitute: **Inter**.
- **OpenType / tracking**: display sizes use heavy negative tracking (around -1.4px at 56px) for editorial compression; body sits at zero tracking.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 56px / 500 / -1.4px — the marquee headline (Sharp Grotesk) |
| `display` | 40px / 500 — large section titles (Sharp Grotesk) |
| `heading` | 32px / 500 — feature headings (Sharp Grotesk) |
| `heading-sub` | 24px / 500 — sub-section headings (Atlas Grotesk) |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body and inputs |
| `body-small` | 14px / 400 — dense supporting copy |
| `label` | 14px / 500 — UI labels |
| `button` | 16px / 500 — button text |
| `nav-link` | 15px / 500 — top navigation |
| `caption` | 13px / 400 — metadata, helper text |

### Principles
- **Two grotesques, two jobs**: a tight condensed display face carries personality; a neutral body face stays out of the way.
- **Compress the big**: heavy negative tracking on display sizes for an editorial, dense feel.
- **Medium weight, not bold**: display runs at 500, never heavy — confident lightness over weight.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Generous vertical rhythm (`{spacing.6xl}` = 128px) separates major marketing sections; component internals stay compact (`{spacing.md}`–`{spacing.xl}`).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a left text column paired with a floating white product card on the right
- Logo walls and social-proof rows span full width on the oat canvas

### Whitespace Philosophy
- **The oat is the design**: the warm canvas does emotional work that plain whitespace can't
- **Cards as objects**: white surfaces float on the paper, separated by space and warm hairlines
- **Generous breathing room**: large vertical gaps between sections keep the page feeling unhurried

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, warm hairline `{colors.border}` only | Section bands, most page content |
| Subtle (Level 1) | `0 2px 4px` at ~6% black | Resting cards, chips |
| Card (Level 2) | `0 16px 32px` at ~10% black (`{colors.shadow-soft}`) | Floating product cards — the signature soft lift |
| Focus Ring | 2px `{colors.primary}` ring | Focused inputs and interactive elements |

**Shadow Philosophy**: Dropbox uses almost no shadow at all. The single notable elevation is a soft, wide, low-opacity cast (`0 16px 32px` at ~10%) beneath the white product cards, which lifts them gently off the oat paper. Everything else relies on the warm hairline borders and the surface/canvas contrast itself. The restraint keeps the page reading as flat, calm editorial layout rather than a stack of floating UI chrome.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Small buttons, tight controls, tags |
| `md` | 12px | Buttons, cards, inputs — the default radius |
| `lg` | 16px | Larger cards, elevated surfaces |
| `xl` | 20px | Hero media containers, big panels |
| `pill` | 9999px | Avatars, status dots, pill tags |

The system is rounded and soft, anchored on a generous 12px default — friendly and modern, in keeping with the warm paper canvas, without tipping into playful over-rounding.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Dropbox blue (`{colors.primary}`) fill, white text, 12px radius. The only saturated element on the page. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, warm-black text, 12px radius. Hover fills `{colors.surface-warm}`.
- **`button-outline`** — Oat fill, warm-black text, warm hairline outline. Neutral tertiary action.

### Cards
- **`card`** / **`card-elevated`** — White surface on the oat canvas, 12-16px radius. The elevated variant carries the single soft shadow.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` warm outline, 12px radius. **`input-focus`** adds a 2px blue ring (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Oat background (matches canvas), warm hairline bottom border, medium-weight nav links. The blue "Get started" CTA persists at the right.

### Accent & Links
- **`link`** — Dropbox blue text (`{colors.primary}`), darkening to `{colors.primary-hover}` on hover.
- **`badge`** — Blue-container fill, strong-blue text, pill radius — for product tags.

## Do's and Don'ts

### Do
- Use the warm oat canvas (`{colors.background}` = `#f7f5f2`) — never pure white for the page
- Float crisp white cards (`{colors.surface}`) on the oat for contrast and depth
- Reserve Dropbox blue (`{colors.primary}`) strictly for the primary CTA — it's the only saturated element
- Set display in tight Sharp Grotesk at weight 500 with heavy negative tracking (-1.4px at 56px)
- Use warm-tinted ink (`{colors.ink}` = `#1e1919`) and brown-grey supporting copy (`{colors.ink-secondary}`)
- Keep all borders warm-grey (`{colors.border}`), never neutral cool grey
- Use a single soft, wide shadow (`{colors.shadow-soft}`) only beneath floating product cards
- Anchor radii on a generous 12px (`{rounded.md}`)

### Don't
- Don't set the page background to pure white — the warm oat is the brand's signature
- Don't use the blue (`{colors.primary}`) for anything but the primary CTA; keep its stamp value
- Don't reach for cool slate greys; every neutral here is warm-tinted
- Don't use pure black for text — Dropbox's ink is the warmer `#1e1919`
- Don't make display type bold or loose — it's medium weight (500) and tightly tracked
- Don't scatter shadows; the page is near-flat, separated by warm hairlines and surface contrast
- Don't bring the editorial purple (`{colors.accent-purple}`) into CTAs — it stays in illustration

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero text scales 56px → ~34px; nav collapses to a menu; the product card stacks below the copy, full-width |
| Tablet | 640–1023px | Two-column feature rows begin; product card sits beside copy at reduced width |
| Desktop | 1024–1199px | Full layout; copy-left / card-right hero |
| Large | ≥1200px | Max ~1200px container, centered; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Buttons run ~44px tall with `12px 20px` padding — comfortable for thumbs
- Nav links carry generous vertical padding in the mobile menu

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the blue "Get started" CTA persists
- **Hero**: copy and product card go side-by-side → stacked, card full-width
- **Type**: display drops from 56px toward ~34px while keeping proportional negative tracking
- **Spacing**: section padding compresses from ~128px toward ~64px

### Image Behavior
- Floating product cards reflow as grid/flex children; illustration scenes scale down and crop to focal region; logo walls wrap to fewer columns

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Oat Paper (`{colors.background}` = `#f7f5f2`)
- Surface: White (`{colors.surface}`)
- Text: Warm Black (`{colors.ink}` = `#1e1919`)
- Brand accent: Dropbox Blue (`{colors.primary}` = `#0061fe`)
- Secondary text: Brown-Grey (`{colors.ink-secondary}`)
- Border: Warm Hairline (`{colors.border}`)
- Primary CTA: Dropbox Blue (`{colors.primary}`), hover `{colors.primary-hover}`

### Example Component Prompts

- "Create a hero on warm oat (`{colors.background}` = `#f7f5f2`) with a 56px warm-black (`{colors.ink}`) headline in a tight grotesque (Sharp Grotesk / Inter Tight), weight 500, letter-spacing -1.4px, a 20px body paragraph (`{typography.body-large}`) in brown-grey (`{colors.ink-secondary}`), and a Dropbox-blue primary button (`{colors.primary}` fill, white text, `{rounded.md}` radius)"
- "Build a primary button: Dropbox blue (`{colors.primary}`) fill, white text (`{typography.button}`), `{rounded.md}` radius, `12px 20px` padding; hover deepens to `{colors.primary-hover}`"
- "Create a floating product card: white surface (`{colors.surface}`) on the oat canvas, `{rounded.lg}` radius, soft shadow (`0 16px 32px` at ~10% via `{colors.shadow-soft}`), warm hairline (`{colors.border}`) edge"
- "Design an input with label above: white fill, `{colors.border-strong}` warm outline, `{rounded.md}` radius; on focus add a 2px Dropbox-blue ring (`{colors.primary}`)"
- "Build a top nav: oat background matching the canvas (`{colors.background}`), warm hairline bottom border, medium-weight links (`{typography.nav-link}`), with a blue 'Get started' button (`{colors.primary}`) pinned right"
- "Render a product tag badge: blue-container (`{colors.primary-container}`) fill, strong-blue (`{colors.primary-strong}`) text, pill radius (`{rounded.pill}`), `4px 12px` padding"

### Iteration Guide

1. Start on the warm oat canvas (`{colors.background}` = `#f7f5f2`). If your page background is pure white, stop — the warmth is the brand.
2. Float white cards (`{colors.surface}`) on the oat for contrast; don't make cards the same color as the page.
3. Dropbox blue (`{colors.primary}`) is the only saturated element. If it appears outside the primary CTA, pull it back.
4. Use warm-tinted neutrals everywhere: `#1e1919` ink, brown-grey copy, warm hairline borders — never cool slate.
5. Set display in tight Sharp Grotesk at weight 500 with heavy negative tracking; keep body neutral and quiet.
6. Use a single soft, wide shadow (`{colors.shadow-soft}`) only under floating cards; everything else stays flat.
7. Anchor radii on `{rounded.md}` (12px) — rounded and soft, never sharp, never over-rounded.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Dropbox. Brand names and trademarks belong to their respective owners.