Productivity / iOS / Android / Web

Dropbox

Dropbox warms every neutral it uses: paper instead of white, graphite instead of black, warm grays even in the shadows, with one electric blue kept strictly for the primary action.

Download
  • #0061FE
  • #1E1919
  • #524A3E
  • #F7F5F2
  • #EEE9E2
  • #CD2F7B
  • #B4DC19

Color

Every color token in the file, grouped by role.

Brand

  • primary#0061FE
  • on primary#F7F5F2
  • accent pink#CD2F7B
  • accent lime#B4DC19

Surfaces

  • canvas#F7F5F2
  • canvas bright#FAF9F7
  • canvas white#FFFFFF
  • canvas deep#F2EEE8
  • canvas deepest#EEE9E2
  • overlay#544A4480 (50%)

Text

  • ink#1E1919
  • ink soft#2B2929
  • ink deep#161313
  • ink body#524A3E

More

  • dark#1C1D21

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Sharp GroteskSharp Grotesk is private and not available in open fonts. Shown in Montserrat, the closest open match.
  • Sharp Grotesk 23Sharp Grotesk 23 is private and not available in open fonts. Shown in Montserrat, the closest open match.
  • Atlas Grotesk WebAtlas Grotesk Web is private and not available in open fonts. Shown in Work Sans, the closest open match.
  • display40px / 500 / 48px

    Dropbox

  • heading32px / 400 / 38.4px

    Dropbox

  • subheading27px / 500 / 32.4px

    Pack my box with five dozen liquor jugs

  • lede20px / 400 / 30px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • meta14px / 400 / 21px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 24px

    Continue to checkout

Shape

Corner radius tokens.

  • none0
  • md8px
  • lg12px
  • xl16px
  • xxl20px
  • pill100px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base12px
  • md16px
  • lg24px
  • xl32px
  • xxl48px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary large
    button-primary-large
  • button dark
    button-dark
  • nav item
    nav-item
  • plan card
    plan-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 119 lines
version: alpha
name: Dropbox-design-analysis
description: "A file storage site drawn on warm paper rather than white: a #f7f5f2 canvas, near-black graphite ink, one electric blue (#0061fe), Sharp Grotesk over Atlas Grotesk, and soft 12 and 16px corners."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0061fe"
  on-primary: "#f7f5f2"
  ink: "#1e1919"
  ink-soft: "#2b2929"
  ink-deep: "#161313"
  ink-body: "#524a3e"
  canvas: "#f7f5f2"
  canvas-bright: "#faf9f7"
  canvas-white: "#ffffff"
  canvas-deep: "#f2eee8"
  canvas-deepest: "#eee9e2"
  dark: "#1c1d21"
  accent-pink: "#cd2f7b"
  accent-lime: "#b4dc19"
  overlay: "#544a4480"

typography:
  # Font note: "Sharp Grotesk" is a private font and is not available in open fonts. Closest open alternative: "Montserrat".
  # Font note: "Sharp Grotesk 23" is a private font and is not available in open fonts. Closest open alternative: "Montserrat".
  # Font note: "Atlas Grotesk Web" is a private font and is not available in open fonts. Closest open alternative: "Work Sans".
  display:
    fontFamily: "'Sharp Grotesk', SharpGrotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 48px
  heading:
    fontFamily: "'Sharp Grotesk 23', 'Sharp Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
  subheading:
    fontFamily: "'Atlas Grotesk Web', 'Atlas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 27px
    fontWeight: 500
    lineHeight: 32.4px
  lede:
    fontFamily: "'Atlas Grotesk Web', 'Atlas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
  body:
    fontFamily: "'Atlas Grotesk Web', 'Atlas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  meta:
    fontFamily: "'Atlas Grotesk Web', 'Atlas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
  button:
    fontFamily: "'Atlas Grotesk Web', 'Atlas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px

rounded:
  none: 0
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 20px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  base: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    height: 40px
    padding: 8px 16px
  button-primary-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 72px
    padding: 24px 32px
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    height: 40px
    padding: 8px 16px
  nav-item:
    backgroundColor: "{colors.canvas-white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    height: 72px
    padding: 16px 12px
  plan-card:
    backgroundColor: "{colors.canvas-bright}"
    textColor: "{colors.ink}"
    typography: "{typography.subheading}"
    rounded: "{rounded.lg}"
    height: 32px
    padding: 24px

Overview

Dropbox is a file storage and sharing service. The public site is drawn on warm paper rather than white: a #f7f5f2 canvas, near-black graphite ink, one electric blue for every action, and soft 12 and 16px corners. [Observed]

What defines the look:

  1. Warm paper, not white. The canvas is #f7f5f2, with #faf9f7, #f2eee8 and #eee9e2 stepping warmer and deeper behind cards and bands. The site names this family coconut. [Measured]
  2. Graphite, not black. Ink is #1e1919, a near-black with a warm cast that matches the paper. The site names it graphite. [Measured]
  3. One electric blue. #0061fe fills every primary button and nothing else. Pink #cd2f7b and lime #b4dc19 appear only as small illustration accents. [Measured]
  4. A display face over a text face. Sharp Grotesk sets the large headings and Atlas Grotesk sets everything readable, including the subheadings. [Measured]
  5. Soft, generous corners. 12px on standard buttons and cards, 16px on the large calls to action, and a 100px pill on a few chips. [Measured]
  6. Body copy at 82 percent ink. Lede and paragraph text is #524a3e at 0.82 opacity rather than full strength, which softens the page. [Measured]

Source for this file: the Dropbox home page and the plans page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The --dwg- and --DWG__TEMP__ custom properties published on the page were read as a cross-check and supply the brand color names below. No app captures were used. See Known Gaps.

Core

Colors

Dropbox publishes its brand color names in the page, so coconut and graphite are its own names, not ours. [Measured]

RoleTokenValueWhere
Primary#0061feEvery primary button
Coconut--DWG__TEMP__color__brand__coconut#f7f5f2Page canvas, text on dark
Coconut 300--DWG__TEMP__color__brand__coconut_300#faf9f7Raised cards
Coconut 500--DWG__TEMP__color__brand__coconut_500#f2eee8Deeper bands
Coconut 600--DWG__TEMP__color__brand__coconut_600#eee9e2Deepest bands, rules
Graphite--DWG__TEMP__color__brand__graphite#1e1919Headings, dark sections
Graphite 200--DWG__TEMP__color__brand__graphite_200#2b2929Inverse tooltips
Graphite 500--DWG__TEMP__color__brand__graphite_500#161313Deepest ink
Body ink#524a3e at 0.82Lede and paragraph copy
Dark panel#1c1d21Full bleed dark sections
Overlay--DWG__TEMP__color__utility__overlay#544a4480Scrim over media
Accent pink#cd2f7bIllustration accents
Accent lime#b4dc19Illustration accents

The page also publishes darken and lighten opacity layers built on hsla(36, 23%, 55%, n), a warm gray rather than a neutral one, which keeps even the shadows on the warm side. [Measured]

Typography

Three faces with clear jobs. Sharp Grotesk sets the hero at 40 on 48 at 500, dropping to 32 on 38.4 at 390. Sharp Grotesk 23, a narrower cut of the same family, sets section headings at 32 on 38.4 at 400. Atlas Grotesk sets everything else: subheadings and plan names at 27 on 32.4 at 500, lede copy at 20 on 30, body at 16 on 24, and the small print at 14 on 21. Atlas Grotesk is loaded at 400 and 500 and Sharp Grotesk at 400 and 500, so there is no bold weight in play. [Measured]

All three faces are private, and the site serves them from its own asset paths in Latin, Korean and Thai cuts. [Measured]

Shape and spacing

Corners are soft and few: 12 dominates with 35 instances on the home page, 16 carries the large calls to action, 8 appears on small controls and 100 on a handful of chips. Standard buttons are 40 high, the large call to action 72 high with a 2px border in its own fill color, and the nav bar 72 high with 16 by 12 padding. [Measured]

Iconography and motion

Icons are inline shapes sized to the 16px body. The page publishes a motion scale with named durations and easings: linear, enter, exit and balanced easings, and durations from extra extra fast through fast, extra extra slow and extended. The actual timings were not read. [Measured for the names, Inferred for the values]

Themes

Light on every page measured, with full bleed dark sections at #1e1919 and #1c1d21 used as contrast bands rather than as a dark theme. The page publishes an inverse token set, but no dark theme was reachable. [Observed]

Platform: iOS

The Dropbox iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a file service. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Upload or create, expected as a prominent button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

A create or upload sheet is expected, since the marketing site shows no equivalent. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. The web buttons are 40 high, just below the 44pt minimum, so the app is expected to use taller targets. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the warm canvas, the graphite ink and the electric blue with the web. [Inferred]

Platform: Android

The Dropbox Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a file service. [Inferred]

Main action

Expected on Android: Floating action button.

Upload or create, which is the usual place for a floating action button in a file service. Not confirmed. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

A create or upload bottom sheet is expected, since the marketing site shows no equivalent. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. The web buttons are 40 high, below the 48dp minimum, so the app is expected to use taller targets. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Account deletion and data safety entries were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the warm canvas, the graphite ink and the electric blue with the web. [Inferred]

Platform: Web

The Dropbox home page and the plans page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. The marketing pages are flat, so no trail is shown. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A 72 high white bar holding the mark, dropdown triggers for Products and Solutions, direct links for Business and Pricing, and the account links. Items use 16 by 12 padding and no corner. [Measured]

Main action

Expected on Web: Page-level button.

The Get started button: #0061fe fill, #f7f5f2 text at 16 on 24 at 500, 12px corner, 40 high, with a 2px border in the same blue. The large variant is 72 high with a 16px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Products and Solutions open as dropdown panels from the nav bar. No modal was reachable on the public pages. [Observed]

Controls

Expected on Web: Native or custom.

A monthly and yearly toggle on the plans page, plan cards on #faf9f7 with a 12px corner, and dark full bleed bands with coconut text. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values. The hero drops from 40 to 32 and section headings from 32 to 24 between 1440 and 390. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Nav items are 72 high, standard buttons 40 and the large call to action 72. A skip link comes first in the tab order, drawn as graphite with coconut text. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Inline shapes sized to the 16px body. [Observed]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Sign up and Log in sit in the nav bar. The marketing and plans pages read without an account. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps the warm canvas, the three faces and the 12px corner, and collapses the nav dropdowns into a menu at 390. [Measured]

Cross-platform consistency

Consistent across the measured widths: the warm coconut canvas, the graphite ink, the electric blue, the three faces and the 12px corner. [Measured]

Intentionally different: at 390 the nav dropdowns collapse into a menu and the hero type drops by 8. The apps were not measured. [Measured for web, Inferred for the apps]

Do's and Don'ts

Do

  • Put the page on the warm coconut canvas rather than pure white.
  • Use graphite for ink, not black, so it matches the warm paper.
  • Keep the electric blue for primary buttons only.
  • Set the body at 82 percent ink rather than full strength.
  • Separate the display face from the text face and keep the subheadings in the text face.
  • Keep corners at 12, moving to 16 only for the large calls to action.

Don't

  • Don't use a neutral gray for shadows or dividers. The opacity layers are warm.
  • Don't use the pink or lime as interface colors. They belong to the illustrations.
  • Don't set a heading in a bold weight. Only 400 and 500 are loaded.
  • Don't treat the dark bands as a dark theme.

Known Gaps

  • The signed-in product, the file browser, sharing and the previewer were not measured, since they sit behind an account. Only the marketing and plans pages were read.
  • The motion scale names were read from the page, but the duration and easing values resolve through a second token layer that was not reachable, so no timings are given.
  • The page publishes an inverse token set, but no dark theme was reachable, so no dark values are given.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • The spacing scale is published as multiples of a base unit whose value was not resolvable on the page, so the spacing values above are measured from the rendered controls instead.
  • Account deletion and store policy rules were not verified.
  • Sharp Grotesk is private. Montserrat was chosen as the open alternative after rendering the real face next to candidates at 26px/500, where it was the closest of the set at 3.4 percent narrower and shares the geometric display structure. Work Sans and Sora were within a percent of it, so this is a judgement call.
  • Atlas Grotesk is private. Work Sans was chosen after the same comparison at 27px/500, where it matched the measured line width within 0.2 percent and shares the neo-grotesque structure. The two Dropbox faces therefore take different stand-ins on purpose, so the display and text split survives.