Dropbox — Blue Actions and Layered Collaboration Story

---
version: alpha
name: Dropbox — Blue Actions and Layered Collaboration Story
colors:
  ink: '#1E1919'
  sample-1: '#F7F5F2'
  sample-2: '#0000EE'
  sample-3: '#0061FE'
  surface-4: '#FFFFFF'
  surface-5: '#1C1D21'
  surface-6: '#EEE9E2'
  surface-7: '#000000'
typography:
  heading:
    fontFamily: '"Sharp Grotesk", SharpGrotesk, "Sharp Grotesk KR", "Sharp Grotesk
      Thai", "Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system, BlinkMacSystemFont,
      "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol"'
    fontSize: 40px
    fontWeight: 500
    lineHeight: 48px
  body:
    fontFamily: '"Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system,
      BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
---

## Overview
A Dropbox homepage with a neutral split hero, vivid blue action, layered file-interface imagery, a dark AI integration band, spacious feature vignettes and a black resource footer. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot covers the full desktop page; the mobile screenshot covers the opening viewport only.

## Colors
Opaque token values come from computed CSS samples in this reference. The sampled-canvas token, when present, is a screenshot pixel sample. Gradients, alpha fills, photography and artwork are described visually rather than reduced to a single invented color.

## Typography
The computed heading sample (Get to work, with a lot less work) uses "Sharp Grotesk", SharpGrotesk, "Sharp Grotesk KR", "Sharp Grotesk Thai", "Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 40px, weight 500, leading 48px. Supporting text uses "Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" at 20px / 30px. The matching mobile heading-category sample is 32px / 38.4px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
Desktop alternates a side-by-side hero, dark integration grid, centered feature stories with overlapping imagery, a rounded dark security panel and editorial cards. At 390px the navigation reduces to logo, signup/login and menu; the hero stacks copy, full-width action and scaled product artwork. This capture uses the source’s prefers-reduced-motion mode so scroll-revealed feature copy remains visible. Desktop image: 1440 × 9302 px. Mobile viewport: 390 × 844 px; isolated mobile components may be taller than the viewport. Two measured widths do not establish exact CSS breakpoints.

## Elevation & Depth
Overlapping file UI panels cast soft shadows over photography. The large security section uses a near-black gradient and rounded container to separate it from white space.

## Shapes
Large-radius blue actions, modestly rounded product mockups, restrained card edges and ample negative space. The final footer is flat black with a six-column link grid.

## Components
Product navigation, hero CTA, customer-logo strip, AI-tool integrations, Find/Organize/Share stories, security vignette, horizontal source testimonials, industry links, article cards and footer. Marketing claims remain attributed source copy. No navigation menu, carousel, download or trial interaction was exercised.

## Do’s and Don’ts
Preserve the visual separation between neutral marketing content and blue actions. Prefer a motion-reduced presentation for readable content; this capture does not verify all animation timings or interactions. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.