# Dropbox: brand book and build spec

Warm off-white and a warm near-black carry the page, with Dropbox Blue on the buttons. A custom grotesk at medium weight, square full-bleed planes, and a wide accent palette where every light color brings its own dark.

From unfairly.ai/brand-guidelines/dropbox, checked 2026-10-28. Unofficial study; not affiliated with Dropbox.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Structure is the personality. Dropbox gives every piece the same calm Coconut and Graphite frame, then lets one accent and the Tab carry the feeling. Change the accent and it is still Dropbox; break the frame and it is not. Based on: From the published Framework, Color and Imagery pages and the homepage band sequence measured 2026-10-28.

## Purpose

Mission: Our mission is to design a more enlightened way of working (published; https://www.dropbox.com/about)

Story: Dropbox started in 2007 to make files sync simply; it now builds products that remove busywork so people can focus on meaningful work, against tools that interrupt and fragment teams. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Be worthy of trust | act with integrity and honesty, even when no one is watching. | published: https://www.dropbox.jobs/blogs/dropbox-values |
| They win, we win | customers' success is the company's success; start from their needs. | published: https://www.dropbox.jobs/blogs/dropbox-values |
| Keep it simple | build focused products; avoid needless complexity in plans and process. | published: https://www.dropbox.jobs/blogs/dropbox-values |
| Own it | take full responsibility, clear your own blockers, learn from mistakes. | published: https://www.dropbox.jobs/blogs/dropbox-values |
| Make work human | design for people's real needs; a compassionate, inclusive culture. | published: https://www.dropbox.jobs/blogs/dropbox-values |

## Fixed and flexible

Never changes:
- The glyph, the word mark and the Tab
- Dropbox Blue, Coconut and Graphite
- DB Sharp Grotesk

The one thing that varies: The accents and imagery. Each story or photo can take its own accent from the sixteen; the core three stay put.

## Positioning

- **Statement**: For teams drowning in scattered files and tools, Dropbox is one place to store, share and find work, so less time goes to busywork and more to finished work. (our reading)
- **Category**: Dropbox is one place to keep life organized and keep work moving. (published)
- **Audience**: individuals and teams; the homepage names construction, media, technology, professional services, manufacturing and education. Dash campaign work targets creative and marketing teams. (observed)
- **Problem**: How we all work today is messy (published)
- **Promise**: Dropbox is designed to simplify the frenzy of modern work. (published)
- **Differentiators**: Scale and trust: over 700 million registered users; Dropbox content brought into AI tools (OpenAI, Anthropic, Google Gemini and others) rather than a closed assistant; Dash: one search across the apps a team already uses, with content access controls; Security framed as first, not an add-on ("Security never comes second")
- **Alternatives**: Google Drive, Microsoft OneDrive, Box (file storage); Notion, Asana and app-native search (for Dash)

## Messaging

Boilerplate (published): Dropbox is one place to keep life organized and keep work moving. More than 700 million registered users across 180 countries rely on it. Its mission is to design a more enlightened way of working. Headquartered in San Francisco.

Taglines:
- For All Things Worth Saving (2021 brand campaign by Instrument: billboards, CTV, social)
- Find anything. Protect everything. (Dropbox Dash product page title and the Oct 2024 Dash for Business release title)
- Go from idea to done with Dropbox. (Sample line in the voice guide)
- Get to work, with a lot less work. (Sample line in the voice guide)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Find | Find what you need fast, across Dropbox and your other apps | Previews for 175+ file types; "Dropbox Dash brings a level of clarity to this chaos." Ben Gibbard, Death Cab for Cutie | our reading |
| Sync and share | Everyone stays in sync; sharing big files doesn't slow work down | Large file transfers up to 250GB | our reading |
| Secure | Security is built in, never second |  | our reading |
| Works with your AI | Your Dropbox content goes to work inside the AI tools you already use | Official Technology Partner of the McLaren Formula 1 Team (multi-year, from 2024) | our reading |

They never claim:
- Never make the Dropbox name plural or possessive, or use it as a noun or verb; it is a capitalized adjective.
- Partners may say 'works with Dropbox' or 'compatible with Dropbox' only if it's true.
- Never edit, recolor, rotate, stretch or otherwise modify the logo, or fold it into another logo or product name.
- Delight stays small: the motion guide prefers a wink over confetti.
- No jargon.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Less uploading. Less explaining. More doing." | homepage | https://www.dropbox.com/ |
| "One place to store, share, and collaborate" | homepage | https://www.dropbox.com/ |
| "Find it fast, every time" | homepage | https://www.dropbox.com/ |
| "Share files without the slowdown" | homepage | https://www.dropbox.com/ |
| "Security never comes second" | homepage | https://www.dropbox.com/ |
| "Bring Dropbox content into your favorite AI tools" | homepage | https://www.dropbox.com/ |
| "Find answers across your work" | product page | https://dash.dropbox.com/ |
| "Cut through chaos with Dropbox Dash" | product page | https://dash.dropbox.com/ |
| "For All Things Worth Saving" | billboard | https://www.marketingdive.com/news/campaign-trail-dropbox-injects-humanity-into-file-storage-with-revamped-br/604826 |
| "Dropbox Dash learns from your past decks, docs, and plans" | billboard | https://sketchdeck.com/work/dropbox-dash-x-mclaren-proving-ai-can-drive-speed-without-losing-quality/ |
| "Work faster with content you already have" | ad | https://sketchdeck.com/work/dropbox-dash-x-mclaren-proving-ai-can-drive-speed-without-losing-quality/ |

## Voice

Tone words: Simple, Helpful, Human, Magic.

Traits:
- Simple (published)
- Helpful (published)
- Human (published)
- Magic (published)

- Simple: crystal clear, trim words, strong nouns, tell a story.
- Helpful: say what's coming next and show how to get there.
- Human: write the way you talk; real people read the words.
- Magic: charm with wit; clever is good, fresh language that surprises is better.

Rules a copy check enforces:
- Sentence case headlines
- Never: Dropboxes, Dropbox's, Dropboxing, Dropbox it. Say Dropbox as a capitalized adjective, spelled as is ("Dropbox files") instead
- No jargon: write the way you talk
- Every message says what happens next and how to get there
- Trim words; prefer strong, concrete nouns

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Dropbox Blue | #0061FE | accent | Core. Buttons, nav CTA, the Tab. Not used as a band ground on the homepage (observed on the dropbox.com homepage, 2026-10-28). |
| Coconut | #F7F5F2 | surface | Core. Hero and alternate grounds, cards on white, text on blue and Graphite |
| Graphite | #1E1919 | ink | Core. All headings and body, dark bands (#1E1919). Muted text on it is #A09D9B |
| White | #FFFFFF | paper | Feature bands (observed on dropbox.com) |
| Grey 600 | #736C64 | ink_muted | Muted text on light grounds. The site computes it as rgba(82,74,62,0.82), which renders about #706961 on Coconut; #736C64 is the brand site token (observed 2026-10-29) |
| Azalea | #CD2F7B | extra | Accent |
| Pink | #FFAFA5 | extra | Accent; its dark partner is #892055 |
| Crimson | #9B0032 | extra | Accent |
| Sunset | #FA551E | extra | Accent; its dark partner is #4E0119 |
| Rust | #BE4B0A | extra | Accent |
| Tangerine | #FF8C19 | extra | Accent |
| Gold | #9B6400 | extra | Accent |
| Vivid Vargas | #FAD24B | extra | Accent; its dark partner is #684505 |
| Canopy | #0F503C | extra | Accent |
| Lime | #B4DC19 | extra | Accent; its dark partner is #175641 |
| Ocean | #007891 | extra | Accent |
| Zen | #14C8EB | extra | Accent |
| Navy | #283750 | extra | Accent; the dark partner of Cloud |
| Cloud | #B4C8E1 | extra | Accent; its dark partner is Navy |
| Plum | #78286E | extra | Accent |
| Orchid | #C8AFF0 | extra | Accent; its dark partner is #682760 |
| Pink Dark | #892055 | extra | Text on Pink #FFAFA5 (tonal pair) (published) |
| Sunset Dark | #4E0119 | extra | Text on Sunset #FA551E (tonal pair) (published) |
| Vivid Vargas Dark | #684505 | extra | Text on Vivid Vargas #FAD24B (tonal pair) (published) |
| Lime Dark | #175641 | extra | Text on Lime #B4DC19 (tonal pair) (published) |
| Orchid Dark | #682760 | extra | Text on Orchid #C8AFF0 (tonal pair) (published) |
| Blue Hover | #0057E5 | extra | Primary button and nav button hover fill (observed on the dropbox.com homepage, 2026-10-29) |
| Focus Ring | #428BFF | extra | Focus ring on every button and link: box-shadow 0 0 0 3px (observed on the dropbox.com homepage, 2026-10-29) |
| Announcement | #DEEBFF | extra | Announcement bar ground (56px strip above the nav) (observed on the dropbox.com homepage, 2026-10-29) |
| Announcement Text | #0044AF | extra | Announcement bar text and its two 24px icons (observed on the dropbox.com homepage, 2026-10-29) |
| Hairline | #EDE9E3 | extra | 1px line under the white nav, on light grounds (observed on the dropbox.com homepage, 2026-10-29) |
| Media Placeholder | #EEE9E2 | extra | Ground behind card images while they load (industry and article card media frames) (observed on the dropbox.com homepage, 2026-10-29) |
| Muted On Dark | #A09D9B | extra | Muted text on Graphite: rgba(247,245,242,0.6) flattened on #1E1919 (observed on the dropbox.com homepage, 2026-10-29) |
| Panel Top | #292C31 | extra | Security panel gradient, top stop (linear-gradient #292C31 to #000000, top to bottom) (observed on the dropbox.com homepage, 2026-10-29) |
| Card Dark | #1C1D21 | extra | Testimonial cards inside the security panel (on its near-black lower half) (observed on the dropbox.com homepage, 2026-10-29) |
| Footer | #000000 | extra | Footer and locale strip ground; also the customer logos in the marquee (observed on the dropbox.com homepage, 2026-10-29) |
| Hairline On Black | #474644 | extra | Footer divider: 1px rgba(142,139,135,0.5) on #000000 (observed on the dropbox.com homepage, 2026-10-29) |

Proportion (observed; Share of homepage height by band ground on dropbox.com at 1440px (observed, 2026-10-28)): White 43%, Graphite 28%, Coconut 21%, Black (footer) 8%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | DB Sharp Grotesk | Proprietary (custom, made with Sharp Type) | Archivo | Arial, Helvetica, sans-serif |
| body | Atlas Grotesk | Proprietary (Commercial Type) | Public Sans | -apple-system, Arial, Helvetica, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline | --text-hero-headline-* | display | 40px | 32px | 1.2 | -0.8px | 650, width 112 |
| Section headline (wide cut) | --text-section-headline-wide-cut-* | display | 34px | 26px | 1.13 | 0.3px | 400, width 125 |
| Feature headline | --text-feature-headline-* | display | 26px | 26px | 1.3 | -0.52px | 650, width 112 |
| Card title | --text-card-title-* | display | 18px | 18px | 1.2 | -0.36px | 650, width 112 |
| Small heading | --text-small-heading-* | body | 20px | 20px | 1.2 | 0.2px | 650 |
| Lead | --text-lead-* | body | 20px | 16px | 1.5 | 0.2px | 400 |
| Body | --text-body-* | body | 16px | 16px | 1.5 | 0.16px | 400 |
| Eyebrow and button label | --text-eyebrow-and-button-label-* | body | 16px | 16px | 1.2 | 0.16px | 650 |
| Nav link | --text-nav-link-* | body | 14px | 14px | 1.43 | 0.14px | 650 |
| Pill label | --text-pill-label-* | body | 14px | 14px | 1.2 | 0.14px | 400 |
| Overline | --text-overline-* | body | 12px | 12px | 1.2 | 0.12px | 700 |
| Footer link | --text-footer-link-* | body | 14px | 14px | 1.57 | 0.14px | 400 |

## Layout

Measured on https://www.dropbox.com/: computed styles, bounding boxes and pixel scans at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 48px | 24px |
| Section padding | 72px | 72px |
| Container max width | 1344px | full |
| Hero text width | max 513px | full |
| Grid columns | 24 | 12 |
| Gutter | 24px | 24px |
| Navigation height | 72px | 72px |

At every width (observed, 2026-10-28):
| What | 390px | 768px | 1024px | 1440px |
|---|---|---|---|---|
| hero headline size | 32px / 38.4 lh, Sharp Grotesk 500 | 40px / 48 | 40px / 48 | 40px / 48 |
| section headline size | 24px / 28.8, 'Sharp Grotesk 23' (wide cut) 400 | 32px / 38.4 | 32px / 38.4 | 32px / 38.4 |
| body size | 16px / 24 (lead also 16/24) | 16px / 24 (lead 16/24) | 16px / 24 (lead 20/30) | 16px / 24 (lead 20/30) |
| page margin | 24 | 32 | 48 | 48 |
| section padding | 72 (no larger feature padding present) | 72 (no larger feature padding present) | 72; feature bands 96 | 72; feature bands 120 |
| container max width | full width | full width | full width | 1344 inner (1440 outer), i.e. 48px each side |
| grid columns | 12 | 24 | 24 | 24 |
| gutter | 24 | 24 | 24 | 24 |

Breakpoints from Dropbox's CSS: 480, 768, 1024, 1280, 1440, 1920px.

Homepage bands, top to bottom (observed):
1. Announcement bar · 56px · Blue-tint strip, centered one-line link
   - Desktop: 1440 x 56, sticky with the nav; text 14/500 #0044AF between a 24px chat icon and a 24px arrow
   - Phone: wraps to 3 centered lines, 100px tall
   - announcement: #DEEBFF ground, #0044AF text and icons, no close button
2. White nav · 72px · Tab + word mark, 4 links left, account links + Get started right
   - Desktop: 72 tall, 24px side padding, 1px #EDE9E3 bottom line, sticky under the announcement bar
   - Phone: 48 tall: blue glyph left; Sign up, Log in (14/400) and a 32px hamburger right
   - nav: links 14px, left group 500 with 16px chevrons on Products and Solutions, right group 400 after a 24px globe icon
3. Coconut hero · 735px tall · headline left (max 513) · framed product visual right
   - Desktop: text column x48, vertically centered: headline top at y=351 (223px below the nav), lead 16px below, 71px primary 32px below that; media box 735 x 735 at x657, right edge on the 48px margin
   - Phone: stacked, left-aligned, 24px sides: headline 40px below the nav, lead, 231 x 55 primary, then a full-bleed 390 x 390 media square
   - hero media: white-rimmed rounded photo frame (about 691 x 424) with a floating "Open in Dropbox" pill and an overlapping video tile bottom-right; see components media_frame
4. Coconut proof strip · centered line + black logo marquee · pause button
   - Desktop: 72px below the hero; 20/24 500 line centered, 32px, logo row (150px boxes, 96px apart) drifting left, 32px pause button below
   - Phone: same; line wraps to 3 lines at 28px sides, about 2 logos visible
   - logos: oversized black customer logos, never grey, never in a grid
5. Graphite intro · centered eyebrow + wide-cut headline + body + arrow link
   - Desktop: 72px top; centered column 827 wide: eyebrow 16/500, 16px, wide-cut headline 32/38.4, 16px, body 16/24, 32px, "See all integrations" arrow link
   - Phone: same, centered, 28px sides, headline 24/28.8
   - integration intro: everything Coconut on Graphite, no buttons, one arrow link
6. Graphite integrations · open 3-column grid, 2 rows, no card boxes
   - Desktop: columns 366 wide at x124, 537, 951; rows 235 tall, 72px apart. Each: 48px partner mark, 16px, name 20/500, 16px, body 16/24 Coconut with underlined inline links, arrow link at the bottom
   - Phone: one column, 310 wide at 40px sides, about 72px between items
   - integration item: no fill, no border, left-aligned; marks in their own colors on Graphite
7. White feature bands ×3 · centered pill, headline, body, buttons · photo + product UI below
   - Desktop: 120px top on the first; each band 881 tall. Text column centered, 780 wide: pill label, 16px, feature headline 26/33.8, 16px, body 16/24 muted, 32px, a 55px outline button (and an arrow link 48px to its right). 48px below, a 997 x 600 media cell: a square photo 500 x 500 (square corners) with white product-UI cards overlapping its inner edge; photo left, right, left on the three bands
   - Phone: 72px top; text centered at 48px sides; media stacks under the buttons, full width
   - feature media: photo of a person or the work, square corners; product UI as white radius-12 cards, never a full screenshot
8. Security panel · 1075px inset rounded charcoal-to-black panel, lock, layered art, testimonial cards overhanging its sides
   - Desktop: static: 1075 wide at x=182, radius 20, gradient #292C31 to #000000; testimonial cards (720 x 291, #1C1D21) overhang the panel by 12px left and 135px right. Animation only: scales to 1344 at x=48
   - Phone: 768 and below: full-bleed, square corners, 24px sides; testimonial cards 300 x 615 with the photo on top
   - security panel: the one inset, rounded plane on the page; see components security_panel and card_dark
9. White industries · wide-cut headline + 2 x 3 Coconut cards, image left
   - Desktop: headline centered 32/38.4 wide cut, 72px, cards 596 x 197 in two columns (x112 and x732, 24 gap), 24px between rows
   - Phone: one column, 310 wide, no images, text only, 24px padding
   - industry card: see components card
10. Coconut resources · wide-cut headline + 3 white article cards + blue text link
   - Desktop: 72px top; headline centered, 72px, three cards 390 x 480 (gap 24): image 390 x 219 on top, then padding 0 24 24: "Article" 12/700 muted, title 18/500, body 16/24 muted, "Read article" underlined. Then "View more resources" 16/400 Dropbox Blue link centered, and a 16/24 disclaimer line, 72px bottom
   - Phone: cards stacked, 310 wide at 40px sides
   - article card: white on Coconut, radius 12, overflow hidden
11. Black footer · six link columns, social icons, locale
   - Desktop: 96px of black above the column heads; six columns 183 wide at a 207 pitch starting x100; then 32px social icons and a locale button
   - Phone: two columns (x28 and x195), headings 16/24
   - footer: all text Coconut on #000000; no logo

## Page anatomy

How Dropbox's own landing pages are built, part by part (observed; https://www.dropbox.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: A one-line blue-tint link strip above the nav
- ground: #DEEBFF
- height: 56px desktop (sticky with the nav), 100px on phone (3 wrapped lines)
- anatomy:
  - centered: 24px chat-bubble icon, 8px gap, label 14px/500 #0044AF, 24px right arrow
  - no close button, no border

**Navigation**
- summary: White 72px bar: the Tab + word mark left, four links, then account links and one blue button right
- ground: #FFFFFF
- height: 72px desktop, 48px phone
- border: 1px #EDE9E3 bottom line
- logo: Desktop: the Tab, a 40 x 40 Dropbox Blue square (radius 0) with the 30 x 25 Coconut glyph, flush against the 93 x 22 Graphite word mark; lockup 169 x 40 at x24. Phone: bare blue glyph 30 x 25 in a 48px target at x9
- links: 4 on the left (Products, Solutions with 16px chevrons, then 2 plain), 14px/500 Graphite, 24px between labels, starting 12px after the logo; chevrons rgba(82,74,62,0.82)
- actions: right-aligned: 24px globe icon, then 4 text links 14px/400 Graphite (Contact sales, Get app with chevron, Sign up, Log in), then "Get started" 117 x 40 Dropbox Blue, radius 12, 16/500 Coconut, 24px from the right edge
- sticky: announcement + nav stay pinned at the top (128px together)
- phone: glyph left; Sign up and Log in 14/400 and a 48px hamburger (32px icon) right. Menu opens full-screen white: items 24px/500 rows 77px tall, accordions for Products and Solutions, a full-width 55px "Get started" pinned near the bottom

**Hero**
- summary: Coconut, 735px tall: left-aligned headline, lead and one arrow button; right, a white-rimmed rounded photo frame with floating product pills
- desktop: grid with text at x48 (max 513 wide) and a 735 x 735 media box at x657 (ends on the 48 margin). Vertical anchors from the page top: announcement 0 to 56, nav 56 to 128, hero 128 to 863, headline top y=351, lead y=463 (16px below the headline), button y=585 (32px below the lead). Text block vertically centered in the band
- phone: order: headline, lead, button, media. Left-aligned, 24px sides. Headline at y=188 (40px below the nav), 32/38.4, 4 lines in 342px: budget 55 to 64 characters (about 16 per line). With 4 lines, the lead follows 16px below, the 231 x 55 button top sits at y=462, and the 390 x 390 media square starts at y=541 with the photo frame inside it at about y=628. A 3-line headline (42 to 44 characters) moves everything up 38px (button y=423 or 447, depending on lead length)
- media: THE DOMINANT ELEMENT: a landscape photo frame about 691 x 424 (about 16:10) with an 8px white rim, outer radius about 28, soft warm shadow, a bright outdoor photo inside. Everything else only overlaps it: a white pill (about 278 x 60, full radius) centered on the photo with the glyph and a product verb; a white-rimmed video tile 303 x 212 over the bottom-right corner, hanging about 110px below the frame; document or prompt cards only while animating (see at rest). The pill is never bigger than the frame and never replaces it
- type: headline 40/48 Sharp Grotesk 20 Medium; stand-in Archivo "wdth" 112, "wght" 650, -0.02em (904 vs 910.8px on the measured line, ink within 2%). Graphite, sentence case. Lead 20/30 Atlas 400 (stand-in Public Sans 400, 0.01em) in rgba(82,74,62,0.82)
- cta: one primary only: 231 x 71, radius 16, padding 24, label 16/500 + 24px right arrow 24px after it
- proof: none in the hero; proof starts in the next band (logo marquee)
- headline budget: 2 lines at 1440 in the 513px column: 40 to 48 characters, 6 to 8 words (the measured line has 44). 3 lines at 1440 pushes the button down by 48px; 4 lines on phone is normal
- at rest: exactly three things: one dominant photo frame, one product pill centered on the photo, one video tile over its lower-right corner. Document and prompt cards appear only during the animation sequence, one at a time, and never stack with the pill and tile. A static hero shows the three, nothing more
- vertical desktop: at 1440: headline top y=351; media frame top y=284 (67px above the headline top); video tile bottom y=817 (466px below the headline top, about 160px below the CTA bottom at y=656). The media box itself runs 128 to 863. The frame is taller than the text block on both ends
- static state: the at-rest three: frame, centered "Open in Dropbox" pill, lower-right video tile. Animation only: the prompt pill, document card and "Create a share link" card play in and out over 12.3s
- shadows: Only three things cast shadows, all baked into product video on dropbox.com and fitted from pixel falloff (2026-10-29): hero photo frame rim 0 4px 16px rgba(30,25,25,0.08) (13px below, 6px right, about 2px above); video tile 0 4px 10px rgba(30,25,25,0.16) (10px below, 4px at the sides); product UI cards 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12). Nothing else has a shadow: no buttons, nav, cards, testimonial cards, industry or article cards, panel or photos

**Logo marquee**
- summary: A centered trust line over a moving row of oversized black customer logos
- ground: Coconut #F7F5F2
- desktop: starts 72px below the hero; line 20/24 Atlas 500 centered (max 886); logo row 32px below; band 246 tall
- phone: line wraps at 28px sides; logos the same size, about two in view
- anatomy:
  - logos pure black, each in a 150 x 150 contain box, 96px gaps, drifting left at about 22px/s, clipped at the screen edge
  - a 32px circular pause/play icon button (Graphite outline icon) centered 4px below the logos
- components: logo_marquee
- static state: logos in one row starting at x=-52 with a 246px pitch (cut off at both screen edges). Animation only: drifting left at about 22px/s
- headline measure: 1 line (589px), max-width 640px

**AI integrations**
- summary: Graphite band: centered intro with the wide cut, then an open three-column grid of partner marks
- ground: Graphite #1E1919
- desktop: 72px top padding; centered column 827 wide: eyebrow 16/500, wide-cut headline 32/38.4 (2 lines), body 16/24, arrow link; 72px; grid of 3 columns x 366 (x124, 537, 951), 2 rows 72px apart; 72px bottom
- phone: intro centered at 28px sides (headline 24/28.8); grid becomes one column at 40px sides
- anatomy:
  - eyebrow, headline, body and links all Coconut #F7F5F2 on Graphite
  - each item: 48px tall partner mark, 16px, name 20/24 Atlas 500, 16px, 3 to 4 lines of 16/24 body with underlined inline links, then an arrow link ("Connect now")
  - no card fills, borders or dividers
  - marks stand free on Graphite: 48px tall, their own colors (OpenAI and SpaceX in Coconut, Claude in its orange, Gemini in its gradient), no tile, circle or container. If a partner mark is missing, set the partner name in the body face (20/24, 500, Coconut) instead; never a colored icon tile. When the name stands in for the mark, drop the mark slot: the card heading carries the name once ("ChatGPT", not "ChatGPT" over "Dropbox in ChatGPT") (ours)
- components: arrow_link
- type: wide-cut headline: Archivo "wdth" 125, "wght" 400, 0.01em, 34px on 38.4px (26 on 28.8 phone), Coconut, centered, 2 lines in an 827px column
- headline measure: max-width 490px, centered: 2 balanced lines of 439 and 486px at 1440 (eyebrow, body and link keep the 827px column)

**Feature bands**
- summary: Three white bands (Find, Organize, Share): centered text, then a square photo with white product-UI cards overlapping it
- ground: White #FFFFFF
- desktop: 120px top on the first band, 881px per band; text column 780 wide centered; buttons row 32px below the body; media cell 997 x 600 starts 48px below the buttons; photo 500 x 500 alternates left, right, left
- phone: 72px top; text centered at 48px sides; one 55px outline button; media full width below
- anatomy:
  - pill label: Coconut pill 32 tall, 16px icon + 14/400 muted label
  - feature headline 26/33.8 Sharp Grotesk Medium, Graphite, centered
  - body 16/24 muted, centered
  - buttons: 55px outline (Graphite 2px ring) + an arrow link 48px to its right; the first band has the outline only
  - media: square photo, square corners; white UI cards (radius 12, 1px border, soft shadow) overlap its inner edge by about 58px
  - photos: 500 x 500 square, art-directed (fashion on a warm brown studio ground, a race car mid-corner, hands at a laptop), never a generic office stock shot
- components: pill_label, button_secondary, arrow_link, file_card
- image sequence: each image band is its own visual chapter, in order: fashion (portrait pair on warm brown), then racing (car close-up), then hands at devices. Never a generic office shot, and no image appears twice on the page (hero, feature bands, security art, testimonials, industries and resources each use different images)
- ui rule: product UI uses real image thumbnails (photos and artwork from the same story), photo avatars, and compact controls: 12-14px labels, 28-32px chips and fields, small black or Coconut buttons. Never initials in circles, never file-extension badges or pastel file icons, never empty thumbnail boxes. The hero pills, feature UI and sharing dialog are product video and images on dropbox.com, not HTML; use the slot assets or rebuild them to match exactly
- static state: per band: headline top 48px below the band top (168 on the first, which has 120 padding); square photo 500 x 500 whose top is 508px below the headline top; product UI (640 x 400, or 711 x 400 on band 2) whose top is 275px below the photo top and whose left is 356px right of the photo's left, so it overlaps the photo by 144px. Photo left, right, left (x=222, 718, 222). Animation only: on scroll the UI slides and the photo and UI rise into the text
- fashion pair: band 1 media is two portraits in a 500 x 500 box, not one photo: rear (blue coat, back turned) 304 x 412 at (29, 0); front (orange coat) 304 x 412 at (167, 33), so it steps 138px right and 33px down and covers the rear's right 166px. Each has a file caption under it: name 16/400 Graphite ("Broadmire knit", "DSC_1241") and meta 14/400 muted ("PNG · 32.4 KB"). Square corners, no shadow. The site only ships the composite; slot_assets has the front portrait whole and the visible strip of the rear
- headline measure: 1 line each at 1440 (302, 574 and 445px) in a 780px column; on phone they wrap in 294px

**Security panel**
- summary: An inset, rounded charcoal-to-black panel: lock, centered message, layered art with a sharing dialog, testimonial cards
- ground: linear-gradient(#292C31, #000000) on white page
- desktop: STATIC STATE (use this for builds and screenshots): panel 1075 wide at x=182 (182px margins at 1440), top y=5437, 1345 tall, radius 20, gradient #292C31 to #000000. Message column centered; collage and dialog below; testimonial cards 720 x 291 at x=170 and x=914, so the first card hangs 12px past the panel's left edge and the row runs 135px past its right edge to x=1392, where it is clipped; card bottoms 46px above the panel bottom. Animation only: as the panel scrolls up it scales from 0.8 x 0.9 to 1.0, ending 1344 wide at x=48 with the cards inside
- phone: 768 and 390: full-bleed, radius 0, 24px sides, no scaling; testimonial cards 300 x 615 (photo 284 square on top), sideways scroll
- anatomy:
  - 64px Coconut lock icon centered, 32px above the headline
  - headline 26/33.8 Sharp Grotesk Medium Coconut; body 16/24 at rgba(247,245,242,0.6)
  - buttons: outline-on-dark 231 x 55 (2px Coconut ring) + arrow link 48px right
  - art: three photos stacked and offset (about 206, 162 and 374 wide), the sharing-dialog UI card (about 595 x 480, white, radius 16) overlapping their right side, a small "Share" split pill above it
  - testimonial cards #1C1D21 radius 16, sliding past the panel edge (clipped)
  - testimonial photo: 275 square, radius 8, the person greyscale and the room tinted one accent (pink #EBCCD6 to #C56A87, or a teal #36A2B6 ground), baked into the image; 24px play glyph bottom-left
- components: security_panel, button_secondary_on_dark, card_dark
- balance: the collage top sits 148px above the dialog card's top (77px above the top of the dialog image, which includes the Share pill row). Collage block about 526 x 481 (206 x 261, 162 x 167, 374 x 473, stacked and offset; the 374 x 473 sky image is frontmost and tallest); dialog 595 x 480 overlapping the collage's right edge by about 163px. The collage is never shorter than the dialog, and the dialog never covers more than a third of it
- testimonial row: static: first card at x=170 (12px outside the panel's left edge), row clipped at x=1392 (135px outside its right edge), bottoms 46px above the panel bottom. Animation only: at full scale the first card sits 122px inside the left edge and the row is clipped at the panel edge
- headline measure: 1 line (404px) in the 776px column

**Industries**
- summary: White band: wide-cut headline over six Coconut cards with an image on the left
- ground: White #FFFFFF
- desktop: headline centered 32/38.4 wide cut, 72px gap, 2 columns x 3 rows of 596 x 197 cards at x112 and x732
- phone: one column of text-only cards, 310 wide
- anatomy:
  - card: Coconut, radius 12, 186px photo left full height, title 18/500, body 16/24 muted, "Learn more" arrow link
  - photo: 186 x 197, flush left, full card height, object-fit cover centered, cropped from a 16:9 or 3:2 documentary photo of people at work; no radius of its own (the card clips it)
- components: card
- headline measure: 1 line (734px) in the 827px column
- image order: left to right, top to bottom: Construction, Media / Technology, Professional services / Manufacturing, Education; each photo shows that industry's people at work (slot_assets)

**Resources**
- summary: Coconut band: wide-cut headline, three white article cards, a blue text link and a disclaimer line
- ground: Coconut #F7F5F2
- desktop: 72px top; headline centered; 72px; three 390 x 480 cards (gap 24) at x112; "View more resources" 16/400 #0061FE centered 72px below; disclaimer 16/24 Graphite centered (665 wide); 72px bottom
- phone: cards stacked at 40px sides
- anatomy:
  - article card: white, radius 12, image 390 x 219 on top (no radius of its own), body padding 0 24 24, "Article" 12/700 muted, title 18/500, body 16/24 muted, "Read article" underlined 16/500
  - the page ends here: resource cards, then the blue text link, then a one-line 16/24 disclaimer, then the black footer. No closing CTA band, no final headline
- headline measure: 1 line (689px) in the 827px column

**Footer**
- summary: Black, six link columns, social icons, a short divider and a locale picker; no logo
- ground: #000000
- anatomy:
  - 96px of black above the column heads
  - link counts per column, left to right: 9, 11, 8, 8, 10, 4 (4 to 11, columns end at different heights)
  - six columns 183 wide at a 207px pitch from x100: head 20/30 Atlas 500 Coconut, 26px, links 14/22 400 Coconut on a 34px rhythm
  - 32px social icons (X, Facebook, YouTube) 44px apart, about 64px below the longest column
  - a 132px x 1px divider rgba(142,139,135,0.5), 36px below the icons
  - locale button: 24px globe, "English (United States)" 16/400 Coconut, 24px chevron
  - 216px of black below
- phone: two columns at x28 and x195, heads 16/24, the same links; social icons in 44px targets

**On dark grounds**
- secondary button: 2px #F7F5F2 ring, #F7F5F2 label, transparent fill, 55 tall, radius 16, 24px arrow
- link: arrow link 16/500 #F7F5F2, 1px underline under the label, 24px arrow; inline links in body are underlined Coconut
- muted text: rgba(247,245,242,0.6), about #A09D9B on Graphite
- hairline: 1px rgba(142,139,135,0.5), about #474644 on black
- logo: full logo on Graphite (light variant) where a logo is needed; the homepage footer shows none
- headline weight: same 500 as on light grounds on dropbox.com (no lighter cut measured)

## Components

- **button primary** (observed): fill accent, text on_accent, ring px 2, ring accent, radius 16, height 71, padding x 24, font size 16, weight 650, real weight 500. Hero "Try Dropbox free": 231 x 71 on desktop (padding 24 all round), 231 x 55 on phone (padding 16 24). Label 16/500 then a 24px right arrow, 24px gap. One per band, never beside a secondary in the hero
  - hover (observed): bg #0057E5, border 2px solid #0061FE (unchanged), text #F7F5F2
  - focus (observed): ring box-shadow 0 0 0 3px #428BFF, outline offset 1px, note Measured by keyboard Tab (:focus-visible). The pointer was still over the button, so bg read #0057E5.
- **button secondary** (observed): fill none, text ink, ring px 2, ring ink, radius 16, height 55, padding x 24, font size 16, weight 650, real weight 500. Outline, 55 tall at every width (padding 16 24), same 24px arrow after the label. The 71 primary and the 55 outline never share a row: rows pair a 55 outline with an arrow link, 48px apart
  - hover (observed): bg rgba(0,0,0,0.08), border unchanged, text unchanged
  - focus (observed): ring box-shadow 0 0 0 3px #428BFF, outline offset 1px, bg transparent
- **button nav** (observed): fill accent, text on_accent, radius 12, height 40, padding x 12, font size 16, weight 650, real weight 500. Get started: 117 x 40, padding 0 12, label 16/500, no arrow, hover #0057E5
- **pill label** (observed): fill surface, text ink_muted, radius pill, height 32, padding x 15. Feature eyebrow: padding 4 15 4 10, a 16px line icon then the label 14/400 in muted text, 4px gap; centered above the feature headline, 16px above it
- **card** (observed): fill surface, on paper, radius 12, shadow none, border none. Industry card: 596 x 197 at 1440, Coconut on white, radius 12, overflow hidden; image left 186px wide full height (object-fit cover); text column padding 24, gap 12: title 18/500 display, body 16/24 muted, arrow link 16/500 Graphite at the bottom. Phone: 310 wide, no image, padding 24
- **card dark** (observed): fill #1C1D21, on the security panel gradient (#292C31 to #000000), where it sits on near-black, radius 16, shadow none, border none. Testimonial card: 720 x 291, padding 8, gap 8; square photo 275 x 275 radius 8 with a 24px play glyph bottom-left; text column: "Testimonial" 12/700 Azalea, quote 18/21.6 display 500 Coconut, 14/21 body at 60% Coconut, "Watch testimonial" underlined link at the bottom. Cards scroll sideways (drag), 24px gap, clipped by the panel edge. Measured 2026-10-29; on Graphite #1E1919 it would barely show, so keep it on the panel
- **button secondary on dark** (observed): fill none, text on_night, ring px 2, ring on_night, radius 16, height 55, padding x 24, font size 16, weight 650, real weight 500. Coconut #F7F5F2 2px ring and text on Graphite or the security panel; 24px arrow after the label; hover not measured (use rgba(247,245,242,0.12))
- **arrow link** (observed): text ink, font size 16, weight 650, underline 1px, under the label only, icon 24px right arrow, 4px after the label, height 19, real weight 500. "Learn more", "Connect now", "See all integrations", "Read article". Coconut on dark grounds, Graphite on light.
  - hover (observed): change no computed change measured (color, underline and icon transform the same)
  - focus (observed): ring box-shadow 0 0 0 3px #428BFF, outline offset 1px
- **announcement bar** (observed): fill #DEEBFF, text #0044AF, height 56. Full-width, centered: 24px chat icon, 8px, label 14/500, 24px right arrow. Phone: wraps to 3 lines, 100px tall, padding 16 24
- **nav mark** (observed): fill accent, height 40. Desktop: the Tab, a 40 x 40 Dropbox Blue square (radius 0) with the 30 x 25 glyph in Coconut, set flush against the 93 x 22 Graphite word mark (12px left padding). Phone: the bare blue glyph (30 x 25) in a 48 x 48 tap target, no square, no word mark
- **media frame** (observed): fill #FFFFFF, radius 28, border 8px white, shadow 0 4px 16px rgba(30,25,25,0.08); video tile 0 4px 10px rgba(30,25,25,0.16). Hero frame: about 691 x 424 at 1440, a photo inside an 8px white rim, outer radius about 28, inner about 20. Floating pill on it: white, 60px tall, full radius, 24px glyph + 26px label. Overlapping video tile: 303 x 212, 8px white rim, radius about 12, bottom-right, hanging 110px below and 37px left of the frame edge. Read from pixels, 2026-10-29
- **file card** (our reading): fill #FFFFFF, radius 12, shadow 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12). Product-UI card over a square photo in feature bands: thumbnail on #EEE9E2, filename 16/400, meta 16/400 muted; a "Share" split pill on the thumbnail. Overlaps the photo edge by about 58px
- **logo marquee** (observed): logo color #000000, item box 150, gap 96, speed px per s 22, control 32px pause/play icon button. Customer logos in black, each in a 150 x 150 box (object-fit contain), 96px apart (246 pitch), one row, drifting left about 22px/s, clipped at the viewport, no fade. A 32px pause/play icon button sits centered 4px below the row
- **security panel** (observed): fill linear-gradient(#292C31, #000000), radius 20. STATIC STATE: 1075 wide at x=182 (1440), 1345 tall, radius 20; testimonial row overhangs both sides (12px left, 135px right, clipped at x=1392). Animation only: scales from 0.8 x 0.9 to 1.0 (1344 wide at x=48 at 1440, 976 at x=24 at 1024) as its top travels from 800px to 100px below the viewport top. 768 and below: full-bleed, radius 0, no scaling. Inside: 120px top padding, content centered (max 776): 64px lock, 32px, headline, 16px, body, 32px, buttons; collage and dialog; testimonial cards

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| brand | cubic-bezier(0.65, 0, 0.45, 1) |  | brand and product motion | published |
| button-state | cubic-bezier(0.4, 0, 0.6, 1) | 100ms | button hover and press on dropbox.com | observed |

## Icon tokens

Grid not published, stroke not published (published).
| Name | Size | Use |
|---|---|---|
| spot | 120px | spot illustrations |
| pictogram | 64px | pictograms |
| ui | 24px | UI icons |

## Signature moves

### A color with its own dark

Where: colored grounds: tiles, section openers, illustration panels.
Do: a light accent ground carries text in a deep shade of the same hue, never black or white (yellow #FAD24B with #684505, cloud #B4C8E1 with #283750, pink #FFAFA5 with #892055). One hue per panel.
Don't: put white or plain black on an accent: the pair is what makes it Dropbox.
Example: "Keep every draft in one place".

### The Tab starts the layout

Where: page and slide compositions; on dropbox.com the nav lockup is the Tab plus the word mark (desktop) and the bare blue glyph (phone).
Do: the glyph sits inside a plane (the guide gives no color: Dropbox Blue in the nav, observed 2026-10-29); the rest of the layout is set from that corner. In the nav it is a 40px blue square with the word mark flush beside it. One Tab per composition.
Don't: float the glyph as decoration with nothing aligned to it.
Example: "Layout starts from the Tab".

### Filled blue is for buttons

Where: the dropbox.com homepage (observed on the dropbox.com homepage, 2026-10-28).
Do: Dropbox Blue fills buttons and the nav CTA; the bands are Coconut, white and Graphite. Campaigns do use full blue grounds (the Dash x McLaren billboards), so this is a web pattern, not a brand law. One filled blue button per band.
Example: "Try it free".

## Messaging: rules

Four pillars, framed as design-strategy prompts rather than rules: humanity (warm, soulful, relatable), clarity (surface what matters, cut what doesn't), action (the next step is always obvious, no manual needed) and delight (small moments of joy, never dull).

Why it works: The brand's own line: good systems have structure, great ones have a strategy. The pillars are the strategy every page is checked against.

- Open on the problem: work today is messy, Dropbox simplifies it
- Every page makes the next step obvious to a beginner and an expert alike

Not published: a positioning statement; messaging pillars by audience or proof points.

Sources: https://brand.dropbox.com/framework

## Voice: rules

Four voice pillars that map to the brand pillars: simple (clarity), helpful (action), human (relatability), and magic (wit and surprise). The guide shows short sample lines but no tone-by-situation scale.

Why it works: Magic comes last and is written as "& magic": wit is the finish on clear, useful writing, not a substitute for it.

- Trim words; use strong, concrete nouns
- Say what's next and how to get there
- Write the way you talk; no jargon
- Fresh language over stock phrases

Not published: tone shifts by situation; capitalization, punctuation or word lists.

Do and don't:
- Do: "Upload the file. Then send the link.". Helpful: what's next and how to get there.
- Don't: "Leverage seamless content-collaboration workflows.". Jargon. Their guide asks you to write the way you talk.

Sources: https://brand.dropbox.com/voice-and-tone, https://www.dropbox.com/branding

## Logo: rules

Two expressions. Version A, the full logo (glyph plus word mark), is for high-level uses like partnerships and video. Version B, the Tab, puts the glyph inside a plane; when the Tab is used, the layout originates from it.

Why it works: Making the logo a plane that organizes the page means the mark does layout work instead of sitting on top as a sticker.

- Full logo for partnerships and video; the Tab for compositions. The dropbox.com nav uses the Tab with the word mark beside it (desktop) and the bare glyph (phone), observed 2026-10-29
- When the Tab appears, the layout is set from it
- Your own name and logo stay more prominent than Dropbox's
- "Works with Dropbox" only in text, and only if true
- Don't edit, distort, recolor, rotate, stretch or rebuild the logo
- Don't put the logo in your own logo, product or domain name
- Don't make the name plural, possessive, a noun or a verb
- Don't imply sponsorship or affiliation

Not published: a numeric clear-space unit; a minimum size.

Do and don't:
- Do: "Works with Dropbox". Name it in text, only when true, with your own mark leading.
- Don't: "Dropbox your files". The name used as a verb. Their legal guide forbids it.

Sources: https://brand.dropbox.com/logo, https://www.dropbox.com/branding

## Color: rules

Three groups: core (Dropbox Blue, Coconut, Graphite), sixteen accents, and a warm 20-step grey ramp from #1A1918 to #F7F6F5. The brand site pairs each light accent with a deep shade of the same hue for text, and matches an accent to each photo.

Why it works: The guide calls the palette diverse and unexpected. Pairing every light color with its own dark keeps that range readable and stops it from turning into a rainbow.

- On the homepage, blue fills buttons; grounds are Coconut, white and Graphite (observed on the dropbox.com homepage, 2026-10-28)
- Text on a light accent is that accent's dark partner (shown on brand.dropbox.com/color)
- The guide shows photos matched to an accent (Canopy, Zen, Crimson) as examples, without a rule

Not published: contrast or proportion rules; a usage rule for Dropbox Blue.

Do and don't:
- Do: "Plan the launch together". Cloud with Navy: a light accent carries its own dark.
- Don't: "Plan the launch together". White on a light accent fails contrast and breaks the pairing.
- Do: "Start free". Blue is the next step: a filled button on Coconut.
- Don't: "Your work, in one place". Blue headlines: on the live site headlines stay Graphite.

Sources: https://brand.dropbox.com/color, https://www.dropbox.com/

## Typography: rules

One published brand family, DB Sharp Grotesk (the site sets body text in Atlas Grotesk, observed only), made with Sharp Type, with a variable version for headlines whose contrast, width and weight can be adjusted. On dropbox.com headlines are weight 500 with no tracking and line height 1.2; centered section headlines use the wider, lighter Sharp Grotesk 23 at 400.

Why it works: Variable weight lets the same headline look equally heavy on Coconut and on Graphite.

- Sentence case; never above weight 500 on the live site
- Ease the weight down a notch on dark grounds (the guide; dropbox.com keeps 500 on Graphite)
- Body in a neutral grotesk at 16px, line height 1.5
- Open stand-ins: Archivo "wdth" 112, "wght" 650, -0.02em (dense cut); Archivo "wdth" 125, "wght" 400, 0.01em, 2px larger (wide cut); Public Sans 400 body and 650 labels at 0.01em

Not published: a size scale, tracking or leading values; the body face (Atlas Grotesk observed only).

Do and don't:
- Do: "Find the file, not the folder". Medium weight, no tracking, sentence case.
- Don't: "FIND THE FILE". Heavy caps: the live site never sets headlines above 500.

Sources: https://brand.dropbox.com/typography, https://www.dropbox.com/

## Graphic elements: rules

Planes are the core graphic element: flat fields that group content and set hierarchy across platforms. On dropbox.com every band is a full-bleed, square-cornered plane (Coconut, white or Graphite) with 72px between bands and 120px around feature bands.

- Group content on flat planes, not boxes with shadows
- Band corners stay square, except the inset security panel (radius 20); cards inside take 12px (16px on dark)

Sources: https://brand.dropbox.com/logo, https://www.dropbox.com/

## Iconography: rules

Icons borrow from Sharp Grotesk: a mix of its round and square corners, with circles modeled on its round letters. Three sizes: spot icons 120px, pictograms 64px, UI icons 24px.

Why it works: Icons and type that share corners read as one voice.

- Spot 120 × 120, pictogram 64 × 64, UI 24 × 24
- Mix round and square corners like the typeface
- Simple, intuitive, scalable

Not published: stroke weight or color rules.

Sources: https://brand.dropbox.com/iconography

## Illustration: rules

Illustration explains abstract, complex or dry ideas with simple, charming scenes and metaphors, in three sizes: hero, spot and mini. It also softens error messages.

|  |  |
|---|---|
| Job | explain the abstract, soften errors; photos prove the real |
| Sizes | hero, spot, mini |
| Line | loose black hand-drawn line |
| Color | flat fills from the accent palette, no gradients |

_Job and sizes are published; line and color are observed from the examples, 2026-10-28._

- Use it for the abstract; use photos for real-world proof
- Hero, spot or mini, by role

Not published: line, color or character rules.

Real examples, to look at on Dropbox's own pages (not for reuse):
- Hero: a scene in loose black line, flat fills from the accent palette: https://brand.dropbox.com/imagery
- Spot: one object, line plus one flat accent: https://brand.dropbox.com/imagery
- Spot on a dark ground: line goes white, one warm fill: https://brand.dropbox.com/imagery

Sources: https://brand.dropbox.com/imagery

## Photography: rules

Photography carries real customer stories in three subjects: people, content and teams. A fourth type, customer files, shows the customer's own work (photos, drawings, plans, tickets) as files. Each photo is matched to an accent color.

Why it works: Showing a customer's real files makes the product's value concrete without a screenshot.

|  |  |
|---|---|
| Subjects | people, content (the work itself), teams, customer files |
| Light | natural, unstaged settings in the guide; on the homepage, bright daylight outdoors (hero), dark studio (fashion), floodlit track (racing), flat blue sky (objects) |
| Hero slot | one landscape photo about 5:3 (about 675 x 408 inside the frame), low angle, a person in motion against open sky; rim, pills and video tile sit over it |
| Feature slots | square 1:1, 500 x 500, square corners, object-fit contain; one per band: fashion on a warm brown studio ground, a race car mid-corner, hands on a laptop showing the work |
| Security art | three cut-outs, about 4:5, 1:1 and 4:5 (206 x 261, 162 x 167, 374 x 473), stacked and offset: everyday objects floating in sky, textured green forms |
| Testimonial slot | square 275 x 275 (284 on phone), radius 8. Tint is baked into the file: the person in neutral greyscale, everything else flooded with one accent (pink, light #EBCCD6 to mid #C56A87; teal ground #36A2B6) |
| Industry slot | 186 x 197 (about 0.94:1), flush left, full card height, object-fit cover centered, cropped from 16:9 and 3:2 documentary photos of people at work on location; hidden on phone |
| Article slot | 390 x 219 (16:9) on top of the card, cover centered; 310 x 175 on phone |
| Product | product UI never sits inside the photo: it floats over the photo edge as white cards |
| Never | a photo used where an abstract idea needs illustration |

_Subjects are published on brand.dropbox.com/imagery. Slot sizes, crops and the testimonial tint were measured on dropbox.com, 2026-10-29. The tint hexes are sampled from the image files._

- Photos for real-world examples; product UI to show a function
- Customer files tell the customer's story through their work
- Match one accent to each photo

Not published: light, crop, casting or grading rules.

Real examples, to look at on Dropbox's own pages (not for reuse):
- Someone making the work, natural light: https://brand.dropbox.com/imagery
- Portrait in their own workspace: https://brand.dropbox.com/imagery
- People working together, caught mid-conversation: https://brand.dropbox.com/imagery
- The work itself, shot top-down: https://brand.dropbox.com/imagery
- Feature-band photo: the work on screen, square crop: https://www.dropbox.com/
- Security-panel art: everyday objects against open sky: https://www.dropbox.com/
- Industry card photo: a person at work on location (cropped to 186 x 197): https://www.dropbox.com/
- Industry card photo: two people reviewing footage outdoors: https://www.dropbox.com/
- Industry card photo: a team at a bright office table: https://www.dropbox.com/
- Industry card photo: a campus seen from above: https://www.dropbox.com/
- Testimonial portrait: person in greyscale, room flooded pink (500px is the source size): https://www.dropbox.com/

Sources: https://brand.dropbox.com/imagery, https://brand.dropbox.com/color

## Motion: rules

Motion should feel fresh, inspiring and flexible, and give the same satisfying feeling as using the product. Four principles: prioritize simplicity, deepen understanding, instant feedback, subtle playfulness. The brand guide publishes one easing curve, cubic-bezier(0.65, 0, 0.45, 1); the live site's buttons use a quicker 100ms curve. Its line on restraint: a wink, not confetti.

Why it works: The guide prefers a wink to confetti: motion earns its place by explaining or confirming something.

- Fewer, better moves, each with a purpose
- Movement has weight, like physical objects
- Feedback is immediate on click
- Expressiveness scales with the moment

Not published: durations.

Sources: https://brand.dropbox.com/motion

## Interface and layout: rules

Full-bleed, square-cornered planes in Coconut, white and Graphite, 72px apart (120px top on feature bands). One exception: the security panel is inset 48px with radius 20, and scales in from 80% width as it scrolls into view. Content sits 48px from the edge (24 on phones); the hero headline is capped at 513px beside a framed product visual.

Sources: https://www.dropbox.com/

## Rules: rules

- Every light accent with its dark partner
- Start the layout from the Tab (observed)
- Headlines at medium weight, sentence case (observed)
- Keep filled blue for buttons, as the homepage does (observed on the dropbox.com homepage, 2026-10-28)
- Don't put white or black text on a light accent
- Don't use jargon
- Don't use motion as decoration

Sources: https://brand.dropbox.com/color, https://brand.dropbox.com/logo, https://brand.dropbox.com/voice-and-tone, https://brand.dropbox.com/motion, https://www.dropbox.com/

## Campaigns

### Dash x McLaren (2025–26)

SketchDeck turned the 2024 McLaren F1 sponsorship into a Dash product campaign: if Dash helps one of the fastest teams, it can help any team. Core idea 'From Chaos to Clarity'.

How the system shows: Observed in the case-study assets: Graphite grounds, McLaren orange shifting to Dropbox Blue as order arrives, a checkered race stripe in blue, single keywords highlighted in colored pill boxes, and one billboard set on a full Dropbox Blue ground with the white logo.
Why it works: The partnership is the proof. Speed in F1 stands in for speed at work, and the shift from orange chaos to blue order acts out the product promise in the brand colors.
Channels: video, billboard (subway), social, digital ads. Source: https://sketchdeck.com/work/dropbox-dash-x-mclaren-proving-ai-can-drive-speed-without-losing-quality/

### For All Things Worth Saving (2021)

Dropbox's first brand platform, by Instrument, launched Aug 5 2021 in Austin, LA, New York, Chicago and San Francisco. It told the stories behind real customers' files and folders (artists, businesses, family archivists) instead of features.

How the system shows: Paraphrase from coverage: simpler visuals and fonts, a smaller color palette, and four interchangeable constructs (story-led, file-led, folder-led, brand-led). Billboards show real folders and file names, such as a Toro y Moi album folder.
Why it works: It makes file storage personal. The file name is the headline, so the product is in the ad without a feature list. This matches the 'human' voice pillar and the 'Make work human' value.
Channels: print and digital billboards, kiosks, wallscapes, connected TV, social / Instagram. Source: https://www.instrument.com/work/dropbox-brand-campaign

### 2017 rebrand (Collins with Dropbox's in-house studio) (2017)

The largest visual change in Dropbox's first decade. It moved Dropbox from file storage to a 'living workspace' for creative work. The box became an abstract glyph, Sharp Grotesk replaced the type, and the palette widened. Instrument, XXIX, Sharp Type and Animade contributed.

How the system shows: Paraphrase from coverage: bold color pairs that 'juxtapose in unexpected ways' (Collins), the palette running 'from blue to whoa', sketchy pencil illustrations against flat color blocks, and split-screen illustrator-and-photographer 'co-creation' images.
Why it works: Expressiveness scales by context, loud in marketing and quiet in product (the team says so in It's Nice That). That is the root of today's guide, where the core three colors stay put and sixteen accents flex.
Channels: identity, product, website, illustration and photo collaborations. Source: https://www.itsnicethat.com/news/dropbox-rebrand-collins-graphic-design-041017

## Applications

| Format | What | Source |
|---|---|---|
| race livery / sponsorship | Dropbox logo on the McLaren MCL38 car and on Lando Norris's and Oscar Piastri's overalls and helmets (from 2024) | https://www.mclaren.com/racing/partners/dropbox/mclaren-racing-announces-dropbox-as-an-official-technology-partner-of-mclaren-formula-1-team/ |
| billboard | Dash x McLaren subway billboards: one on Graphite with an orange checkered stripe, one on full Dropbox Blue with the logo and keyword pills | https://sketchdeck.com/work/dropbox-dash-x-mclaren-proving-ai-can-drive-speed-without-losing-quality/ |
| billboard / wallscape | 'For All Things Worth Saving' print and digital OOH in five US cities, built on real customer folders | https://www.marketingdive.com/news/campaign-trail-dropbox-injects-humanity-into-file-storage-with-revamped-br/604826 |
| video ad | Dash x McLaren spots: 'Work faster with content you already have', with the key word in a blue pill and race-stripe motion graphics | https://sketchdeck.com/work/dropbox-dash-x-mclaren-proving-ai-can-drive-speed-without-losing-quality/ |
| podcast | 'Working Smarter: A podcast about AI and modern work', promoted as a homepage resource card | https://www.dropbox.com/ |
| webinar / announcement bar | Homepage top bar promoting a webinar on small businesses using Dropbox in ChatGPT (observed 2026-10-28) | https://www.dropbox.com/ |
| press release | Standard 'About Dropbox' boilerplate closes every release, e.g. the Q4/FY2025 earnings-date notice | https://investors.dropbox.com/node/13491/pdf |
| social | Instagram posts of real user stories as part of the 2021 platform | https://www.marketingdive.com/news/campaign-trail-dropbox-injects-humanity-into-file-storage-with-revamped-br/604826 |

## By format

How our engine applies Dropbox's system to each format. This is our recipe built from their rules, not something Dropbox publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Announcement strip, white nav with the Tab, Coconut hero with a rimmed rounded product frame, black logo marquee, Graphite band in the wide cut, one inset rounded dark panel, black six-column footer | which feature bands, the accent in photos, how many testimonial cards |
| Deck | 2 | Coconut slides, Graphite type, the Tab top left; blue only on the ask | one accent per section, with its dark partner |
| Proposal page | 2 | Coconut hero, one Graphite band for the price, one blue button for the next step | a customer-files collage of the buyer's own work |
| Ad | 3 | The Tab, a medium-weight headline, a blue button | an accent ground with its dark partner |
| Social post | 4 | An accent ground with its dark partner, plus the glyph | a photo matched to the accent |
| Email | 1 | Full logo top left, one blue button | a spot illustration |
| Error message | 1 | Plain words and the fix | a mini illustration to soften it, as their imagery guide allows |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Dropbox: Coconut and Graphite planes, blue on the action in product and web pieces (campaigns may run full blue grounds), a medium-weight grotesk, an accent with its own dark.
- **Swap test**: Put a competitor's logo on it. If a blue-on-white SaaS page could wear it just as well, it's generic, and it goes back.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Dropbox's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- A formal positioning statement (the one here is our reading of the boilerplate and the brand guide)
- Tone by situation (no published scale)
- Numeric clear space and minimum logo size
- Type scale, tracking and the body face (Atlas Grotesk observed, not published)
- Motion durations
- Photography light, crop and casting rules; illustration style rules
- Input states: dropbox.com homepage has no text input (0 visible inputs on 2026-10-28); not measured.
- Tone by situation: not published; the voice page says Dropbox always sounds like Dropbox in every context.
- Dash x McLaren campaign date and media placements are from the agency case study; Dropbox's own announcement of that campaign was not found. The billboard images may be mockups.
- Dropbox newsroom (dropbox.gcs-web.com) and Dezeen/Design Week returned 403 to fetch; the 2017 rebrand details come from It's Nice That plus search summaries of Design Week and Dezeen.
- Dash for Business release (Oct 15 2024) confirmed through Business Wire and Seeking Alpha listings; full text not fetched.
- Hero frame radius and rim are read from pixels of an animated video (about 28px radius, 8px rim); the live hero has no CSS frame to measure.
- Hover states for the outline-on-dark button and arrow links: no computed change measured (2026-10-29).

Logos and reference images belong to Dropbox. Look at them on Dropbox's own pages; don't reuse them.