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

# Dropbox — Brand Guidelines · Design System

> A quiet canvas, punctuated by Dropbox blue

**Theme:** light · **Industry:** design · **Source:** https://brand.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._

A sparse brand-guidelines landing page built around a bright blue headline on a white canvas. Its first view prioritizes typography and extensive whitespace over navigation, cards, or decorative content.

## North star

Let one vivid, tightly set brand message sit on an expansive white canvas, and keep every other element subordinate.

## Overview

The page’s visual identity is unusually restrained in the supplied screenshots: a white canvas dominates, with a compact, bold blue headline positioned toward the upper-left portion of a broad empty field. The measured palette includes vivid brand and secondary hues, but the first viewport does not show them as broad section bands; treat those colors as supporting guideline or navigation colors rather than forcing them into the hero. Typography carries the composition: Dropbox’s sharp grotesk gives the headline a firm, compact presence, while Atlas Grotesk is the measured workhorse for smaller text and links. The page is sparse and editorial, with a tiny Dropbox mark far below the headline reinforcing the large vertical pause. Avoid invented panels, shadows, borders, or decorative imagery. Preserve the contrast between a small, confident message and generous uninterrupted whitespace.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Graphite | `#736c64` | `--color-warm-graphite` | neutral | Muted text color for secondary copy where present. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas; maintains the broad, uninterrupted whitespace. |
| Dropbox Blue | `#0061fe` | `--color-dropbox-blue` | brand | Primary headline and prominent text-link color; the defining accent in the screenshot. |
| Berry Ink | `#892055` | `--color-berry-ink` | accent | Measured brand palette color associated with navigation; not prominent in the supplied viewport. |
| Tangerine Pop | `#ff8c19` | `--color-tangerine-pop` | accent | Measured navigation palette color; use as a supporting brand hue, not as a hero background. |
| Sky Link | `#5f9dff` | `--color-sky-link` | accent | Secondary link color, including the measured Dropbox Brand Studio link. |
| Lilac Panel | `#c8aff0` | `--color-lilac-panel` | surface | Measured surface and navigation tile hue; absent from the sparse screenshot composition. |
| Pool Cyan | `#3dd3ee` | `--color-pool-cyan` | accent | Measured navigation tile color; reserve for brand-guideline navigation or illustrative elements. |
| Citrus Tile | `#b4dc19` | `--color-citrus-tile` | accent | Supporting measured navigation hue; not visible as a page-wide surface in the screenshot. |
| Soft Black | `#1e1919` | `--color-soft-black` | neutral | Dark heading and body text color for content that is not highlighted in blue. |
| Blush Surface | `#ffafa5` | `--color-blush-surface` | surface | Measured card or surface color; not a defining first-viewport background. |
| Bright Link Blue | `#3080ff` | `--color-bright-link-blue` | accent | Minor measured blue text variation; keep subordinate to the primary Dropbox Blue. |
| Forest Text | `#175641` | `--color-forest-text` | semantic | Minor measured text color, likely content-specific rather than a core page color. |
| Burnt Umber | `#6d2e09` | `--color-burnt-umber` | semantic | Measured within a card or navigation sample; treat as content-specific, not a base color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#c8aff0` (Lilac Panel) · `--color-surface-2` → `#ffafa5` (Blush Surface) · `--color-text` → `#1e1919` (Soft Black) · `--color-text-muted` → `#736c64` (Warm Graphite) · `--color-accent` → `#0061fe` (Dropbox Blue) · `--color-accent-2` → `#892055` (Berry Ink) · `--color-accent-3` → `#ff8c19` (Tangerine Pop)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1919` | `#ffffff` | 17.38:1 | AAA |
| `#1e1919` | `#c8aff0` | 8.98:1 | AAA |
| `#1e1919` | `#ffafa5` | 9.87:1 | AAA |
| `#736c64` | `#ffffff` | 5.17:1 | AA |
| `#736c64` | `#c8aff0` | 2.67:1 | fail |
| `#736c64` | `#ffafa5` | 2.94:1 | fail |
| `#0061fe` | `#ffffff` | 5.07:1 | AA |
| `#0061fe` | `#c8aff0` | 2.62:1 | fail |
| `#0061fe` | `#ffafa5` | 2.88:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atlasgrotesk Web | `--font-body` | webfont | 400, 500 | Body copy, captions, navigation labels, and small links. | Inter |
| Dbsharpgroteskvariable Vf | `--font-display` | webfont | 700, 500 | Large display headings and prominent navigation headings. | Space Grotesk |

- **Atlasgrotesk Web:** Measured at regular and medium weights; keep small text clean and mostly sentence case.
- **Dbsharpgroteskvariable Vf:** Use bold or medium weight with subtly tight tracking; headline is compact and sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.37, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1.2 | -0.02em | — | Dbsharpgroteskvariable Vf | Primary blue brand-guidelines headline. |
| h2 | 33.5px | 500 | 0.8 | -0.02em | — | Dbsharpgroteskvariable Vf | Large secondary heading, if additional content is introduced. |
| h3 | 30px | 700 | 1.2 | -0.02em | — | Dbsharpgroteskvariable Vf | Bold section or feature heading. |
| body | 14px | 400 | 1.57 | 0 | — | Atlasgrotesk Web | Supporting explanatory copy. |
| caption | 12px | 500 | 1.67 | 0 | — | Atlasgrotesk Web | Small supporting labels or annotations. |
| nav | 33.5px | 500 | 0.8 | -0.02em | — | Dbsharpgroteskvariable Vf | Large-format navigation heading in guideline navigation. |
| link | 12px | 500 | 1.67 | 0 | — | Atlasgrotesk Web | Compact text links and secondary destinations. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 6, 8, 12, 14, 16, 18, 22, 23, 24, 32 px.
- Section rhythm — · element gap 16px · card padding — · max content width —.

The screenshot places a narrow headline block well in from the left edge and near the top, leaving most of the viewport empty. Alignment is left-led rather than centered, with a small Dropbox mark appearing much farther down. The full-page capture remains exceptionally sparse. Measurements do not establish a reliable max-width or grid, so do not impose a numeric container size. Keep content density low, preserve generous vertical separation, and introduce additional sections only when the page content requires them.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.35s ease` on interactive elements.

The visible page reads as flat: the white canvas has no apparent shadow, border, or layered card treatment. Although measured samples include colorful navigation tiles and card colors, those do not define the screenshot’s first view. Avoid adding elevation or hairlines without a clear content need; let spacing and color contrast establish hierarchy.

## Imagery

The supplied screenshots show no photography, product mockups, or large illustrations. A small blue Dropbox symbol is the only visible graphic, isolated against the white canvas. Keep imagery minimal and brand-led; if adding visual content to a new page, use it as a deliberate supporting element rather than filling the empty field with decorative assets.

## Components

### Display headline

A compact multi-line, bold Dropbox Blue statement set in the sharp grotesk and aligned to the left.

### Brand mark

A small blue Dropbox symbol appears well below the headline, surrounded by extensive whitespace.

### Text links

Measured links use Dropbox Blue or Sky Link, in Atlas Grotesk at a small, medium-weight scale.

### Guideline navigation tiles

Measured navigation includes colorful tiles such as Pool Cyan and Lilac Panel; they are not visible in the supplied first viewport.

### Supporting text

Use Soft Black for primary dark copy and Warm Graphite for muted supporting text.

### Measured component styles

- **Primary button** (“At Dropbox, our Brand Guidelines help us”): transparent background · text #0061fe · border 1px solid · radius 0px · padding 0px · 400 14px Atlasgrotesk Web
- **Link** (“Brand Partner Toolkit”): transparent background · text #0061fe · radius 0px · padding 0px · 400 14px Atlasgrotesk Web
- **Card**: background #be4b0a · text #6d2e09 · border 2px solid · radius 0px · padding 0px · 400 14px Atlasgrotesk Web
- **Navigation item** (“Framework Voice & Tone Logo Typography I”): transparent background · text #1e1919 · radius 0px · padding 0px · 400 14px Atlasgrotesk Web

## Do

- Use Gallery White as the dominant canvas.
- Make Dropbox Blue the headline’s defining color.
- Keep the headline left-aligned and tightly composed.
- Preserve generous whitespace around each visible element.
- Use the measured grotesk families or close substitutes.
- Keep the Dropbox mark small and visually secondary.

## Don't

- Do not fill the open canvas with invented cards or sections.
- Do not use colorful palette hues as arbitrary full-page backgrounds.
- Do not add shadows or borders absent from the visual reference.
- Do not center the headline by default.
- Do not let links or supporting copy compete with the headline.
- Do not introduce prominent photography or decorative illustrations.

## Agent prompt

Build a new page in the restrained Dropbox Brand Guidelines visual style. Use Gallery White (#ffffff) as the dominant canvas and place a compact, left-aligned display message in Dropbox Blue (#0061fe) near the top of the content area. Use a bold sharp-grotesk-style face for display text and Atlas Grotesk or a close substitute such as Inter for supporting copy and links. Keep the layout sparse, with extensive uninterrupted whitespace and only a small, subordinate Dropbox mark or similarly restrained brand graphic. Use Soft Black (#1e1919) for dark copy, Warm Graphite (#736c64) for muted text, and Sky Link (#5f9dff) only for secondary links. Avoid invented cards, shadows, borders, large images, and arbitrary color bands. Treat the other measured palette hues as optional guideline-navigation accents, not mandatory hero decoration.

## Source CSS custom properties (selected)

```css
--nav-tile-gap: 10px;
```

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