Dropbox — Shared Email-First Account Entry

---
version: alpha
name: Dropbox — Shared Email-First Account Entry
colors:
  ink: '#1A1918'
  sample-1: '#F7F5F2'
  sample-2: '#0061FE'
  sample-3: '#1E1919'
  sample-4: '#FFFFFF'
  surface-5: '#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: 24px
    fontWeight: 500
    lineHeight: 30px
  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: 13px
    fontWeight: 400
---

## Overview
A shared Dropbox login/signup entry screen: centered white card, three branded provider choices, email field, blue Continue button and extensive 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 (Log in or sign up for free) 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", 24px, weight 500, leading 30px. 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 13px / normal. The matching mobile heading-category sample is 24px / 30px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
The desktop form is a compact card centered below the wordmark with abundant whitespace and a black footer far below. At 390px the card nearly spans the viewport, the 24px title wraps, and provider buttons, email and Continue remain stacked. The register URL exposes the same account flow with a minor heading variant, so it is not collected twice. Desktop image: 1440 × 1736 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
A soft card shadow and thin gray border provide the main elevation; provider buttons have light outlines while the primary action is saturated blue.

## Shapes
Rounded card corners, rectangular input/provider buttons and a larger rounded Continue button form a clear hierarchy.

## Components
Google, Apple and Microsoft entry choices, email field, Continue and locale control. The Google control renders through embedded provider content and may not appear in plain body-text evidence. No email, provider click or submission was used; later sign-in versus account-creation steps are untested.

## Do’s and Don’ts
Preserve the one-email-field entry pattern and keep provider marks subordinate to the page’s primary task. Do not invent password, validation or success states absent from the initial screen. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.