Design system do dropbox.com

---
version: alpha
name: "dropbox.com"
description: "Design system extracted from https://www.dropbox.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#eee9e2"
  foreground: "#f7f5f2"
  muted-foreground: "#1e1919"
  primary: "#0061fe"
  on-primary: "#ffffff"
  secondary: "#cd2f7b"
  border: "#1e1919"
typography:
  headline-display:
    fontFamily: "Sharp Grotesk"
    fontSize: "40px"
    fontWeight: 500
    lineHeight: "1.2"
  headline-lg:
    fontFamily: "Sharp Grotesk 23"
    fontSize: "32px"
    fontWeight: 400
    lineHeight: "1.2"
  headline-md:
    fontFamily: "Sharp Grotesk"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: "1.2"
  body-md:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "12px"
    fontWeight: 700
    lineHeight: "1.2"
  button:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
rounded:
  none: "0px"
  lg: "12px"
  xl: "16px"
  md: "8px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "24px"
  6: "32px"
  7: "48px"
  8: "52px"
  9: "72px"
  10: "120px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#1e1919"
    typography: "{typography.button}"
    rounded: "0px"
    height: "72px"
    padding: "16px 12px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#f7f5f2"
    typography: "{typography.button}"
    rounded: "12px"
    height: "40px"
    padding: "0px 12px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#1e1919"
    typography: "{typography.button}"
    rounded: "16px"
    height: "55px"
    padding: "16px 24px"
---

# dropbox.com

## Overview

Dropbox: Secure cloud storage, file sharing, and more: Discover Dropbox – secure, easy cloud storage for file sharing and collaboration. With Dash, save time and organize all your company content in one place.

Soft, well-rounded controls, one soft shadow for depth, confident display type at 40px / 500, a single blue accent on neutrals. The site ships in light mode by default. Measured from 1560 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#eee9e2` | Cards, panels, raised or recessed surfaces |
| foreground | `#f7f5f2` | Primary text |
| muted-foreground | `#1e1919` | Secondary text, captions |
| primary | `#0061fe` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#cd2f7b` | Secondary accent (red) |
| border | `#1e1919` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#1e1919`, `#000000`, `#eee9e2`, `#0061fe`.

Gradients in use: `linear-gradient(rgb(41, 44, 49), rgb(0, 0, 0))`.

The accent `#0061fe` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Sharp Grotesk** for h1, h3: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Sharp Grotesk 23** for h2: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Atlas Grotesk Web** for body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Sharp Grotesk | 40px | 500 | 1.2 | normal |
| headline-lg | Sharp Grotesk 23 | 32px | 400 | 1.2 | normal |
| headline-md | Sharp Grotesk | 18px | 500 | 1.2 | normal |
| body-md | Atlas Grotesk Web | 16px | 400 | 1.5 | normal |
| label-md | Atlas Grotesk Web | 12px | 700 | 1.2 | normal |
| button | Atlas Grotesk Web | 16px | 400 | 1.4 | normal |

Type scale in use: 12px, 14px, 16px, 18px, 20px, 26px, 32px, 40px. Base body size 16px.

The H1 renders at 40px / 500, start aligned, up to 513px wide. Sample: "One place to store, share, and collaborate".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24, 32, 48, 52, 72, 120 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 32, 48, 72 px.
- Content max width: 1344px, centred.
- Breakpoints: 480px, 768px, 1024px, 1280px, 1440px.
- Header: 72px tall, sticky, background `rgb(255, 255, 255)`; 12 nav links at 16px / 400 (DropboxStore, share, and access files across devices · ReplayReview and approve videos faster · SignRequest and add signatures to documents · Reclaim.aiSchedule habits, tasks, and meetings with AI · DashFind, organize, and protect company content · DocSendSend documents securely and track activity · FaxReceive and send faxes from anywhere · Early accessPreview new product experiences).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.1) 0px 16px 32px 0px`

## Shapes

- Buttons: 12px
- Inputs: 12px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, lg 12px, xl 16px, md 8px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#1e1919`, border none, radius 0px, height 72px, padding 16px 12px, 13.3333px / 400. Sample label: "Products".

### Button, primary

Background `#0061fe`, text `#f7f5f2`, border 2px solid #0061fe, radius 12px, height 40px, padding 0px 12px, 16px / 400. Sample label: "Get started".

### Button, secondary

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#1e1919`, border 2px solid #1e1919, radius 16px, height 55px, padding 16px 24px, 16px / 400. Sample label: "Try Dropbox free".

### Link

Colour `#f7f5f2`, no underline at rest, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1344px | 48px | 16px | 40px, 2 lines, start | 72px, 6 links, 1 CTA | media below text | 7→6 col; 2→2 col; 2→1 col | content-width |
| laptop 1024px | 945px | 48px | 16px | 40px, 3 lines, start | 72px, 3 links, 1 CTA | media below text | 2→2 col; 2→1 col; 4→4 col | content-width |
| tablet 768px | 672px | 32px | 16px | 40px, 2 lines, start | 72px, 3 links, 1 CTA | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 334px | 24px | 16px | 32px, 3 lines, start | 48px, hamburger (icon) | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 40px → 32px (80%), 2 → 3 lines.
- Nav collapses to a hamburger by 390px (first seen at 390px); header 72px → 48px.
- Body text stays 16px at every width.
- Phone side gutter 24px.
- Section top padding 72px → 72px.

## Interaction & Motion

152 elements carry transitions; typical 0.125s with linear, mostly on background-color, color, border-color. 1 running keyframe animations (_keyframes-standard_90hav_1 90s infinite).

- Hover on button-primary ("Get started"): background #0061fe → #0057e5; cursor pointer; transition background-color, border-color | 0.1s, 0.1s | cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1).
- Hover on button-secondary ("Try Dropbox free"): background #0061fe → #0057e5; cursor pointer; transition background-color, border-color | 0.1s, 0.1s | cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1).
- Hover on nav-link ("Business"): text #1e1919 → #0061fe, border #1e1919 → #0061fe, icon/inner colour → #0061fe; cursor pointer; transition color | 0.125s | linear.
- Focus on button-primary: box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px.
- Tooltip triggers exist (3 × aria-describedby, 2 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- Hover/click menus: below the trigger, 8px gap, left edges aligned; transparent, radius 0px, padding 0px 0px, shadow none; 16 items, 92px tall, 16px, padding 0px 0px, with descriptions, 3 columns; fades in (opacity 0.09 at 40ms → 1.00); removed instantly on leave.
- 33 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).
- Portal roots present: dwg-modal__portal, dwg-modal__portal, dwg-modal__portal.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#0061fe` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in Atlas Grotesk Web and headings in Sharp Grotesk.
- Do match corner radii per element class (buttons 12px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).