---
title: "Dropbox design system"
variant: extended
source: https://www.dropbox.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/dropbox-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dropbox · Design System

> Calm, spacious productivity with a vivid blue signal

**Theme:** light · **Industry:** saas · **Source:** https://www.dropbox.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dropbox pairs warm, open surfaces and confident typography with vivid blue actions and restrained dark feature bands. The long homepage alternates product storytelling, integrations, customer proof, industry use cases, editorial cards, and a high-contrast footer.

## North star

Keep the interface calm and legible, using generous open space and Dropbox blue only to make important actions unmistakable.

## Overview

The page is built around a warm, near-white canvas (#f7f5f2) that gives the opening hero a quiet, spacious feel. Near-black text (#1e1919) anchors the brand voice; muted taupe-gray (#716b61) carries supporting copy without competing with headings. Vivid Dropbox blue (#0061fe) is reserved for high-intent actions and selected navigation details, so it reads as a clear signal rather than a wash of color. Large editorial headlines pair with readable sans-serif body text, while left-aligned hero copy contrasts with centered feature introductions and orderly card grids. Broad whitespace separates the long sequence of sections. The page alternates warm and white surfaces with a distinctive near-black integrations band and a black footer. Product UI, customer marks, photography, and motion-led media provide visual evidence; the interface itself remains mostly flat, using softly rounded cards and restrained outlines instead of decorative shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Coconut | `#f7f5f2` | `--color-coconut` | surface | Warm canvas for the hero, trust-logo band, resource area, and footer note. |
| Dropbox Blue | `#0061fe` | `--color-dropbox-blue` | accent | Primary CTA fill, selected navigation detail, and conspicuous interactive accents. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Canvas for the central product-story sections and customer or industry content. |
| Graphite | `#1e1919` | `--color-graphite` | brand | Main heading and body ink; also the background for the AI integrations feature band. |
| Warm Taupe | `#716b61` | `--color-warm-taupe` | semantic | Muted supporting text and secondary descriptive copy on light surfaces. |
| True Black | `#000000` | `--color-true-black` | surface | Full-width footer background; do not confuse with the warmer Graphite text color. |
| Slate Gradient | `#292c31` | `--color-slate-gradient` | semantic | Measured gradient stop, mainly associated with dark product or interface imagery. |
| Night Panel | `#1c1d21` | `--color-night-panel` | surface | Dark testimonial-card surface within the security and customer-proof presentation. |
| Soft Pewter | `#9f9f9e` | `--color-soft-pewter` | semantic | Minor muted text color; secondary to the dominant warm-gray copy. |
| Oat Shadow | `#eee9e2` | `--color-oat-shadow` | surface | Occasional pale card surface, not a defining page-wide color. |
| Deep Link Blue | `#0044af` | `--color-deep-link-blue` | accent | Small-scale blue text accent, distinct from the brighter primary CTA blue. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f5f2` (Coconut) · `--color-surface-2` → `#1e1919` (Graphite) · `--color-surface-3` → `#000000` (True Black) · `--color-surface-4` → `#1c1d21` (Night Panel) · `--color-text` → `#1e1919` (Graphite) · `--color-text-muted` → `#f7f5f2` (Coconut) · `--color-text-subtle` → `#716b61` (Warm Taupe) · `--color-border` → `#0061fe` (Dropbox Blue) · `--color-accent` → `#0061fe` (Dropbox Blue) · `--color-accent-2` → `#0044af` (Deep Link Blue) · `--color-on-accent` → `#f7f5f2` (Coconut)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1919` | `#ffffff` | 17.38:1 | AAA |
| `#1e1919` | `#f7f5f2` | 15.97:1 | AAA |
| `#1e1919` | `#000000` | 1.21:1 | fail |
| `#f7f5f2` | `#ffffff` | 1.09:1 | fail |
| `#f7f5f2` | `#1e1919` | 15.97:1 | AAA |
| `#f7f5f2` | `#000000` | 19.3:1 | AAA |
| `#716b61` | `#ffffff` | 5.28:1 | AA |
| `#716b61` | `#f7f5f2` | 4.85:1 | AA |
| `#716b61` | `#1e1919` | 3.29:1 | AA-large |
| `#716b61` | `#000000` | 3.98:1 | AA-large |

### Gradients

- `linear-gradient(rgb(41, 44, 49), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atlas Grotesk Web | `--font-body` | webfont | 400, 500, 700 | Primary navigation, body copy, links, captions, and smaller headings. | Inter |
| Sharp Grotesk | `--font-display` | webfont | 500 | Prominent hero and section headings, plus selected subheadings. | DM Sans |
| Sharp Grotesk 23 | `--font-sharp-grotesk-23` | webfont | 400 | Measured secondary section-heading style. | DM Sans |

- **Atlas Grotesk Web:** Use a clean sans-serif voice with regular body weight; keep case natural and tracking neutral.
- **Sharp Grotesk:** Medium-weight display voice with compact, confident shapes; avoid all-caps styling.
- **Sharp Grotesk 23:** Regular-weight heading treatment; keep natural case and neutral tracking.

### Type scale — Major Third (ratio ≈ 1.257, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.2 | 0 | — | Sharp Grotesk | Primary hero headline introducing Dropbox content and AI tools. |
| h2 | 32px | 400 | 1.2 | 0 | — | Sharp Grotesk 23 | Major feature and section introductions. |
| h3 | 26px | 500 | 1.3 | 0 | — | Sharp Grotesk | Card, integration, and subsection headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | Atlas Grotesk Web | Supporting headings within content modules. |
| body | 16px | 400 | 1.5 | 0 | — | Atlas Grotesk Web | Paragraphs explaining product benefits and use cases. |
| caption | 14px | 400 | 1.57 | 0 | — | Atlas Grotesk Web | Small labels, article metadata, and supporting details. |
| nav | 14px | 400 | 1.43 | 0 | — | Atlas Grotesk Web | Header navigation and utility links. |
| link | 16px | 400 | 1.5 | 0 | — | Atlas Grotesk Web | Inline actions and contextual calls to action. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 48, 52, 72, 120 px.
- Section rhythm 72px · element gap 4px · card padding — · max content width 1344px.

Use a wide centered content frame, measured at a 1344px page maximum, with comfortable density and generous whitespace between major stories. The hero is a two-column composition with copy leading on the left and a softly presented product visual to the right. Follow it with a centered trust band, a dark integration section, then broad white feature zones that mix centered introductions with split media-and-copy layouts. Grid cards align consistently and remain visually light. Keep section transitions spacious; reserve denser layouts for the integration cards, testimonials, industry tiles, and footer columns.

## Shape & elevation

- Radius: button `16px` · card `12px` · xs `8px` · sm `12px` · md `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.6, 1)` on interactive elements.

The page is mostly flat: clear background bands and whitespace do more work than shadows. Cards have softly rounded corners, with measured 12px card and 16px testimonial radii; buttons use measured 12px or 16px radii. Use dark panels and layered product imagery selectively for contrast, not as a global elevation system. Avoid inventing shadow treatments.

## Imagery

Use real product-interface visuals, motion or video frames, and customer or industry photography as proof of the product's role in work. Place imagery in spacious compositions rather than filling every surface. The hero UI appears soft and understated; later security and testimonial content can use stronger dark framing. Brand and partner logos sit on clean backgrounds, while article cards use cropped editorial images.

## Components

### Primary CTA

Bright #0061fe button with light text and a measured 12px or 16px radius; use for prominent conversion actions.

### Header navigation

Compact horizontal navigation on a light surface with Graphite text, utility links, and a blue Get started action.

### Hero split

Large left-aligned headline, concise supporting paragraph, blue CTA, and product interface media on the right.

### Integration band

Full-width #1e1919 section with centered introduction, light text, and a multi-column set of integration cards and links.

### Feature story

Spacious white product section pairing a centered or split-layout introduction with product imagery or UI demonstrations.

### Industry card

Light, rounded card combining a rectangular industry photo, compact title, brief copy, and a text link.

### Footer

Full-width #000000 block with light text, multiple link columns, social marks, and a language control.

### Measured component styles

- **Primary button** (“Get started”): background #0061fe · text #f7f5f2 · border 2px solid #0061fe · radius 12px · padding 0px 12px · 400 16px Times New Roman
- **Secondary button** (“Skip to main content”): background #1e1919 · text #f7f5f2 · radius 0px · padding 0px · 400 16px Times New Roman
- **Link** (“See all integrations”): transparent background · text #f7f5f2 · radius 0px · padding 0px · 400 16px Times New Roman
- **Card** (“Construction With Dropbox for teams, you”): background #f7f5f2 · text #000000 · radius 12px · padding 0px · 400 16px Times New Roman
- **Navigation item** (“Products Solutions Business Pricing Cont”): transparent background · text #1e1919 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use warm off-white and white as the dominant page surfaces.
- Reserve #0061fe for high-priority actions and focused accents.
- Set primary copy in near-black and supporting copy in muted gray.
- Give major content sections generous breathing room.
- Alternate light storytelling areas with purposeful dark feature bands.
- Use product UI and relevant photography as evidence, not decoration.

## Don't

- Do not turn the page into a saturated blue canvas.
- Do not compress the long-form sections into a dense dashboard.
- Do not use heavy shadows as the main way to separate cards.
- Do not style all headings in uppercase.
- Do not use decorative gradients across the main page surfaces.
- Do not let imagery overpower the text and action hierarchy.

## Agent prompt

Build a new Dropbox-style SaaS page with a calm, spacious editorial rhythm. Use Coconut (#f7f5f2) and Gallery White (#ffffff) as the primary surfaces, Graphite (#1e1919) for headings and body ink, Warm Taupe (#716b61) for supporting copy, and Dropbox Blue (#0061fe) sparingly for primary actions. Start with a two-column hero: clear left-aligned headline and copy, a rounded CTA, and product UI media opposite. Follow with a centered trust or proof band, then a dark integrations feature on Graphite. Continue with wide, image-supported product stories and tidy card grids, leaving generous whitespace between sections. Use near-black panels selectively for testimonials and keep the footer True Black (#000000). Favor clean sans-serif typography, soft corners, and mostly flat surfaces; avoid invented shadows, excessive decoration, and tight spacing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Warm two-column hero with left-aligned copy and right-side product interface media. | primary trial CTA, product benefit introduction | warm off-white canvas, split layout, blue rounded CTA |
| 2 | logo-cloud | Centered trust statement above a broad row of customer logos. | social proof, customer recognition | warm off-white band, logo strip, centered heading |
| 3 | integrations | Single-column dark band with centered introduction and lower integration content. | integration discovery, browse all integrations | Graphite background, centered heading, light text |
| 4 | integrations | Three-column partner cards within the dark integrations area. | connect now links, partner exploration | brand marks, compact text cards, dark surface |
| 5 | integrations | Two-column continuation of partner cards on the same dark band. | connect now links, learn more | sparse two-column row, partner marks, light text on dark |
| 6 | feature-split | Spacious white feature story with centered introduction and large supporting media. | search benefit explanation, free-trial link | white canvas, large product visual, centered title |
| 7 | feature-split | Wide two-column feature area with centered heading and product visual. | feature education, trial action | white surface, split media and copy, softly framed UI |
| 8 | feature-split | Two-column white feature section with a centered introduction and product demonstration. | sharing benefits, learn more action | white surface, large visual, spacious alignment |
| 9 | product-showcase | Centered security introduction above a layered, dark product showcase. | security reassurance, trial and learn-more actions | dark product panel, layered interface imagery, centered copy |
| 10 | testimonials | Three testimonial cards aligned in a horizontal row. | customer proof, watch testimonial | dark testimonial cards, portrait and media imagery, compact quotes |
| 11 | feature-grid | Two-column grid of industry cards with image, copy, and link. | industry discovery, learn more links | light rounded cards, cropped photography, repeated card pattern |
| 12 | content-feed | Warm-background row of three editorial resource cards. | read article, browse resources | article imagery, card grid, editorial titles |
| 13 | other | Short full-width note beneath the resource section. | availability clarification | small disclaimer text, warm light background |
| 14 | footer | Black footer with six link columns and supporting brand information. | site-wide navigation, follow social accounts | black background, light link text, multi-column lists |
| 15 | footer | Black footer continuation with language control and secondary utility content. | language selection | language selector, social or utility marks, black surface |

## Source CSS custom properties (selected)

```css
--dwg-tooltip__background: #faf9f7;
--dwg-tooltip__background--inverse: #2b2929;
--dwg-nav__height--secondary: 48px;
--DWG__TEMP__color__opacity--darken1: hsla(36,23%,55%,.14);
--DWG__TEMP__color__opacity--darken2: hsla(36,23%,55%,.24);
--DWG__TEMP__color__opacity--darken3: hsla(36,23%,55%,.32);
--DWG__TEMP__color__opacity--darken4: rgba(0,0,0,.08);
--DWG__TEMP__color__opacity--lighten1: hsla(0,0%,100%,.16);
--DWG__TEMP__color__opacity--lighten2: hsla(0,0%,100%,.32);
--DWG__TEMP__color__brand__coconut_200: #fff;
--DWG__TEMP__color__brand__coconut_300: #faf9f7;
--DWG__TEMP__color__brand__coconut: #f7f5f2;
--DWG__TEMP__color__brand__coconut_500: #f2eee8;
--DWG__TEMP__color__brand__coconut_600: #eee9e2;
--DWG__TEMP__color__brand__graphite_200: #2b2929;
--DWG__TEMP__color__brand__graphite_300: #242121;
--DWG__TEMP__color__brand__graphite: #1e1919;
--DWG__TEMP__color__brand__graphite_500: #161313;
--DWG__TEMP__color__brand__graphite_600: #000;
--DWG__TEMP__color__utility__overlay: rgba(84,74,68,.5);
--dwg-duration__125: 0.10s;
--dwg-duration__333: 0.30s;
--dwg-duration__708: 0.70s;
--dwg-duration__1000: 1.00s;
--dwg-duration__non-motion: 0.10s;
--dwg-duration__micro: 0.30s;
--dwg-duration__micro-fast: 0.10s;
--dwg-duration__surface: 0.30s;
--dwg-duration__surface-slow: 0.70s;
--dwg-spacing__unit--0: 0;
--dwg-spacing__unit--0_5: calc(8px/2);
--dwg-spacing__unit--1: 8px;
--dwg-spacing__unit--1_5: calc(8px*1.5);
--dwg-spacing__unit--2: calc(8px*2);
--dwg-spacing__unit--3: calc(8px*3);
--dwg-spacing__unit--4: calc(8px*4);
--dwg-spacing__unit--5: calc(8px*5);
--dwg-spacing__unit--6: calc(8px*6);
--dwg-spacing__unit--8: calc(8px*8);
--dwg-spacing__unit--9: calc(8px*9);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dropbox-com