<!-- Generated by ExtractVibe — https://extractvibe.com/brand/dropbox.com -->
<!-- Extracted: 2026-05-03T16:53:52.705Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Dropbox"
description: "Dropbox embodies a sophisticated, editorial aesthetic that blends professional reliability with modern clarity. The brand feels like a trusted, high-end organizational tool, using stark contrast and serif accents to convey authority and ease of use without unnecessary visual noise."
colors:
  primary: "#ffffff"
  tertiary: "#a79272"
  neutral: "#1e1919"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#1e1919"
  border: "#eee9e2"
typography:
  display-lg:
    fontFamily: "Sharp Grotesk"
    fontSize: "40px"
    fontWeight: "500"
    lineHeight: "48px"
  headline-lg:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "20px"
    fontWeight: "500"
    lineHeight: "24px"
  headline-md:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "18px"
  body-md:
    fontFamily: "Times New Roman"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "12px"
  lg: "16px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#1e1919"
    textColor: "#f7f5f2"
    rounded: "0px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#f7f5f2"
  button-primary:
    backgroundColor: "#0061fe"
    textColor: "#f7f5f2"
    rounded: "12px"
    padding: "0px 12px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#0061fe"
    borderWidth: "2px"
  button-outline:
    textColor: "#1e1919"
    rounded: "16px"
    padding: "16px 24px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#1e1919"
    borderWidth: "2px"
---

# Dropbox — Design System

## Overview

Dropbox design establishes a sophisticated, editorial atmosphere, aligning with the Sage and Ruler archetypes. It projects professional reliability and modern clarity, akin to brands such as Stripe, Linear, Notion, and Apple. The aesthetic prioritizes stark contrast and strategic serif accents to convey authority and ease of use, ensuring a trusted, high-end organizational tool experience. This design system is built on precision and intentionality, eliminating visual clutter to focus on core functionality and user experience.

This design explicitly avoids ornate, playful, or overly decorative elements. It is not whimsical, nor does it rely on vibrant, attention-seeking color palettes. Instead, it embraces a minimalist structure that emphasizes content and hierarchy through refined typography and a restrained color scheme. The visual language is direct, functional, and authoritative, designed to instill confidence and facilitate efficient interaction without distraction. It is a system engineered for clarity and professional efficacy.

**Key characteristics:**

- Vibe — editorial, minimalist, professional, clean, trustworthy, structured
- Archetypes — The Sage, The Ruler
- Comparable to — Stripe, Linear, Notion, Apple
- Design era — contemporary-minimal
- Emotional tone — calm-authoritative
- Target audience — Knowledge workers, creative professionals, and enterprise teams seeking reliable, frictionless collaboration tools.
- Visual energy — 4/10 (moderate)

## Colors

The color philosophy centers on a minimalist, high-contrast approach. The primary use of `#ffffff` for both primary and surface colors reinforces a clean, expansive, and uncluttered environment. This stark white canvas allows content and functional elements to stand out with precision, signaling clarity and professionalism. The absence of a broad color palette underscores the brand's commitment to understated elegance and focus, aligning with its trustworthy and structured identity.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ffffff` | White |
| accent / tertiary | `#a79272` | Rosy Brown |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#1e1919` | Near-Black |
| border | `#eee9e2` | Linen |
| muted | `#1e1919` | Near-Black |

## Typography

The typographic system leverages a precise combination of serif and sans-serif fonts to establish hierarchy and convey authority. Times New Roman provides a classic, editorial gravitas, while Sharp Grotesk, Atlas Grotesk Web, and Arial offer modern clarity and legibility for interface elements. This dual approach ensures that content is both distinguished and accessible. The hierarchy is clear and functional, communicating information with professional precision and reinforcing the brand's structured and trustworthy character.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Times New Roman | body | system | 400 |
| Sharp Grotesk | heading | self-hosted | 500 |
| Atlas Grotesk Web | heading | self-hosted | 500 |
| Arial | body | system | 400 |
| Atlas Grotesk Web | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Sharp Grotesk | 40px | 500 | 48px | — |
| Heading 2 | Atlas Grotesk Web | 20px | 500 | 24px | — |
| Heading 3 | Atlas Grotesk Web | 14px | 500 | 18px | — |
| Body | Times New Roman | 16px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `sm` — 12px
- `lg` — 16px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#1e1919`
- Text — `#f7f5f2`
- Radius — `0px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #f7f5f2`
- Sample copy — "Skip to main content"

**Primary**

- Background — `#0061fe`
- Text — `#f7f5f2`
- Radius — `12px`
- Padding — `0px 12px`
- Font size — `16px`
- Font weight — `400`
- Border — `2px solid #0061fe`
- Sample copy — "Get started"

**Outline**

- Text — `#1e1919`
- Radius — `16px`
- Padding — `16px 24px`
- Font size — `16px`
- Font weight — `400`
- Border — `2px solid #1e1919`
- Sample copy — "Learn more"

## Do's and Don'ts

### Do

- Use Sharp Grotesk or Atlas Grotesk Web at 500 weight for all headings, strictly in sentence-case.
- Use Times New Roman or Arial at 400 weight for body copy to maintain high readability and a classic editorial feel.
- Style primary CTA buttons with #0061fe background, #f7f5f2 text, 12px border-radius, and no border.
- Style outline buttons with transparent background, #1e1919 text, #1e1919 border, 16px border-radius, and 16px 24px padding.
- Maintain a flat design aesthetic: use #ffffff background, #000000 text, and #a79272 accent sparingly.
- Avoid all box-shadows and gradients; rely on whitespace and border contrast for visual hierarchy.
- Use action-oriented imperative verbs for CTAs (e.g., 'Get started', 'Learn more') with low-friction qualifiers.
- Keep copy simple and jargon-light, utilizing parallelism and alliteration for rhythm (e.g., 'Find, organize, and share').

### Don't

- Do not use title case for headings; the brand strictly uses sentence-case.
- Do not use emoji or exclamations in marketing copy or UI elements.
- Do not apply box-shadows or gradients to any element; the design is strictly flat.
- Do not use serif fonts for headings; reserve Times New Roman for body text only.
- Do not use rounded corners smaller than 12px for buttons; maintain the 12px/16px radius system.
- Do not use vibrant or saturated colors outside the primary blue (#0061fe) and accent brown (#a79272).
- Do not use complex or multi-layered shadows; the interface relies on clean lines and solid colors.
- Do not use aggressive or high-energy tones; keep the voice matter-of-fact and accessible.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — some
- CTA style — action-oriented imperative verbs with low-friction qualifiers
- Rhetorical devices — parallelism, alliteration, metaphor

### Sample copy

> Find, organize, and share your work, all in one place

> The AI teammate that understands your work

> Find it fast, every time

> Everything in order, everyone aligned

> Send it safely, share it fast

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/dropbox.com) | 100% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-svg-16.svg) | 84% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-svg-17.svg) | 84% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-4.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-8.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-9.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-10.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-11.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-12.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-13.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-14.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/dropbox.com/logo-15.svg) | 80% |

## Sources

- Official brand guidelines — https://dropbox.com/branding
- Live brand page — https://extractvibe.com/brand/dropbox.com
- Raw JSON — https://extractvibe.com/api/brand/dropbox.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/dropbox.com/design.md
- Extracted — 2026-05-03T16:53:52.705Z
- Generator — ExtractVibe vv1
- Quality score — 100/100