What is Dropbox's primary brand color?

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.

What typefaces does Dropbox use?

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.

Why is the canvas cream instead of white?

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.

Why does Dropbox use both 12px cards and 100px pill buttons?

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.

What is the dark band in the middle of the page?

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.

What's missing from this DESIGN.md spec?

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.

Dropbox Design System

Dropbox's design system as a DESIGN.md file.

About Dropbox DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source dropbox.com

Productivity & SaaS
Documentation & Knowledge

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.

What makes it distinct

Single voltage CTADropbox Blue #0061fe carries the lone filled pill per band, never paired with a second filled button
Warm cream canvas #f7f5f2 instead of pure whitethe brand softens its workspace identity with a 4-percent warm tint
Dual-typeface contrastSharp Grotesk at weight 500 for display headlines, Atlas Grotesk Web for every body and UI surface
Two-radius geometry12 to 16px on cards and surfaces, 100px on every interactive pill button
Inverted security bandnear-black #000000 dark surface drops into the middle of a cream marketing flow for the security pitch

Live at dropbox.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

dropbox.com

Explore Dropbox

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Dropbox design system FAQ

Common questions about Dropbox's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Dropbox — official site

Cloud storage, file sharing, and Dash content search for teams of every size.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Dropbox in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→