---
version: alpha
name: Dropbox — Neutral Split Hero with Layered File UI
colors:
  ink: '#1E1919'
  sample-1: '#000000'
  sample-2: '#F7F5F2'
  sample-3: '#0061FE'
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
An isolated Dropbox hero with a compact bold headline, warm-neutral canvas, cobalt CTA and overlapping desktop file browser and phone artwork. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot isolates `#dwg_hero_l3_plank-ffc8c092bd`; bounds were measured after a warm-up render and checked again after capture.

## 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
At 1440px the text column is vertically centered to the left of a large layered file-interface illustration. At 390px headline, supporting copy and blue action precede scaled artwork in a single column. The full selected hero is captured at both widths, excluding the site navigation and following logo strip. Desktop image: 1440 × 735 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
Device and file-browser imagery carry soft shadows; the surrounding canvas remains flat and warm. Keep shadow emphasis on product artwork, not on body copy.

## Shapes
Rounded blue primary action with a right arrow, rectangular desktop UI and a rounded phone screen. Preserve clear whitespace around the overlapping devices.

## Components
Get to work headline, supporting paragraph, Try Dropbox free action and desktop/mobile file illustration. The button is a navigation CTA; no trial was begun. Captured illustration is source promotional content, not an authenticated user account.

## Do’s and Don’ts
Keep a clear text/artwork balance and let the mobile action expand while the artwork scales. Do not label the promotional product image as a live dashboard capture. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.