---
version: alpha
name: "dropbox.com"
description: "Design system extracted from https://www.dropbox.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#eee9e2"
  surface-2: "#deebff"
  foreground: "#f7f5f2"
  primary: "#0061fe"
  on-primary: "#ffffff"
  secondary: "#cd2f7b"
  border: "#1e1919"
typography:
  headline-display:
    fontFamily: "Sharp Grotesk"
    fontSize: "40px"
    fontWeight: 500
    lineHeight: "48px"
  headline-lg:
    fontFamily: "Sharp Grotesk 23"
    fontSize: "32px"
    fontWeight: 400
    lineHeight: "38.4px"
  headline-md:
    fontFamily: "Sharp Grotesk"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: "21.6px"
  body-md:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-md:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "12px"
    fontWeight: 700
    lineHeight: "1.2"
  button:
    fontFamily: "Atlas Grotesk Web"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "19.2px"
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 1650 rendered elements at 1440px wide on 2026-10-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/brand-logo.png`: primary logo lockup
- `screenshots/brand-symbol.png`: possible standalone brand symbol
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `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
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png
- `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png
- `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-button-1--rest.png`: Button 1 ("Learn more"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("Learn more"), focus
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-link-1--rest.png`: Text link 1 ("ChatGPT"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("ChatGPT"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("ChatGPT"), focus
- `screenshots/c-checkbox-1--rest.png`: Checkbox 1, rest
- `screenshots/c-checkbox-1--focus.png`: Checkbox 1, focus
- `screenshots/c-checkbox-1--disabled.png`: Checkbox 1, disabled
- `screenshots/c-checkbox-1--checked.png`: Checkbox 1, checked
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Products"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Products"), hover
- `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Products"), clicked
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Desktop app"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Desktop app"), hover
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("OpenAIDropbox files are "), rest
- `screenshots/c-testimonial-1--rest.png`: Testimonial / quote card 1 ("Testimonial"The security"), rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-button-2--rest.png`: Button 2 ("See all integrations"), rest
- `screenshots/c-button-2--focus.png`: Button 2 ("See all integrations"), focus
- `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest
- `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus
- `screenshots/c-icon-button-2--active.png`: Icon button 2, active
- `screenshots/c-link-2--rest.png`: Text link 2 ("11/10 Webinar: How small"), rest
- `screenshots/c-link-2--hover.png`: Text link 2 ("11/10 Webinar: How small"), hover
- `screenshots/c-link-2--focus.png`: Text link 2 ("11/10 Webinar: How small"), focus
- `screenshots/c-card-2--rest.png`: Card 2 ("ArticleWorking Smarter: "), rest
- `screenshots/c-feature-item-2--rest.png`: Feature item (icon + title + text) 2 ("ConstructionWith Dropbox"), rest
- `screenshots/c-image-2--rest.png`: Image / figure 2, rest
- `screenshots/c-button-3--rest.png`: Button 3 ("Business"), rest
- `screenshots/c-button-3--hover.png`: Button 3 ("Business"), hover
- `screenshots/c-button-3--focus.png`: Button 3 ("Business"), focus
- `screenshots/c-icon-button-3--rest.png`: Icon button 3, rest
- `screenshots/c-icon-button-3--hover.png`: Icon button 3, hover
- `screenshots/c-icon-button-3--focus.png`: Icon button 3, focus
- `screenshots/c-icon-button-3--disabled.png`: Icon button 3, disabled
- `screenshots/c-link-3--rest.png`: Text link 3 ("View more resources"), rest
- `screenshots/c-link-3--hover.png`: Text link 3 ("View more resources"), hover
- `screenshots/c-link-3--focus.png`: Text link 3 ("View more resources"), focus
- `screenshots/c-card-3--rest.png`: Card 3 ("ArticleWorking Smarter: "), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#eee9e2` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#deebff` | Secondary surface |
| foreground | `#f7f5f2` | Primary text |
| primary | `#0061fe` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| 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`, `#deebff`, `#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; verify availability and permission; **Inter** is the suggested stand-in.
- **Sharp Grotesk 23** for h2: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Atlas Grotesk Web** for body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

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

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

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

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## 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 · ProtectControl access to sensitive data · FaxReceive and send faxes from anywhere).

## 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.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (21 of 87 in the checklist, 39 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 21 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost-icon-right sm, ghost-icon-right sm, ghost lg, outline-icon-right, ghost-icon-right, ghost sm, primary sm, primary-icon-right lg | focus, hover | "Learn more" |
| Icon button | link, link, ghost | focus, active, hover, disabled |  |
| Text link | underlined, plain-accent, plain-accent | hover, focus | "ChatGPT" |
| Checkbox | custom | focus, disabled |  |
| Menu / dropdown trigger | ghost | hover, open | "Products" |
| Footer | default | rest only | "DropboxDesktop appMobile appIn" |
| Footer link | plain | hover | "Desktop app" |
| Skip link | default | rest only | "Skip to main content" |
| Banner / announcement bar | subtle-filled | rest only | "11/10 Webinar: How small busin" |
| Card | filled-media-top, flat-media-top, filled-media-top | rest only |  |
| Feature item (icon + title + text) | flat-media-top, filled-media-top | rest only | "OpenAIDropbox files are now ea" |
| Testimonial / quote card | filled-with-media | rest only | "Testimonial"The security of kn" |
| Styled list | default | rest only |  |
| Image / figure | aspect-1, aspect-1, aspect-7.62 | rest only |  |
| Video / media embed | default | rest only |  |
| Icon | outline-24px, outline-32px, outline-64px | rest only |  |
| Call-to-action band | default | rest only | "AI integrationsBring Dropbox c" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Navigation link, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Newsletter / signup form, Search results / listing row, Section band.

## 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; 3→3 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; 3→3 col | content-width |
| phone 390px | 334px | 24px | 16px | 32px, 3 lines, start | 48px, hamburger (icon) | media below text | 2→1 col; 3→1 col; 3→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.
- Card grids: 3 columns → 1 column on phones (gap 72px normal → 48px normal).
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 24px.
- Section top padding 72px → 72px.

## Interaction & Motion

159 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; 18 items, 92px tall, 16px, padding 0px 0px, with descriptions, 4 columns; fades in (opacity 0.04 at 40ms → 1.00); removed instantly on leave.
- 35 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

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#0061fe` where supported by measured component or regional evidence; its accent role is inferred.
- 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.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from browser-default; large surface colors remain in the palette.
- Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).