Dropbox

# layout.md — Dropbox Design System

---

## 0. Quick Reference

**Stack:** Dropbox web (dropbox.com) · CSS custom properties (125 vars extracted, high confidence) · No utility framework for tokens — raw CSS vars via `--dwg-*` and `--DWG__TEMP__*` namespaces.

**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.

```css
/* ── Core Tokens (paste into :root) ── */

/* Colour */
--dropbox-bg-app: #faf9f7;                        /* App shell background (coconut_300) */
--dropbox-bg-surface: rgb(222, 235, 255);          /* Brand surface / highlight panels */
--dropbox-accent: rgb(0, 97, 254);                 /* Primary CTA — "Get started" buttons */
--dropbox-accent-hover: var(--dwg-theme__color__primary__button--hover);
--dropbox-accent-active: var(--dwg-theme__color__primary__button--active);
--dropbox-text-graphite: #1e1919;                  /* Headings, nav, high-contrast text */
--dropbox-text-body: rgba(82, 74, 62, 0.82);       /* Body copy, captions */
--dropbox-border: var(--dwg-theme__color__standard__border);
--dropbox-focus-ring: rgb(160, 209, 250);          /* 2px focus ring colour */
--dropbox-overlay: rgba(84, 74, 68, 0.5);          /* Modal overlay */

/* Typography */
--__dwgSharpGrotesk20BookStack: "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;
--__dwgAtlasGroteskStack: "Atlas Grotesk Web","Atlas Grotesk",AtlasGrotesk,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

/* Spacing */
--space-xs: 4px; --space-sm: 8px; --space-md: 12px;
--space-lg: 16px; --space-xl: 24px;

/* Radius */
--radius-sm: 12px;   /* dropdown items */
--radius-md: 16px;   /* cards, buttons */
--radius-lg: 100px;  /* pill badges/filters */

/* Motion */
--duration-fast: 0.1s; --duration-base: 0.125s; --duration-slow: 0.5s;
--ease-default: ease;
```

```tsx
// Primary Button — correct token usage
<button className="dwg-button dwg-button2--button-style-primary" style={{
  backgroundColor: 'var(--dropbox-accent)',
  borderRadius: 'var(--radius-md)',
  padding: '12px var(--space-xl)',
  color: '#f7f5f2',
  fontFamily: 'var(--__dwgAtlasGroteskStack)',
  fontSize: '16px',
  fontWeight: 500,
  transition: 'background-color var(--duration-fast) cubic-bezier(0.4,0,0.6,1)',
}}>Get started</button>
```

**NEVER rules:**
- NEVER use `Inter`, `Roboto`, or `Arial` as a primary font — Dropbox uses Sharp Grotesk (headings) and Atlas Grotesk Web (UI/body)
- NEVER hardcode `#0061FE` — always use `var(--dropbox-accent)` so theme overrides propagate
- NEVER use `border-radius` values other than `12px`, `16px`, or `100px` — no 4px, 8px, or 24px variants exist in this system
- NEVER use `outline` for focus — use `box-shadow: 0 0 0 2px rgb(160,209,250)` via `.ax-focusable` pattern
- NEVER omit `:focus-visible` state — all interactive elements require `var(--dwg-boxshadow__focusring)`
- NEVER construct Tailwind classes dynamically (e.g. `` `bg-${color}` ``) — Dropbox tokens are CSS vars, not Tailwind palette entries

**Full design system → see layout.md**

---

## 1. Design Direction & Philosophy

### Character & Mood
Dropbox's visual identity is **warm-neutral, confident, and precise**. The palette is built on "coconut" (warm off-whites: `#faf9f7` → `#f2eee8`) and "graphite" (near-blacks: `#2b2929` → `#000`) with a single electric-blue accent (`rgb(0,97,254)`) reserved exclusively for primary actions. The result is a calm, professional surface that trusts whitespace.

### Typographic Personality
Two custom typefaces carry all weight: **Sharp Grotesk** (headings — geometric, slightly condensed, confident) and **Atlas Grotesk Web** (UI copy — neutral, legible, functional). The combination feels editorial without being decorative. **Times New Roman** appears in computed styles for certain legacy elements — this is a browser fallback artifact, not an intentional design choice.

### What This Design Explicitly Rejects
- **Warm or saturated colour palettes** — no reds, oranges, or yellows in the UI chrome
- **Heavy drop shadows or card depth** — surfaces are flat; elevation is expressed through background colour contrast, not shadows
- **Aggressive border radii** — no fully pill-shaped buttons (the primary button uses `16px`, not `9999px`); pill shape is reserved for filter/badge elements only (`100px`)
- **Decorative typography** — no serifs, slab fonts, or display weights in UI copy
- **Animation-heavy interactions** — micro-interactions are `0.1s`–`0.125s`; only lightbox/surface transitions go to `0.5s`
- **Dense layouts** — generous padding (`24px` on buttons, `122px` horizontal card gutters) signals premium breathing room

---

## 2. Colour System

### Tier 1 — Primitive Values

```css
/* ── Brand Primitive: Coconut Scale (warm off-white) ── */
--DWG__TEMP__color__brand__coconut_200: #fff;           /* Pure white */
--DWG__TEMP__color__brand__coconut_300: #faf9f7;        /* App shell background */
--DWG__TEMP__color__brand__coconut:     #f7f5f2;        /* Default surface */
--DWG__TEMP__color__brand__coconut_500: #f2eee8;        /* Slightly deeper warm surface */
--DWG__TEMP__color__brand__coconut_600: #eee9e2;        /* Deepest warm surface */

/* ── Brand Primitive: Graphite Scale (near-black) ── */
--DWG__TEMP__color__brand__graphite_200: #2b2929;       /* Softest dark — inverse tooltip bg */
--DWG__TEMP__color__brand__graphite_300: #242121;       /* Mid dark */
--DWG__TEMP__color__brand__graphite:     #1e1919;       /* Standard heading/nav text */
--DWG__TEMP__color__brand__graphite_500: #161313;       /* Deeper dark */
--DWG__TEMP__color__brand__graphite_600: #000;          /* Pure black */

/* ── Opacity / Overlay Primitives ── */
--DWG__TEMP__color__opacity--darken1: hsla(36,23%,55%,.14);  /* Subtle tint over warm bg */
--DWG__TEMP__color__opacity--darken2: hsla(36,23%,55%,.24);  /* Hover state tint */
--DWG__TEMP__color__opacity--darken3: hsla(36,23%,55%,.32);  /* Active state tint */
--DWG__TEMP__color__opacity--darken4: rgba(0,0,0,.08);       /* Dark overlay (focus bg) */
--DWG__TEMP__color__opacity--lighten1: hsla(0,0%,100%,.16);  /* Inverse hover tint */
--DWG__TEMP__color__opacity--lighten2: hsla(0,0%,100%,.32);  /* Inverse active tint */
--DWG__TEMP__color__utility__overlay: rgba(84,74,68,.5);     /* Modal/drawer backdrop */
```

### Tier 2 — Semantic Aliases

```css
/* ── Theme Bridge: DWG theme vars → resolved values ── */
--dwg-theme__color__opacity--1: var(--DWG__TEMP__color__opacity--darken1);  /* Subtle hover bg */
--dwg-theme__color__opacity--2: var(--DWG__TEMP__color__opacity--darken2);  /* Select hover bg */
--dwg-theme__color__opacity--3: var(--DWG__TEMP__color__opacity--darken3);  /* Active state bg */
--dwg-theme__color__opacity--4: var(--DWG__TEMP__color__opacity--darken4);  /* Outline btn hover */
--dwg-theme__color__opacity--5: var(--DWG__TEMP__color__opacity--lighten1); /* Primary btn overlay */

/* ── Tooltip ── */
--dwg-tooltip__background:         var(--DWG__TEMP__color__brand__coconut_300);  /* Light tooltip bg */
--dwg-tooltip__background--inverse: var(--DWG__TEMP__color__brand__graphite_200); /* Dark tooltip bg */

/* ── Focus Ring ── */
--dwg-boxshadow__focusring: 0 0 0 3px var(--dwg-theme__color__utility__focusring);
/* --dwg-theme__color__utility__focusring resolves to rgb(160,209,250) — extracted from .ax-focusable */

/* ── Status Text ── */
--dwg-theme__color__success__text:    var(--color__success__text);
--dwg-theme__color__warning__text:    var(--color__warning__text);
--dwg-theme__color__alert__text:      var(--color__alert__text);
--dwg-theme__color__attention__text:  var(--color__attention__text);

/* ── Status Backgrounds ── */
--dwg-theme__color__success__background:   var(--color__success__background);
--dwg-theme__color__warning__background:   var(--color__warning__background);
--dwg-theme__color__alert__background:     var(--color__alert__background);
--dwg-theme__color__attention__background: var(--color__attention__background);

/* ── Status Borders ── */
--dwg-theme__color__success__border:          var(--color__success__border);
--dwg-theme__color__warning__border:          var(--color__warning__border);
--dwg-theme__color__alert__border:            var(--color__alert__border);
--dwg-theme__color__attention__border:        var(--color__attention__border);
--dwg-theme__color__success__border--faint:   var(--color__success__border--faint);
--dwg-theme__color__alert__border--faint:     var(--color__alert__border--faint);
--dwg-theme__color__attention__border--faint: var(--color__attention__border--faint);
--dwg-theme__color__warning__border--faint:   var(--color__warning__border--faint);

/* ── Text ── */
--dwg-theme__color__standard__text:   var(--color__standard__text);   /* Primary body text */
--dwg-theme__color__faint__text:      var(--color__faint__text);       /* Subdued labels */
--dwg-theme__color__disabled__text:   var(--color__disabled__text);    /* Disabled state text */

/* ── Borders ── */
--dwg-theme__color__standard__border: var(--color__standard__border);
--dwg-theme__color__faint__border:    var(--color__faint__border);
--dwg-theme__color__disabled__border: var(--color__disabled__border);

/* ── Backgrounds ── */
--dwg-theme__color__standard__background: var(--color__standard__background);
--dwg-theme__color__faint__background:    var(--color__faint__background);
--dwg-theme__color__disabled__background: var(--color__disabled__background);

/* ── Inverse (dark surface) Text ── */
--dwg-theme__color__inverse__standard__text:   var(--color__inverse__standard__text);
--dwg-theme__color__inverse__faint__text:      var(--color__inverse__faint__text);
--dwg-theme__color__inverse__disabled__text:   var(--color__inverse__disabled__text);
--dwg-theme__color__inverse__attention__text:  var(--color__inverse__attention__text);
--dwg-theme__color__inverse__success__text:    var(--color__inverse__success__text);
--dwg-theme__color__inverse__alert__text:      var(--color__inverse__alert__text);
--dwg-theme__color__inverse__warning__text:    var(--color__inverse__warning__text);

/* ── Interactive Buttons ── */
--dwg-theme__color__primary__button--hover:   var(--color__button__primary__hover);
--dwg-theme__color__primary__button--active:  var(--color__button__primary__active);

/* ── Secondary ── */
--dwg-color__secondary__base:           var(--dig-color__secondary__base);
--dwg-color__secondary__base--state-2:  var(--dig-color__secondary__base--state-2);
--dwg-color__secondary__on-base:        var(--dig-color__secondary__on-base);
```

### Tier 3 — Component Tokens (Curated)

```css
/* ── Curated shorthand aliases used by component code ── */
--dropbox-bg-app:      #faf9f7;               /* Page/shell background */
--dropbox-bg-surface:  rgb(222, 235, 255);    /* Brand highlight surface (AI/Dash panels) */
--dropbox-accent:      rgb(0, 97, 254);       /* Primary CTA background; extracted: high confidence */
--dropbox-text-graphite: #1e1919;             /* Heading text; extracted: high confidence */
--dropbox-text-body:   rgba(82, 74, 62, 0.82);/* Body/caption text; extracted: high confidence */
--dropbox-overlay:     rgba(84, 74, 68, 0.5); /* Modal backdrop */
--dropbox-focus-ring:  rgb(160, 209, 250);    /* Focus ring colour; extracted from .ax-focusable */
```

### Colour Roles at a Glance

| Role | Token | Resolved Value |
|---|---|---|
| App background | `--dropbox-bg-app` | `#faf9f7` |
| Brand surface | `--dropbox-bg-surface` | `rgb(222,235,255)` |
| Primary CTA bg | `--dropbox-accent` | `rgb(0,97,254)` |
| CTA hover | `--dwg-theme__color__primary__button--hover` | `var(--color__button__primary__hover)` |
| CTA active | `--dwg-theme__color__primary__button--active` | `var(--color__button__primary__active)` |
| Heading text | `--dropbox-text-graphite` | `#1e1919` |
| Body text | `--dropbox-text-body` | `rgba(82,74,62,.82)` |
| Focus ring | `--dropbox-focus-ring` | `rgb(160,209,250)` |
| Overlay | `--dropbox-overlay` | `rgba(84,74,68,.5)` |
| Success | `--dwg-theme__color__success__text` | `var(--color__success__text)` |
| Warning | `--dwg-theme__color__warning__text` | `var(--color__warning__text)` |

---

## 3. Typography System

> **Composite groups only.** Never set `font-size` without `font-family`, `font-weight`, `line-height` as a bundle.

### Font Stacks

```css
/* ── Font Stack Variables (PRESERVE exact names) ── */
--__systemFontStack: -apple-system,"BlinkMacSystemFont","Segoe UI","Helvetica Neue","Helvetica","Arial",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--__dwgAtlasGroteskStack: "Atlas Grotesk Web","Atlas Grotesk","AtlasGrotesk",var(--__systemFontStack);
--__dwgSharpGrotesk20BookStack: "Sharp Grotesk","SharpGrotesk","Sharp Grotesk KR","Sharp Grotesk Thai",var(--__dwgAtlasGroteskStack);
--__dwgSharpGrotesk23BookStack: "Sharp Grotesk 23","Sharp Grotesk 23 KR","Sharp Grotesk 23 Thai",var(--__dwgAtlasGroteskStack);
```

### Composite Type Scale

| Role | Font Family | Size | Weight | Line-height | Letter-spacing | Colour |
|---|---|---|---|---|---|---|
| **h1 — Hero** | `--__dwgSharpGrotesk20BookStack` | `40px` | `500` | `48px` | `normal` | `#1e1919` |
| **h2 — Section heading** | `--__dwgAtlasGroteskStack` | `20px` | `500` | `24px` | `normal` | `#1e1919` |
| **h2 — Feature subheading** | `--__dwgAtlasGroteskStack` | `26px` | `500` | `32px` | `normal` | `#1e1919` |
| **h3 — Label / Eyebrow** | `--__dwgAtlasGroteskStack` | `14px` | `500` | `18px` | `normal` | `rgba(82,74,62,.82)` |
| **h3 — Testimonial quote** | `--__dwgAtlasGroteskStack` | `18px` | `400` | `21.6px` | `normal` | `rgba(82,74,62,.82)` |
| **Body — Default** | `--__dwgAtlasGroteskStack` | `20px` | `400` | `30px` | `normal` | `rgba(82,74,62,.82)` |
| **Body — UI / Nav** | `--__dwgAtlasGroteskStack` | `16px` | `400` | `24px` | `normal` | `#1e1919` |
| **Label — Small** | `--__dwgAtlasGroteskStack` | `13.33px` | `400` | `normal` | `normal` | `#1e1919` |
| **Caption / Tag** | `--__dwgAtlasGroteskStack` | `12px` | `400` | `normal` | `normal` | `rgba(82,74,62,.82)` |

```css
/* ── CSS Size Tokens (PRESERVE original names) ── */
--font-size-xs: 12px;        /* Captions, dropdown sub-labels */
--font-size-sm: 13.3333px;   /* Nav buttons, small UI labels */
--font-size-md: 14px;        /* h3 eyebrows, nav category headings */
--font-size-lg: 16px;        /* Body copy, button labels, nav items */
--font-size-xl: 18px;        /* Testimonial quotes, feature pull-quotes */
--font-size-2xl: 20px;       /* h2 section headings, footer headings */
--font-size-3xl: 26px;       /* Feature section h2 headings */

--font-weight-regular: 400;  /* Body, captions, button labels */
--font-weight-medium: 500;   /* Headings, emphasis, nav labels */

--line-height-normal: 21.6px; /* Testimonial/quote text */
--line-height-loose: 24px;    /* UI text, h2, nav items */
```

### Pairing Rules
- **Headings** → Sharp Grotesk (`--__dwgSharpGrotesk20BookStack`), weight 500 only
- **All UI copy, body, buttons, nav** → Atlas Grotesk Web (`--__dwgAtlasGroteskStack`), weights 400–500
- **Never mix Sharp Grotesk and Atlas Grotesk at the same hierarchy level** in a single component
- **Sharp Grotesk 23** (`--__dwgSharpGrotesk23BookStack`) is used for display/marketing contexts with wider tracking requirements

---

## 4. Spacing & Layout

```css
/* ── Spacing Scale (PRESERVE original names) ── */
--space-xs: 4px;    /* Icon padding, tight inline gaps */
--space-sm: 8px;    /* Internal component gaps, badge padding */
--space-md: 12px;   /* Form element inner padding */
--space-lg: 16px;   /* Standard component padding, nav vertical padding */
--space-xl: 24px;   /* Card gaps, button horizontal padding, section gutters */

/* NOTE: --dwg-tooltip__max_width: 256px is tooltip-specific, not a layout spacing token */

/* ── Spacing Unit System (DWG internal scale, base = 8px inferred) ── */
--dwg-spacing__unit--0:    0;
--dwg-spacing__unit--0_5: calc(var(--spacing__base_unit) / 2);   /* ~4px */
--dwg-spacing__unit--1:   var(--spacing__base_unit);              /* ~8px */
--dwg-spacing__unit--1_5: calc(var(--spacing__base_unit) * 1.5); /* ~12px */
--dwg-spacing__unit--2:   calc(var(--spacing__base_unit) * 2);   /* ~16px */
--dwg-spacing__unit--3:   calc(var(--spacing__base_unit) * 3);   /* ~24px */
--dwg-spacing__unit--4:   calc(var(--spacing__base_unit) * 4);   /* ~32px */
--dwg-spacing__unit--5:   calc(var(--spacing__base_unit) * 5);   /* ~40px */
--dwg-spacing__unit--6:   calc(var(--spacing__base_unit) * 6);   /* ~48px */
--dwg-spacing__unit--8:   calc(var(--spacing__base_unit) * 8);   /* ~64px */
--dwg-spacing__unit--9:   calc(var(--spacing__base_unit) * 9);   /* ~72px */
--dwg-spacing__unit--12:  calc(var(--spacing__base_unit) * 12);  /* ~96px */
--dwg-spacing__unit--15:  calc(var(--spacing__base_unit) * 15);  /* ~120px */
--dwg-spacing__unit--19:  calc(var(--spacing__base_unit) * 19);  /* ~152px */
--dwg-spacing__unit--30:  calc(var(--spacing__base_unit) * 30);  /* ~240px */

/* ── Navigation Heights ── */
--dwg-nav__height--universal:  48px;  /* Standard nav height */
--dwg-nav__height--secondary:  48px;  /* Secondary nav bar */
--dwg-nav__height--redesign:   72px;  /* Redesigned nav height */
--dwg-nav__vertical-padding--redesign: var(--dwg-spacing__unit--2); /* ~16px top+bottom */
--dwg-select__height: 48px;           /* Form select element height */

/* ── Z-Index Scale ── */
--dwg-nav__z-index:        120;   /* Navigation layer */
--dwg-z-index--modal-layer: 1001; /* Modal/dialog overlay */
```

### Grid & Breakpoints

| Breakpoint | Value | Typical Use |
|---|---|---|
| xs | `480px` | Small phones |
| sm | `648px` | Large phones |
| md | `768px` | Tablets |
| lg | `1024px` | Small desktops |
| xl | `1280px` | Standard desktops |
| 2xl | `1440px` | Wide desktops |
| 3xl | `1920px` | Ultra-wide |

### Layout Rules
- **Card grid:** `display: grid`, column gap `24px`, horizontal padding `0 122px` (from computed `card` element)
- **Navigation:** `display: block`, padding `16px 24px`
- **Flex preference:** Use `display: flex; flex-direction: row; align-items: center` for nav items and inline UI groups
- **Grid preference:** Use `display: grid` with `gap: 24px` for content card layouts

---

## 5. Page Structure & Layout Patterns

### 5.1 Section Map

| # | Section | Layout Type | Key Elements | Height (approx.) | Source |
|---|---|---|---|---|---|
| 1 | **Global Navigation** | `block` / inner flex row | Logo, nav items, CTA buttons, dropdown menus | 48px (standard) / 72px (redesign) | extracted |
| 2 | **Hero** | Block, centered | h1 40px/500, body 20px/400, primary CTA (`rgb(0,97,254)`, `radius-md: 16px`) | ~480–600px | inferred |
| 3 | **Brand Surface Panel** | Block, `background: rgb(222,235,255)` | AI/Dash product callout, badge pill, headline | ~200–300px | inferred |
| 4 | **Feature Grid** | `display: grid`, gap `24px`, padding `0 122px` | 3-column feature cards, h2 `26px`, body `16px` | ~400–600px | extracted |
| 5 | **Testimonials / Social Proof** | Grid / carousel | Quote h3 `18px`, attribution, badge pills | ~300–400px | inferred |
| 6 | **Stats / Social Proof Bar** | Flex row, centered | h2 "Join 700M+" at 20px/500 | ~120px | inferred |
| 7 | **CTA Section** | Block, centered | Primary CTA button `rgb(0,97,254)`, headline | ~200px | inferred |
| 8 | **Footer** | Grid, multi-column | h3 "Dropbox" / "Products" at 20px/500, links 16px | ~300px | inferred |

### 5.2 Layout Patterns

**Global Navigation (`role_navigation`)**
- `display: block` at the document level; inner content uses flex row
- Padding: `16px 24px` (matching `--space-lg` / `--space-xl`)
- Background: `#ffffff` (white, not coconut — nav is visually distinct from page shell)
- Height: `48px` standard, `72px` redesigned variant
- Z-index: `120` (`--dwg-nav__z-index`)
- Dropdown: `border-radius: 12px` on list items, animated via `height 0.2s cubic-bezier(0.785,0.135,0.15,0.86)`

**Feature Card Grid (`card`)**
- `display: grid; gap: 24px; padding: 0 122px`
- Cards themselves: `border-radius: 16px` (`--radius-md`)
- Content cards (dark/CLS variant): `background: rgb(28,29,33)`, `border-radius: 16px`, `padding: 8px`, `gap: 8px`
- Column count: inferred 3 columns at desktop (1280px+), collapses at `768px`

**Badge / Pill Filters**
- `border-radius: 100px` (`--radius-lg`) — the only pill-shaped element
- Background: `#f7f5f2` (coconut), padding `4px 15px 4px 10px`
- Used for filter tabs ("Find", "Organize", "Share") — NOT for primary buttons

### 5.3 Visual Hierarchy

- **Primary CTA colour:** `rgb(0,97,254)` — appears on "Get started" buttons; high contrast against coconut background
- **Heading prominence:** h1 at 40px/Sharp Grotesk dominates hero; h2 at 26px anchors feature sections; h2 at 20px marks social proof and footer headings
- **Whitespace rhythm:** Large padding (`122px` horizontal on card grids) and `24px` column gaps create generous breathing room between content blocks
- **Image/media:** Cards include embedded video with a play-overlay-button pattern; lightbox transitions at `700ms cubic-bezier(0.66,0,0,1)`

### 5.4 Content Patterns

**Feature Trio Pattern** (repeating 3-column grid):
```
[Icon/Image]
[h2 Feature title — 26px/500/Sharp Grotesk]
[Body — 16px/400/Atlas Grotesk]
[Optional CTA link]
```

**Testimonial Pattern**:
```
[Badge pill — "Testimonial" label, radius 100px]
[h3 Quote — 18px/400, line-height 21.6px]
[Attribution — 12px/400]
```

**Nav Dropdown Pattern**:
```
[Trigger — 13.33px button]
[List with items at radius-sm: 12px]
[Icons + label rows, hover: var(--dwg-theme__color__opacity--1)]
```

---

## 6. Component Patterns

### 6.1 Primary Button (`dwg-button2--button-style-primary`)

**Anatomy:** Container → Label text → Optional trailing icon

**State table:**

| State | Background | Border | Text | Shadow |
|---|---|---|---|---|
| Default | `rgb(0,97,254)` | `2px solid rgb(0,97,254)` | `#f7f5f2` | none |
| Hover | `var(--dwg-theme__color__primary__button--hover)` | matches bg | `#f7f5f2` | lighten overlay via `::before` |
| Active | `var(--dwg-theme__color__primary__button--active)` | matches bg | `#f7f5f2` | lighten overlay via `::before` |
| Focus-visible | `rgb(0,97,254)` | `2px solid rgb(0,97,254)` | `#f7f5f2` | `var(--dwg-boxshadow__focusring)` |
| Disabled | `var(--dwg-theme__color__disabled__background)` | disabled border | `var(--dwg-theme__color__disabled__text)` | none |

```tsx
// Production-ready Primary Button — all states
interface PrimaryButtonProps {
  children: React.ReactNode;
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
}

export function PrimaryButton({ children, disabled, loading, onClick }: PrimaryButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled || loading}
      className="dwg-button dwg-button2 dwg-button2--button-style-primary"
      style={{
        position: 'relative',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'var(--__dwgAtlasGroteskStack)',
        fontSize: 'var(--font-size-lg)',       /* 16px */
        fontWeight: 'var(--font-weight-medium)', /* 500 */
        lineHeight: 'var(--line-height-loose)',  /* 24px */
        color: disabled ? 'var(--dwg-theme__color__disabled__text)' : '#f7f5f2',
        backgroundColor: disabled
          ? 'var(--dwg-theme__color__disabled__background)'
          : 'rgb(0, 97, 254)',                  /* --dropbox-accent */
        border: '2px solid',
        borderColor: disabled
          ? 'var(--dwg-theme__color__disabled__border)'
          : 'rgb(0, 97, 254)',
        borderRadius: 'var(--radius-md)',        /* 16px */
        padding: '12px var(--space-xl)',         /* 12px 24px */
        cursor: disabled ? 'not-allowed' : 'pointer',
        transition: 'background-color var(--duration-fast) cubic-bezier(0.4,0,0.6,1), border-color var(--duration-fast) cubic-bezier(0.4,0,0.6,1)',
        opacity: loading ? 0.7 : 1,
        overflow: 'hidden',                     /* contain ::before overlay */
      }}
      //

## Appendix A: Complete Token Reference

Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.

```css
/* Colours (77) */
--dwg-tooltip__background: var(--DWG__TEMP__color__brand__coconut_300);
--dwg-tooltip__background--inverse: var(--DWG__TEMP__color__brand__graphite_200);
--DWG__TEMP__color__opacity--darken1: hsla(36,23%,55%,.14);
--DWG__TEMP__color__opacity--darken2: hsla(36,23%,55%,.24);
--DWG__TEMP__color__opacity--darken3: hsla(36,23%,55%,.32);
--DWG__TEMP__color__opacity--darken4: rgba(0,0,0,.08);
--DWG__TEMP__color__opacity--lighten1: hsla(0,0%,100%,.16);
--DWG__TEMP__color__opacity--lighten2: hsla(0,0%,100%,.32);
--DWG__TEMP__color__brand__coconut_200: #fff;
--DWG__TEMP__color__brand__coconut_300: #faf9f7;
--DWG__TEMP__color__brand__coconut: #f7f5f2;
--DWG__TEMP__color__brand__coconut_500: #f2eee8;
--DWG__TEMP__color__brand__coconut_600: #eee9e2;
--DWG__TEMP__color__brand__graphite_200: #2b2929;
--DWG__TEMP__color__brand__graphite_300: #242121;
--DWG__TEMP__color__brand__graphite: #1e1919;
--DWG__TEMP__color__brand__graphite_500: #161313;
--DWG__TEMP__color__brand__graphite_600: #000;
--DWG__TEMP__color__utility__overlay: rgba(84,74,68,.5);
--dwg-theme__color__core__primary: var(--color__core__primary);
--dwg-theme__color__core__secondary: var(--color__core__secondary);
--dwg-theme__color__core__accent: var(--color__core__accent);
--dwg-theme__color__standard__text: var(--color__standard__text);
--dwg-theme__color__faint__text: var(--color__faint__text);
--dwg-theme__color__disabled__text: var(--color__disabled__text);
--dwg-theme__color__standard__border: var(--color__standard__border);
--dwg-theme__color__faint__border: var(--color__faint__border);
--dwg-theme__color__disabled__border: var(--color__disabled__border);
--dwg-theme__color__standard__background: var(--color__standard__background);
--dwg-theme__color__faint__background: var(--color__faint__background);
--dwg-theme__color__disabled__background: var(--color__disabled__background);
--dwg-theme__color__attention__text: var(--color__attention__text);
--dwg-theme__color__success__text: var(--color__success__text);
--dwg-theme__color__alert__text: var(--color__alert__text);
--dwg-theme__color__warning__text: var(--color__warning__text);
--dwg-theme__color__attention__background: var(--color__attention__background);
--dwg-theme__color__success__background: var(--color__success__background);
--dwg-theme__color__alert__background: var(--color__alert__background);
--dwg-theme__color__warning__background: var(--color__warning__background);
--dwg-theme__color__attention__background--faint: var(--color__attention__background--faint);
--dwg-theme__color__success__border: var(--color__success__border);
--dwg-theme__color__alert__border: var(--color__alert__border);
--dwg-theme__color__attention__border: var(--color__attention__border);
--dwg-theme__color__warning__border: var(--color__warning__border);
--dwg-theme__color__success__border--faint: var(--color__success__border--faint);
--dwg-theme__color__alert__border--faint: var(--color__alert__border--faint);
--dwg-theme__color__attention__border--faint: var(--color__attention__border--faint);
--dwg-theme__color__warning__border--faint: var(--color__warning__border--faint);
--dwg-theme__color__opacity--1: var(--DWG__TEMP__color__opacity--darken1);
--dwg-theme__color__opacity--2: var(--DWG__TEMP__color__opacity--darken2);
--dwg-theme__color__opacity--3: var(--DWG__TEMP__color__opacity--darken3);
--dwg-theme__color__opacity--4: var(--DWG__TEMP__color__opacity--darken4);
--dwg-theme__color__opacity--5: var(--DWG__TEMP__color__opacity--lighten1);
--dwg-theme__color__utility__focusring: var(--color__utility__focusring);
--dwg-theme__color__utility__overlay: var(--color__utility__overlay);
--dwg-theme__color__primary__button--hover: var(--color__button__primary__hover);
--dwg-theme__color__primary__button--active: var(--color__button__primary__active);
--dwg-theme__color__inverse__standard__text: var(--color__inverse__standard__text);
--dwg-theme__color__inverse__faint__text: var(--color__inverse__faint__text);
--dwg-theme__color__inverse__disabled__text: var(--color__inverse__disabled__text);
--dwg-theme__color__inverse__attention__text: var(--color__inverse__attention__text);
--dwg-theme__color__inverse__success__text: var(--color__inverse__success__text);
--dwg-theme__color__inverse__alert__text: var(--color__inverse__alert__text);
--dwg-theme__color__inverse__warning__text: var(--color__inverse__warning__text);
--dwg-color__secondary__base: var(--dig-color__secondary__base);
--dwg-color__secondary__base--state-2: var(--dig-color__secondary__base--state-2);
--dwg-color__secondary__on-base: var(--dig-color__secondary__on-base);
--brand-primary-cta: rgb(0, 97, 254); /* Primary CTA background, dominant on 3 buttons — e.g. "Get started" /* mined from computed styles */ */
--brand-surface-1: rgb(222, 235, 255); /* Brand surface, dominant on 1 element — e.g. "Meet Dropbox Dash, your new AI" /* mined from computed styles */ */
--dropbox-bg-app: #faf9f7;
--dropbox-bg-surface: rgb(222, 235, 255);
--dropbox-accent: rgb(0, 97, 254);
--dropbox-text-graphite: #1e1919;
--dropbox-text-body: rgba(82, 74, 62, 0.82);
--dropbox-border: var(--dwg-theme__color__standard__border);
--dropbox-focus-ring: rgb(160, 209, 250);
--dropbox-overlay: rgba(84, 74, 68, 0.5);

/* Typography (27) */
--__systemFontStack: -apple-system,"BlinkMacSystemFont","Segoe UI","Helvetica Neue","Helvetica","Arial",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--__dwgAtlasGroteskStack: "Atlas Grotesk Web","Atlas Grotesk","AtlasGrotesk",var(--__systemFontStack);
--__dwgSharpGrotesk23BookStack: "Sharp Grotesk 23","Sharp Grotesk 23 KR","Sharp Grotesk 23 Thai",var(--__dwgAtlasGroteskStack);
--__dwgSharpGrotesk20BookStack: "Sharp Grotesk","SharpGrotesk","Sharp Grotesk KR","Sharp Grotesk Thai",var(--__dwgAtlasGroteskStack);
--dwg-transition__lightbox__easing-function: cubic-bezier(0.66, 0, 0, 1);
--font-size-xs: 12px; /* 7 elements — e.g. span "Store, share, and ac", span "Review and approve v", span "Request and add sign" /* mined from computed styles */ */
--font-size-sm: 13.3333px; /* 9 elements — e.g. button "Products", button "Solutions", button "Get app" /* mined from computed styles */ */
--font-size-md: 14px; /* 14 elements — e.g. h3 "Teams", h3 "Use cases", h3 "Industries" /* mined from computed styles */ */
--font-size-lg: 16px; /* 157 elements — e.g. p "Get to the right fil", p "Keep every version c", p "Share work instantly" /* mined from computed styles */ */
--font-size-xl: 18px; /* 12 elements — e.g. h3 ""The security of kno", h3 ""Seriously impressiv", h3 ""How do you enhance " /* mined from computed styles */ */
--font-size-2xl: 20px; /* 9 elements — e.g. h2 "Join the over 700 mi", h3 "Dropbox", h3 "Products" /* mined from computed styles */ */
--font-size-3xl: 26px; /* 4 elements — e.g. h2 "Find it fast, every ", h2 "Everything in order,", h2 "Send it safely, shar" /* mined from computed styles */ */
--font-weight-regular: 400; /* 178 elements — e.g. h2 "Dropbox empowers acr", h2 "Discover, learn, thr", p "Dropbox delivers too" /* mined from computed styles */ */
--font-weight-medium: 500; /* 37 elements — e.g. h1 "Get to work, with a ", h2 "Join the over 700 mi", h2 "Find it fast, every " /* mined from computed styles */ */
--line-height-normal: 21.6px; /* 12 elements — e.g. h3 ""The security of kno", h3 ""Seriously impressiv", h3 ""How do you enhance " /* mined from computed styles */ */
--line-height-loose: 24px; /* 29 elements — e.g. h2 "Join the over 700 mi", p "Get to the right fil", p "Keep every version c" /* mined from computed styles */ */
--font-size-xs: 12px;
--font-size-sm: 13.3333px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 26px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--line-height-normal: 21.6px;
--line-height-loose: 24px;

/* Spacing (32) */
--dwg-nav__height--secondary: 48px;
--dwg-tooltip__max_width: 256px;
--dwg-nav__height--redesign: 72px;
--dwg-nav__vertical-padding--redesign: var(--dwg-spacing__unit--2);
--dwg-nav__top-offset: 0px;
--dwg-spacing__unit--0: 0;
--dwg-spacing__unit--0_5: calc(var(--spacing__base_unit) / 2);
--dwg-spacing__unit--1: var(--spacing__base_unit);
--dwg-spacing__unit--1_5: calc(var(--spacing__base_unit) * 1.5);
--dwg-spacing__unit--2: calc(var(--spacing__base_unit) * 2);
--dwg-spacing__unit--3: calc(var(--spacing__base_unit) * 3);
--dwg-spacing__unit--4: calc(var(--spacing__base_unit) * 4);
--dwg-spacing__unit--5: calc(var(--spacing__base_unit) * 5);
--dwg-spacing__unit--6: calc(var(--spacing__base_unit) * 6);
--dwg-spacing__unit--8: calc(var(--spacing__base_unit) * 8);
--dwg-spacing__unit--9: calc(var(--spacing__base_unit) * 9);
--dwg-spacing__unit--12: calc(var(--spacing__base_unit) * 12);
--dwg-spacing__unit--15: calc(var(--spacing__base_unit) * 15);
--dwg-spacing__unit--19: calc(var(--spacing__base_unit) * 19);
--dwg-spacing__unit--30: calc(var(--spacing__base_unit) * 30);
--space-xs: 4px; /* 180 elements — e.g. span .dwg-stack, span .dwg-stack, span .dwg-stack /* mined from computed styles */ */
--space-sm: 8px; /* 29 elements — e.g. span .dwg-dropdown-list-item, span .dwg-dropdown-list-item, div ._card_1b963_1 /* mined from computed styles */ */
--space-md: 12px; /* 40 elements — e.g. span .dwg-nav-logo-button__wordmark, button .dwg-nav-item-button, button .dwg-nav-item-button /* mined from computed styles */ */
--space-lg: 16px; /* 214 elements — e.g. nav .dwg-nav, nav .dwg-nav, div .dwg-stack /* mined from computed styles */ */
--space-xl: 24px; /* 6 elements — e.g. nav .dwg-nav, nav .dwg-nav, span .dwg-nav-logo-button__wordmark /* mined from computed styles */ */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--dwg-nav__height--universal: 48px;
--dwg-select__height: 48px;

/* Radius (6) */
--radius-sm: 12px; /* 17 elements — e.g. a .dwg-dropdown-list-item "DropboxStore, share,", a .dwg-dropdown-list-item "ReplayReview and app", a .dwg-dropdown-list-item "SignRequest and add " /* mined from computed styles */ */
--radius-md: 16px; /* 3 elements — e.g. div ._card_1b963_1 "Testimonial"The secu", div ._card_1b963_1 "Testimonial"Seriousl", div ._card_1b963_1 "Webinar"How do you e" /* mined from computed styles */ */
--radius-lg: 100px; /* 3 elements — e.g. div ._pill_aez5p_49 "Find", div ._pill_aez5p_49 "Organize", div ._pill_aez5p_49 "Share" /* mined from computed styles */ */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 100px;

/* Effects (21) */
--dwg-tooltip__arrow_height: var(--dwg-spacing__unit--2);
--dwg-tooltip__arrow_width: var(--dwg-spacing__unit--1);
--dwg-nav__content-height--redesign: calc(var(--dwg-nav__height--redesign) - var(--dwg-nav__vertical-padding--redesign)*2);
--dwg-nav__z-index: 120;
--dwg-easing__linear: var(--dig-motion__easing__linear);
--dwg-easing__enter: var(--dig-motion__easing__enter);
--dwg-easing__leave: var(--dig-motion__easing__exit);
--dwg-easing__transition: var(--dig-motion__easing__balanced);
--dwg-duration__non-motion: var(--dig-motion__duration__xxfast);
--dwg-duration__surface: var(--dig-motion__duration__fast);
--dwg-duration__surface-slow: var(--dig-motion__duration__xxslow);
--dwg-duration__1000: var(--dig-motion__duration__extended);
--dwg-direction--inline: 1;
--dwg-theme__filter--0_5: none;
--dwg-boxshadow__focusring: 0 0 0 3px var(--dwg-theme__color__utility__focusring);
--dwg-z-index--modal-layer: 1001;
--dwg-hscroll--perc-progress: 0;
--dwg-transition__lightbox__transition-duration: 700ms;
--dwg-transition__lightbox__fade_duration: 300ms;
--dwg-animation__ticker__duration-ms: 40000ms;
----filter-cls_card: blur(20px); /* Filter from cls_card /* reconstructed */ */

/* Motion (12) */
----motion-fade-in: @keyframes fade-in { 
  0% { opacity: 0; transform: translate(0px, -10px); }
  100% { opacity: 1; }
}; /* @keyframes fade-in */
----motion-_dwg-pill-icon-fade-in_1vq72_1: @keyframes _dwg-pill-icon-fade-in_1vq72_1 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}; /* @keyframes _dwg-pill-icon-fade-in_1vq72_1 */
----motion-_sparkle_ud8z3_1: @keyframes _sparkle_ud8z3_1 { 
  0% { opacity: 0; transform: scale(0.1) rotate(1… <0.3KB elided>; /* @keyframes _sparkle_ud8z3_1 */
----motion-_slide_ud8z3_1: @keyframes _slide_ud8z3_1 { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(calc(100% * var(--dwg-direction--inline, 1))); }
}; /* @keyframes _slide_ud8z3_1 */
----motion-_keyframes-standard_90hav_1: @keyframes _keyframes-standard_90hav_1 { 
  0% { transform: translateX(calc(-150… <0.2KB elided>; /* @keyframes _keyframes-standard_90hav_1 */
----motion-_keyframes-small_90hav_1: @keyframes _keyframes-small_90hav_1 { 
  0% { transform: translateX(calc(-100% /… <0.2KB elided>; /* @keyframes _keyframes-small_90hav_1 */
----motion-_button-slide-in_thadj_1: @keyframes _button-slide-in_thadj_1 { 
  100% { transform: translateY(0px); }
}; /* @keyframes _button-slide-in_thadj_1 */
----motion-one-tap-prompt-expand: @keyframes one-tap-prompt-expand { 
  0% { transform: scaleY(0); max-height: cal… <0.3KB elided>; /* @keyframes one-tap-prompt-expand */
--duration-fast: 0.1s; /* 6 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-base: 0.125s; /* 86 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 0.5s; /* 9 elements — e.g. div, div, div /* mined from computed styles */ */
--ease-default: ease; /* 137 elements — e.g. button, button, button /* mined from computed styles */ */
```