---
version: alpha
name: Dropbox
website: "https://www.dropbox.com"
description: >-
  Dropbox's marketing surface anchors on a warm cream canvas "#f7f5f2" paired with near-black ink "#1e1919" and a single electric Dropbox Blue "#0061fe" reserved for the lone filled CTA per band — never twice in the same hero. Display headlines run Sharp Grotesk at weight 500 with proportional line-heights, body type runs Atlas Grotesk Web at 14 to 20px, and the system favors 12 to 16px corner radii on cards with 100px pill buttons. The page reads as a cloud-storage workspace dressed in warm-neutral chrome rather than fintech indigo or developer-tool dark canvas.
seo:
  title: "Dropbox Design System for React — Blue #0061fe, Sharp Grotesk, 17 components"
  metaDescription: "Dropbox's design system as a DESIGN.md file. Blue #0061fe CTA, cream #f7f5f2 canvas, Sharp Grotesk + Atlas Grotesk, 20 colors, 17 components. For React, Next.js, and AI tools."
  highlights:
    - "Single voltage CTA — Dropbox Blue #0061fe carries the lone filled pill per band, never paired with a second filled button"
    - "Warm cream canvas #f7f5f2 instead of pure white — the brand softens its workspace identity with a 4-percent warm tint"
    - "Dual-typeface contrast — Sharp Grotesk at weight 500 for display headlines, Atlas Grotesk Web for every body and UI surface"
    - "Two-radius geometry — 12 to 16px on cards and surfaces, 100px on every interactive pill button"
    - "Inverted security band — near-black #000000 dark surface drops into the middle of a cream marketing flow for the security pitch"
  tags:
    - "Productivity & SaaS"
    - "Documentation & Knowledge"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Dropbox's marketing page opens on a warm cream wash — not white — at "#f7f5f2", with the headline "Get to work, with a lot less work" set in Sharp Grotesk at 40px weight 500 against near-black ink "#1e1919". The lone filled CTA is a Dropbox Blue "#0061fe" pill carrying "Try Dropbox free", and a soft-gray product mockup hovers to the right of the type column. The page never doubles up on filled buttons in the same band, never gradients its hero, and never reaches for pure black on its primary canvas. The voice is workspace, not consumer; the chrome is warm-neutral, not fintech-blue.

    This page packages the surface into a single DESIGN.md file. Inside: 20 color tokens covering the cream canvas, near-black ink, Dropbox Blue voltage, the deep sapphire press state "#0044af", and the supporting brown-warm hairline tier, plus the inverted "#000000" dark band that carries the security pitch mid-page; 12 typography tokens running Sharp Grotesk at 18 to 40px for display and Atlas Grotesk Web at 14 to 20px for body and UI; 5 corner radii from 8px chips to the 100px button pill; 8 spacing values resolving to a 4 / 8 / 12 / 16 / 24px rhythm; and 17 components covering the primary pill, outline secondary, text input, top nav, customer logo strip, feature card, dark security band, and the eyebrow-and-headline pairing that opens every section. Format follows the Google Labs DESIGN.md spec.

    Feed the file to Claude, Cursor, or GitHub Copilot. The agent reproduces Dropbox's warm-neutral discipline — cream canvas, single-blue CTA hierarchy, Sharp-and-Atlas typeface pairing, 12 to 16px card radii with 100px button pills — instead of a generic SaaS theme. Reference tokens directly inside Tailwind config or CSS variables. This system is worth studying for one reason: it shows that a 700-million-user productivity brand can stay warm and bookish on the page while keeping a single electric voltage in reserve, a stance most workspace competitors abandon for either dark dashboards or pastel maximalism.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.dropbox.com"
      title: "Dropbox — official site"
      description: "Cloud storage, file sharing, and Dash content search for teams of every size."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Dropbox's primary brand color?"
      answer: "Dropbox's primary is Dropbox Blue #0061fe — bound to the CSS variable --color__core__accent — reserved for the single filled CTA per band ('Try Dropbox free') and the brand wordmark. The pressed and link-emphasis state shifts to a deeper sapphire #0044af (--color__sapphire--90). Both colors register as low-frequency on the page (7 and 6 occurrences respectively) because Dropbox holds them back — the rest of the surface runs on cream #f7f5f2, near-black ink #1e1919, and the warm-neutral hairline #524a3e. That scarcity is what makes the blue read as voltage rather than chrome."
    - id: "typography"
      title: "What typefaces does Dropbox use?"
      answer: "Dropbox pairs two families. Sharp Grotesk carries display headlines at 40px / weight 500 for the hero, 26px / 500 for section openers, and 18px / 500 for sub-headings — its geometric construction does the wayfinding work. Atlas Grotesk Web (the dominant family by volume — 50 paragraph instances at 14px / weight 400) handles every body paragraph, button label, nav link, and footer item. The fallback stack walks Atlas Grotesk → AtlasGrotesk → -apple-system → system-ui → Segoe UI → Helvetica Neue. Inter at weight 400 to 500 is the closest open-source substitute for Atlas; Space Grotesk approximates the Sharp Grotesk display tier."
    - id: "canvas-color"
      title: "Why is the canvas cream instead of white?"
      answer: "The default page background is #f7f5f2 — a 4-percent warm tint of white — bound to --color__opacity--lighten3 and --color__inverse__core__primary. With 359 page occurrences, it is the dominant surface color, edging out pure white. The cream tint pulls the brand toward a bookish workspace identity rather than the cool clinical white that fintech and developer-tool brands lean on. A secondary cream #eee9e2 lifts feature surfaces a half-step, and pure white shows up only inside product UI mockups, never as a marketing-page canvas."
    - id: "shape-language"
      title: "Why does Dropbox use both 12px cards and 100px pill buttons?"
      answer: "The radii split is intentional. Cards, feature surfaces, and the dark security band sit at 12 to 16px (`{rounded.md}` and `{rounded.lg}`) — geometry borrowed from document-block conventions. Every interactive pill button — the primary blue CTA, the secondary 'Learn more' outline, and the customer-logo navigation arrow — sits at 100px (`{rounded.pill}`), so even at 36px height the corner reads as fully rounded. Outline buttons match pill geometry so the two button styles remain visually paired. The 8px radius (`{rounded.sm}`) is reserved for compact chips and product UI screenshots embedded inside the mockup."
    - id: "dark-band"
      title: "What is the dark band in the middle of the page?"
      answer: "Dropbox's marketing flow drops into a full-bleed near-black ('#000000', 917 occurrences across the page — the highest-frequency single color) for one band only: the 'Security never comes second' section. White text, the same Atlas Grotesk hierarchy, and a blue 'Try Dropbox free' CTA sit over the dark surface, with three customer testimonial cards rendered as dark slate panels. The band returns to cream immediately after. The inverted polarity is the brand's deliberate move — security is the only message that earns a dark surface, every other section stays warm-neutral."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of areas. Form validation states (success, error, warning text colors) live in the authenticated Dropbox web app rather than the marketing surface, and weren't extractable from the homepage capture. Mobile-specific responsive scaling (Sharp Grotesk drops from 40 → 28px on mobile but exact breakpoints weren't traced) is approximated. The product UI mockups embedded in feature cards use the in-app palette (--dig-color tokens) which differs from the marketing token set. Animation specs — the slow drift on the hero mockup and the customer-logo strip auto-scroll — were not captured. Sub-brand surfaces (Dropbox Dash, Dropbox Sign, Dropbox Replay) carry their own accent palettes layered on top of the core blue system."

colors:
  primary: "#0061fe"
  primary-press: "#0044af"
  link-classic: "#0000ee"
  on-primary: "#f7f5f2"
  ink: "#1e1919"
  ink-mute: "#524a3e"
  ink-warm: "#393633"
  hairline: "#a69171"
  hairline-soft: "#d3cec9"
  on-dark: "#f7f5f2"
  on-dark-mute: "#8e8b87"
  canvas: "#f7f5f2"
  canvas-lift: "#eee9e2"
  surface-dark: "#000000"
  surface-dark-elevated: "#292c31"
  surface-info-soft: "#deebff"
  accent-plum: "#78286e"
  accent-orchid: "#c8aff0"
  accent-canopy: "#175641"
  accent-sunset: "#f7561d"
  accent-yellow: "#eecc5d"

typography:
  display-xl:
    fontFamily: "Sharp Grotesk, SharpGrotesk, Atlas Grotesk Web, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.4px"
  display-lg:
    fontFamily: "Sharp Grotesk 23, Atlas Grotesk Web, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "-0.2px"
  display-md:
    fontFamily: "Sharp Grotesk, SharpGrotesk, Atlas Grotesk Web, system-ui, sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0
  heading-md:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  heading-sm:
    fontFamily: "Sharp Grotesk, SharpGrotesk, Atlas Grotesk Web, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0
  body-lg:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0
  label-md:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0
  label-sm:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0
  button-md:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0
  caption:
    fontFamily: "Atlas Grotesk Web, AtlasGrotesk, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0

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

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  xxl: "48px"
  huge: "64px"

components:
  button-primary-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 24px"
    height: "36px"
  button-primary-pill-pressed:
    backgroundColor: "{colors.primary-press}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 24px"
    height: "36px"
  button-secondary-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 24px"
    height: "36px"
    border: "1px solid {colors.ink}"
  button-on-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 24px"
    height: "36px"
  button-ghost-on-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 24px"
    height: "36px"
    border: "1px solid {colors.on-dark}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: "44px"
    border: "1px solid {colors.hairline-soft}"
  text-input-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: "44px"
    border: "2px solid {colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "60px"
  nav-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
  promo-bar:
    backgroundColor: "{colors.surface-info-soft}"
    textColor: "{colors.primary-press}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
  hero-eyebrow:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mute}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: "0"
  hero-headline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.sm}"
    padding: "0"
  card-feature:
    backgroundColor: "{colors.canvas-lift}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  card-industry:
    backgroundColor: "{colors.canvas-lift}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "16px"
  band-dark-security:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "64px 24px"
  testimonial-card-dark:
    backgroundColor: "{colors.surface-dark-elevated}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "24px"
  footer-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark-mute}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: "64px 24px"
---

## Overview

Dropbox's marketing page opens on a warm cream wash — not white — at `{colors.canvas}` (`"#f7f5f2"`), with Sharp Grotesk display type at 40px weight 500 sitting on near-black ink `{colors.ink}` (`"#1e1919"`). The lone filled CTA is Dropbox Blue `{colors.primary}` (`"#0061fe"`) carrying "Try Dropbox free". Below the hero, a customer-logo strip cycles MGM, McLaren, Lincoln Center, Hydro Flask, and Zoom across a horizontal band. Three feature sections follow — Dash search, organization, fast sharing — each pairing a Sharp Grotesk headline with an Atlas Grotesk body paragraph and a product UI mockup. Then the page inverts: a full-bleed `{colors.surface-dark}` (`"#000000"`) band carries the "Security never comes second" pitch, and three dark testimonial cards sit inside. The flow returns to cream for the industries grid and articles strip, and closes on a dark footer.

**Warm-neutral discipline**: where most productivity brands lean either pastel-maximalist (Notion) or pure-white-clinical (Linear), Dropbox holds the entire page on a 4-percent warm tint — cream `"#f7f5f2"` rather than the conventional white — paired with near-black `"#1e1919"` rather than pure black. The single concession to chromatic voltage is Dropbox Blue, which carries a rare 7 page occurrences across the entire capture, all of them either CTAs, brand wordmark, or focus rings. The rest of the surface lives on a warm-neutral chrome ladder: cream `"#f7f5f2"` → cream-lift `"#eee9e2"` → ink-mute `"#524a3e"` → ink `"#1e1919"`.

**Inverted security band**: the only place the page reaches for pure `"#000000"` is the security section in the middle of the marketing flow. The dark band is band-scoped (a single full-bleed rectangle inside the cream page), not a global dark theme, and it carries its own internal hierarchy — Sharp Grotesk headline, three `{colors.surface-dark-elevated}` (`"#292c31"`) testimonial cards, and the same blue CTA. Every other surface returns immediately to cream. The inversion is a deliberate signal that security is the load-bearing argument, not a feature tile.

**Key Characteristics:**
- Cream canvas `{colors.canvas}` (`"#f7f5f2"`) — 359 page occurrences — as the dominant surface color, replacing pure white.
- Single-blue CTA voltage: filled `{colors.primary}` (`"#0061fe"`) pill is the only filled button per band, one per section.
- Sharp Grotesk display tier (18 / 26 / 40px at weight 500) paired with Atlas Grotesk Web body tier (14 / 16 / 20px at weight 400 / 500).
- 100px pill buttons (`{rounded.pill}`) on every interactive button, 12 to 16px radius on every card and surface.
- Inverted dark band — full-bleed `"#000000"` for the security section only, then back to cream.
- Customer logo strip in `{colors.ink}` (`"#1e1919"`) word-mark silhouettes — never logos at brand color, never on a tinted background.

## Colors

> **Source page:** home (`https://www.dropbox.com/`).

### Brand & Accent
- **Dropbox Blue** (`{colors.primary}` — `"#0061fe"`) — frequency 7. Used as text (1), bg (3), border (3). The brand's single filled-CTA voltage, bound to `--color__core__accent`. Pill button, brand wordmark, focus state.
- **Dropbox Blue Press** (`{colors.primary-press}` — `"#0044af"`) — frequency 6. Used as text (3), border (3). The pressed and emphasis lift on the primary, bound to `--color__sapphire--90`. Also carries link emphasis on the cream promo bar.
- **Link Classic** (`{colors.link-classic}` — `"#0000ee"`) — frequency 4. Used as text (2), border (2). The default unstyled-link blue retained on legal nav links — a small, deliberate web-platform-default signal in the footer.
- **Surface Info Soft** (`{colors.surface-info-soft}` — `"#deebff"`) — frequency 1. Background tint for the top promo strip ("Meet Dropbox Dash, now in private beta") sitting above the nav. Bound to `--dig-color__primary__surface`.

### Surface
- **Canvas** (`{colors.canvas}` — `"#f7f5f2"`) — frequency 359. Used as text (168), bg (25), border (166). The default page background — a 4-percent warm tint of white that pulls the brand toward bookish-workspace rather than clinical-cool. Bound to `--color__opacity--lighten3` and `--color__inverse__core__primary`.
- **Canvas Lift** (`{colors.canvas-lift}` — `"#eee9e2"`) — frequency 9. Used as bg (9). Half-step elevation above canvas, used for industry cards and the "Discover, learn, thrive" article strip. Bound to `--dig-color__selection__surface`.
- **Surface Dark** (`{colors.surface-dark}` — `"#000000"`) — frequency 917. Used as text (457), bg (2), border (457), gradient (1). Reserved for the security band and the footer — the only places the page reaches for pure black. The high text frequency reflects how many small UI labels use it inside product mockups.
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — `"#292c31"`) — frequency 1. Used as gradient (1). The testimonial-card fill on the dark security band — a slate that lifts a half-step above pure black.

### Text
- **Ink** (`{colors.ink}` — `"#1e1919"`) — frequency 243. Used as text (118), bg (7), border (118). The default body and headline text color across the entire page — a near-black with a barely-perceptible warm bias. Bound to `--dwg-color__secondary__base`.
- **Ink Mute** (`{colors.ink-mute}` — `"#524a3e"`) — frequency 82. Used as text (41), border (41). Secondary text — sub-headings, eyebrow labels, supporting body copy beneath display headlines. The warm-brown bias matches the cream canvas. Bound to `--color__utility__overlay`.
- **On Dark** (`{colors.on-dark}` — `"#f7f5f2"`). Cream text on the dark security band — never pure white, so the warm-neutral discipline holds across light-and-dark inversions.
- **On Dark Mute** (`{colors.on-dark-mute}` — `"#8e8b87"`). Footer legal text and column sub-labels on the dark footer.
- **Ink Warm** (`{colors.ink-warm}` — `"#393633"`). Used inside product UI mockups as a secondary slate. Bound to `--dig-color__secondary__base--state-1`.

### Hairline
- **Hairline** (`{colors.hairline}` — `"#a69171"`). Warm-brown hairline for cream-on-cream separation. Bound to `--color__faint__border`.
- **Hairline Soft** (`{colors.hairline-soft}` — `"#d3cec9"`). Used as bg (1). Softer cream hairline for input borders and card outlines. Bound to `--dig-color__secondary__surface--state-2`.

### Brand-Library Accent (Reserved)
The Dropbox token system declares a wider accent ladder for product-UI use that does not appear on the marketing canvas in any filled form. Use sparingly inside in-app illustrations only.
- **Plum** (`{colors.accent-plum}` — `"#78286e"`). Bound to `--dig-color__accent__purple`.
- **Orchid** (`{colors.accent-orchid}` — `"#c8aff0"`). Bound to `--dig-color__identity__purple`.
- **Canopy** (`{colors.accent-canopy}` — `"#175641"`). Bound to `--dig-color__identity__on-green`.
- **Sunset** (`{colors.accent-sunset}` — `"#f7561d"`). Bound to `--color__accent__sunset`.
- **Yellow** (`{colors.accent-yellow}` — `"#eecc5d"`). Bound to `--dig-color__identity__yellow`.

## Typography

### Font Family

Dropbox pairs two custom families. **Sharp Grotesk** (proprietary) carries every display headline at weights 400 and 500, with a wider "Sharp Grotesk 23" variant at 32px for section openers. **Atlas Grotesk Web** (proprietary, by Commercial Type) handles every body paragraph, button label, nav link, footer item, and UI label — by raw frequency it is the dominant family on the page (50 paragraph instances at 14px alone).

The fallback stack walks `AtlasGrotesk → -apple-system → system-ui → "Segoe UI" → "Helvetica Neue" → Helvetica → Arial → sans-serif`. The open-source path: **Inter** at weight 400 to 500 for Atlas Grotesk, **Space Grotesk** at weight 500 for Sharp Grotesk — the proportional rhythm transfers closely.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Sharp Grotesk | 40px | 500 | 1.2 | Hero headline |
| `{typography.display-lg}` | Sharp Grotesk 23 | 32px | 400 | 1.2 | Section opener |
| `{typography.display-md}` | Sharp Grotesk | 26px | 500 | 1.3 | Compact section title |
| `{typography.heading-md}` | Atlas Grotesk Web | 20px | 500 | 1.5 | Sub-heading on cream |
| `{typography.heading-sm}` | Sharp Grotesk | 18px | 500 | 1.2 | Feature card title |
| `{typography.body-lg}` | Atlas Grotesk Web | 20px | 400 | 1.5 | Hero sub-paragraph |
| `{typography.body-md}` | Atlas Grotesk Web | 16px | 400 | 1.5 | Standard body |
| `{typography.body-sm}` | Atlas Grotesk Web | 14px | 400 | 1.57 | Footer, captions, table labels |
| `{typography.label-md}` | Atlas Grotesk Web | 16px | 500 | 1.2 | Nav links |
| `{typography.label-sm}` | Atlas Grotesk Web | 14px | 500 | 1.43 | Industry card label |
| `{typography.button-md}` | Atlas Grotesk Web | 16px | 500 | 1.2 | Primary and secondary pill labels |
| `{typography.caption}` | Atlas Grotesk Web | 14px | 400 | 1.2 | Footer legal copy |

### Principles
- **Dual-family contrast.** Sharp Grotesk carries display work; Atlas Grotesk Web carries everything else. The two families together do what one would not — geometric authority on headlines, neutral readability everywhere else.
- **Weight 500, never 600+.** Display sits at weight 500. Atlas Grotesk Web body sits at 400 with 500 for labels and buttons. Above weight 500 the page picks up an enterprise-trade-show muscle the brand resists.
- **Proportional line-height.** Display tokens use line-height 1.2; body sizes use 1.5 to 1.57. No tight negative letter-spacing — the brand reads roomy and bookish.

## Layout

### Spacing System
- **Base unit:** 4px (with 8 / 12 / 16 / 24px as the primary rhythm tokens).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.huge}` 64px.
- **Section padding:** 64 to 96px on marketing surfaces; 48 to 64px on the dark security band.
- **Card internal padding:** 24px on feature cards; 16px on compact industry tiles.

### Grid & Container
- Marketing page centers on a 1248px container with the dark security band extending edge-to-edge.
- Industries grid is 3-up at desktop, collapses to 2-up at tablet, 1-up at mobile.
- Customer logo strip auto-scrolls infinitely at ~40 pixels per second.

### Whitespace Philosophy
Cream space carries the page. Sections gap at 80 to 120px; type columns max out at ~560px width with a 24px gutter to the adjacent product mockup. The dark security band breaks the rhythm deliberately — its internal 64px padding gives the testimonial cards room to breathe against pure black.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Default cream canvas |
| 1 | `box-shadow: rgba(0,0,0,0.04) 0 1px 2px` | Hairline lift on feature cards |
| 2 | `box-shadow: rgba(0,0,0,0.08) 0 8px 24px` | Hero product mockup card |
| 3 | Inverted dark band | The security section reverses polarity — the brand's primary depth medium is contrast, not literal shadow |

### Decorative Depth
The hero product mockup is a multi-layer composite — three nested product UI cards (file browser, share dialog, properties pane) stacked at z-axis offsets with a soft Level 2 shadow underneath. The dark security band uses no shadows; its depth comes from polarity inversion alone.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.sm}` | `"8px"` | Form inputs, compact chips, product UI screenshots |
| `{rounded.md}` | `"12px"` | Feature cards, industry tiles, testimonial cards |
| `{rounded.lg}` | `"16px"` | Hero product mockup, dark security band |
| `{rounded.xl}` | `"20px"` | Large card frames inside the article strip |
| `{rounded.pill}` | `"100px"` | Every interactive pill button, primary and secondary |

### Photography & Mockup Geometry
Photography inside industry cards and the article strip uses inset 4:3 ratios with a 12px `{rounded.md}` corner — no shadow. Product UI mockups render inside 16px `{rounded.lg}` containers with a soft Level 2 shadow. Customer logos are rendered as silhouettes at full opacity in `{colors.ink}` — never tinted or boxed.

## Components

### Buttons

**`button-primary-pill`** — the dominant CTA system-wide.
- Background `{colors.primary}` (`"#0061fe"`), text `{colors.on-primary}` (`"#f7f5f2"`), type `{typography.button-md}`, padding `8px 24px`, rounded `{rounded.pill}` `"100px"`, height `"36px"`.
- Pressed state `button-primary-pill-pressed` shifts background to `{colors.primary-press}` (`"#0044af"`).

**`button-secondary-outline`** — the paired alternative.
- Background `{colors.canvas}` (`"#f7f5f2"`), text `{colors.ink}` (`"#1e1919"`), 1px `{colors.ink}` hairline border, same pill geometry. Used for "Learn more" alongside the primary "Try Dropbox free".

**`button-on-dark`** — the blue CTA repeated on the dark security band.
- Same fill as the primary; the brand does not invert the CTA to white-on-blue. Blue stays blue across both light and dark surfaces.

**`button-ghost-on-dark`** — outline alternative on dark.
- Background `{colors.surface-dark}` (`"#000000"`), text `{colors.on-dark}` (`"#f7f5f2"`), 1px `{colors.on-dark}` hairline border, pill geometry. The "Learn more" pair on the security band.

### Inputs

**`text-input`** — standard form field.
- Background `{colors.canvas}` (`"#f7f5f2"`), text `{colors.ink}`, type `{typography.body-md}`, padding `12px 16px`, rounded `{rounded.sm}` `"8px"`, 1px `{colors.hairline-soft}` (`"#d3cec9"`) border, height `"44px"`.
- Focus state `text-input-focused`: border swaps to 2px `{colors.primary}` (`"#0061fe"`).

### Navigation

**`top-nav`** — top nav bar over the cream canvas.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, padding `12px 24px`, height `"60px"`. Wordmark logo left, primary nav center ("Products / Solutions / Enterprise / Pricing"), secondary actions right ("Contact sales / Get app / Sign up / Log in"), and the `button-primary-pill` "Get started" pinned to the far right.

**`nav-link`** — individual nav item.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, padding `8px 12px`. Hover state lifts to `{colors.canvas-lift}`.

**`promo-bar`** — top-of-page Dash announcement strip.
- Background `{colors.surface-info-soft}` (`"#deebff"`), text `{colors.primary-press}` (`"#0044af"`), type `{typography.body-sm}`, padding `8px 16px`. Centered single line linking to the Dropbox Dash beta.

### Hero & Sections

**`hero-eyebrow`** — small label above the headline (used on feature sections, not the main hero).
- Text `{colors.ink-mute}` (`"#524a3e"`), type `{typography.label-sm}`. The "Find" / "Organize" / "Share" / "Secure" pre-headers.

**`hero-headline`** — Sharp Grotesk display headline.
- Text `{colors.ink}` (`"#1e1919"`), type `{typography.display-xl}` (40px / 500 / 1.2). The lone-line "Get to work, with a lot less work" reads as the brand's primary statement.

### Cards & Bands

**`card-feature`** — feature explanation card or section panel.
- Background `{colors.canvas-lift}` (`"#eee9e2"`), text `{colors.ink}`, type `{typography.body-md}`, padding `24px`, rounded `{rounded.md}` `"12px"`. Used for the customer-logo strip background and feature-tile chrome.

**`card-industry`** — small industry-tile card inside the "Dropbox empowers across industries" grid.
- Background `{colors.canvas-lift}`, text `{colors.ink}`, type `{typography.body-sm}`, padding `16px`, rounded `{rounded.md}`. Photo top, label, single-line description, "Learn more" link.

**`band-dark-security`** — full-bleed dark security section.
- Background `{colors.surface-dark}` (`"#000000"`), text `{colors.on-dark}` (`"#f7f5f2"`), type `{typography.body-md}`, padding `64px 24px`, rounded `{rounded.lg}` `"16px"`. Contains a centered Sharp Grotesk headline, body paragraph, primary blue CTA + outline ghost CTA, and three testimonial cards in a 3-up grid.

**`testimonial-card-dark`** — dark slate testimonial inside the security band.
- Background `{colors.surface-dark-elevated}` (`"#292c31"`), text `{colors.on-dark}`, type `{typography.body-sm}`, padding `24px`, rounded `{rounded.md}`. Quote text, brand photo strip, "Watch testimonial" link.

### Footer

**`footer-dark`** — site footer.
- Background `{colors.surface-dark}` (`"#000000"`), text `{colors.on-dark-mute}` (`"#8e8b87"`), type `{typography.caption}`, padding `64px 24px`. 6-column link grid (Dropbox / Products / Features / Support / Resources / Company), social icon row (Twitter / Facebook / YouTube), region selector at the bottom.

## Do's and Don'ts

### Do
- Hold `{colors.primary}` (`"#0061fe"`) to one filled pill per band — the brand's single-voltage discipline only works when the blue stays rare.
- Use `{colors.canvas}` (`"#f7f5f2"`) — not pure white — as the page canvas. Pure white only appears inside product UI mockups.
- Pair every Sharp Grotesk display headline with an Atlas Grotesk Web body paragraph. Reverse the pairing breaks the typographic rhythm.
- Render pill buttons at 100px radius even at 36px height — the full pill is the geometry signal.
- Render the security pitch on a full-bleed `{colors.surface-dark}` (`"#000000"`) band, then return immediately to cream. The polarity flip is the brand's depth move.

### Don't
- Don't pair two filled CTAs in the same band. The `button-secondary-outline` is the only legal companion to `button-primary-pill` — never two filled blues.
- Don't use Sharp Grotesk at weight 600+. The brand caps display at 500; weight 600+ pushes the page toward enterprise-trade-show muscle the system resists.
- Don't swap the cream canvas for pure white — it breaks the warm-neutral discipline. The cream canvas at `"#f7f5f2"` is non-negotiable, and pure white only ever appears inside product UI mockup chrome.
- Don't tint customer logos with brand color. The MGM / McLaren / Lincoln Center / Hydro Flask / Zoom strip uses `{colors.ink}` (`"#1e1919"`) silhouettes on canvas — never logos at brand color, never boxed.
- Don't apply the dark band globally as a theme switch. The `band-dark-security` is band-scoped — one section, then back to cream.
- Don't render text inputs at 12px radius — the input scale `{rounded.sm}` (`"8px"`) is the only legal corner for forms.

## Known Gaps

- **Form validation states.** Success, error, and warning text colors live inside the authenticated Dropbox web app rather than the marketing surface — not captured.
- **Mobile responsive scaling.** Sharp Grotesk drops from 40 → 28px on mobile, but exact breakpoint values were not traced.
- **In-app palette.** Product UI mockups embedded inside feature cards use the `--dig-color__*` token tier, which carries its own semantic ladder (alert, attention, success, warning) distinct from the marketing palette documented here.
- **Animation specs.** The hero mockup drift, the customer-logo strip auto-scroll, and the article-strip carousel were observed but the easing curves and durations were not extracted.
- **Sub-brand surfaces.** Dropbox Dash, Dropbox Sign, and Dropbox Replay each layer their own accent palette on top of the core blue system — none captured here.