---
version: alpha
name: Dropbox — Blue Plan Actions and Long Comparison Table
colors:
  ink: '#1E1919'
  sample-1: '#F7F5F2'
  sample-2: '#0000EE'
  sample-3: '#0061FE'
  sample-4: '#FFFFFF'
  sample-5: '#000000'
  surface-6: '#FAF9F7'
  surface-7: '#B4DC19'
typography:
  heading:
    fontFamily: '"Sharp Grotesk 23", "Sharp Grotesk 23 KR", "Sharp Grotesk 23 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: 32px
    fontWeight: 400
    lineHeight: 38.4px
  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: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A Dropbox pricing page with neutral plan columns, cobalt actions, a lime Best Value flag, add-ons, detailed plan comparison and quiet FAQ rows. 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 (Go from idea to done with Dropbox) uses "Sharp Grotesk 23", "Sharp Grotesk 23 KR", "Sharp Grotesk 23 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", 32px, weight 400, leading 38.4px. 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 16px / 24px. The matching mobile heading-category sample is 24px / 28.8px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
Three primary desktop cards align in one row below yearly/monthly radio controls; Basic and Enterprise appear as secondary horizontal offers. A large grouped comparison matrix follows. At 390px the heading shrinks from 32px to 24px and the opening Plus card becomes full-width. The mobile evidence is the first viewport, not a test of matrix scrolling. Desktop image: 1440 × 9666 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
Alternating warm-neutral column backgrounds make comparisons readable without strong shadows. The lime recommendation strip protrudes above the Standard card.

## Shapes
Rounded blue purchase/trial actions and lightly rounded pricing panels sit above a square-edged comparison grid with fine gray rules.

## Components
Yearly billing selected, Plus/Standard/Advanced cards, secondary plans, add-ons, grouped feature rows, show-only-differences control and closed FAQs. Euro prices are the observed regional state. No billing switch, purchase, trial or table filtering was performed.

## Do’s and Don’ts
Use color consistently to distinguish action, recommendation and comparison background. Do not present localized captured prices as a universal or permanent offer. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.