# Design System Inspiration of Dropbox (iOS)

## 1. Visual Theme & Atmosphere

Dropbox's iOS app is a calm, paper-white workspace built around one idea: your files should feel as legible and stress-free as a tidy desk. The canvas is a true white (`#FFFFFF`) with a faint warm-cream surface (`#F7F5F2`) reserved for grouped sections and recents shelves. There is almost no chrome — no gradients, no glass, no decorative texture. The app gets out of the way so the content (a folder of photos, a shared PDF, a scanned receipt) is the only thing with weight. This restraint is deliberate brand strategy: Dropbox sells trust and focus, and the UI reads like a well-lit filing room rather than a feed.

The accent system is monastic. Dropbox Blue (`#0061FF`) — the exact hue of the open-box logomark — is the single brand color, and it is rationed. It appears on the primary action ("Share", "Upload", the floating create button), on the active bottom-tab item, on selected checkboxes, and on links. Everything else is ink, gray, or the warm divider line (`#E6E1DA`). File-type icons carry their own product colors (PDF red, Doc blue, image teal) but those are illustration, not UI accent. The result: when blue appears, it always means "this is the thing to tap."

Typography is Sharp Grotesk (Dropbox's brand typeface as of the 2017+ rebrand), rendered here with Inter as the closest free substitute. It is a clean, slightly condensed grotesque — confident but never loud. The hierarchy is tight and utilitarian: 11–28pt with weights at 400 / 600 / 700. There are no oversized hero headlines because a file browser does not need them; the largest type is the screen title at 28pt bold, and most of the screen is 15–17pt file names in a dense, scannable list. The most expressive type moment is the empty state ("No files yet — tap + to add one") rendered in friendly 17pt regular with a simple line illustration above it.

**Key Characteristics:**
- Paper-white canvas (`#FFFFFF`) with a warm-cream grouped surface (`#F7F5F2`)
- Dropbox Blue (`#0061FF`) as the only accent — primary actions, active tab, links, selection
- File/folder list rows with colored type icons — the signature browsing pattern
- Open-box blue logomark — flat, geometric, never gradient
- Preview thumbnail grid for the Photos tab — square tiles, tight 2pt gutters
- Floating circular blue Upload/Create FAB anchored bottom-right above the tab bar
- Recent files shelf — horizontally scrolling cards above the folder list
- Sharp Grotesk typeface (Inter fallback), weights 400/600/700, condensed grotesque
- Determinate blue upload progress bar — the only persistent motion in the app

## 2. Color Palette & Roles

### Primary
- **Dropbox Blue** (`#0061FF`): Primary CTA, "Share"/"Upload" buttons, upload FAB, active bottom-tab item, selected checkbox fill, hyperlinks.
- **Blue Pressed** (`#0050D0`): Active/pressed state for blue CTAs and the FAB.
- **Blue Tint** (`#E6F0FF`): Selected-row background, focused-input ring, subtle blue chips.

### Canvas & Surfaces (Light)
- **Canvas White** (`#FFFFFF`): Primary canvas — file list background, sheets, nav bar.
- **Surface Cream** (`#F7F5F2`): Grouped section background, recents shelf, settings groups.
- **Surface Raised** (`#FFFFFF` + shadow): Cards and modals lift via shadow, not fill.
- **Divider** (`#E6E1DA`): Warm hairline between file rows and section groups.
- **Text Primary** (`#1E1919`): File names, screen titles, primary UI text (warm near-black).
- **Text Secondary** (`#6F6A65`): File metadata (size, modified date), subtitles, placeholders.
- **Text Tertiary** (`#A39E98`): Disabled labels, very low-emphasis captions.

### Canvas & Surfaces (Dark)
- **Dark Canvas** (`#1E1919`): Primary dark canvas — warm charcoal, not pure black.
- **Dark Surface** (`#2A2424`): Grouped sections, recents shelf, raised cards.
- **Dark Divider** (`#3A3331`): Hairline between rows on dark.
- **Dark Text Primary** (`#FFFFFF`): File names and titles on dark.
- **Dark Text Secondary** (`#A39E98`): Metadata and subtitles on dark.
- **Dark Blue** (`#3D8BFF`): Blue accent lightened for AA contrast on the dark canvas.

### File-Type Icon Colors
- **PDF Red** (`#FA551E`): PDF document tiles and row icons.
- **Doc Blue** (`#0061FF`): Word / Paper document icons.
- **Sheet Green** (`#1A8754`): Spreadsheet icons.
- **Image Teal** (`#00B2A9`): Image and photo file icons.
- **Folder Slate** (`#8C97A8`): Generic folder glyph fill.

### Semantic
- **Success Green** (`#1A8754`): Upload-complete checkmark, "Synced" state.
- **Warning Amber** (`#FFAF00`): "Offline — will sync" banner.
- **Error Red** (`#D1180B`): Failed upload, storage-full, sign-in error.

## 3. Typography Rules

### Font Family
- **Primary (2017+)**: `Sharp Grotesk` (Dropbox brand typeface, by Sharp Type)
- **Substitute / Fallback**: `Inter` — closest free condensed-grotesque match
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Numerics**: Tabular figures for file sizes and dates so columns align

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title (Large) | Sharp Grotesk | 28pt | 700 | 1.15 | -0.4pt | "Home", "Files", large nav title |
| Section Header | Sharp Grotesk | 22pt | 700 | 1.2 | -0.3pt | "Recents", "Suggested", "Starred" |
| Sheet Title | Sharp Grotesk | 20pt | 700 | 1.2 | -0.2pt | Share sheet, upload sheet header |
| Folder / Card Title | Sharp Grotesk | 17pt | 600 | 1.3 | -0.1pt | Folder tile name, recent-file card |
| File Row Name | Sharp Grotesk | 16pt | 600 | 1.25 | -0.1pt | Primary text in a file list row |
| Body | Sharp Grotesk | 15pt | 400 | 1.45 | 0pt | Descriptions, empty-state copy |
| Metadata | Sharp Grotesk | 14pt | 400 | 1.3 | 0pt | "2.4 MB · Modified Apr 12" |
| Tab Label | Sharp Grotesk | 11pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
| Caption / Count | Sharp Grotesk | 12pt | 400 | 1.3 | 0pt | "12 items", "3 people" |
| Label (UPPER) | Sharp Grotesk | 11pt | 700 | 1.2 | 0.6pt | "SHARED WITH YOU" group labels |
| Button (Primary) | Sharp Grotesk | 16pt | 600 | 1.0 | 0pt | Blue "Share" / "Upload" buttons |
| Button (Secondary) | Sharp Grotesk | 15pt | 600 | 1.0 | 0pt | Outline / text buttons |
| Link | Sharp Grotesk | 15pt | 600 | 1.4 | 0pt | Inline blue links, "Manage access" |

### Principles
- **Weights concentrated at 400 / 600 / 700**: Regular for body/metadata, semibold for names, bold for titles — no light, no black
- **Tabular numerals everywhere data aligns**: file sizes, dates, item counts use fixed-width figures
- **Negative tracking on titles only**: -0.4pt max at 28pt; body and metadata sit at 0pt
- **Dynamic Type respected**: file names, metadata, and body scale; tab labels and progress timers are pinned
- **Blue text means link or action**; never use blue for decoration or non-interactive emphasis

## 4. Component Stylings

### Buttons

**Primary Button (Share / Upload / Done)**
- Background: `#0061FF`
- Text: `#FFFFFF`
- Padding: 14pt vertical, 24pt horizontal
- Corner radius: 8pt
- Font: Sharp Grotesk, 16pt, weight 600
- Pressed: background `#0050D0`, scale 0.98, soft haptic
- Disabled: background `#0061FF` at 40% opacity, text `#FFFFFF`

**Secondary / Outline Button (Cancel / Manage)**
- Background: transparent
- Text: `#1E1919`
- Border: 1pt solid `#E6E1DA`
- Padding: 14pt vertical, 24pt horizontal
- Corner radius: 8pt
- Font: Sharp Grotesk, 15pt, weight 600
- Pressed: background `#F7F5F2`

**Upload / Create FAB (The Floating Blue Plus)**
- Shape: Circle, diameter 56pt
- Position: anchored bottom-right, 16pt inset, floating 16pt above the tab bar
- Background: `#0061FF`
- Icon: SF Symbol `plus`, 24pt, `#FFFFFF`
- Shadow: `rgba(0,97,255,0.32) 0 8px 20px`
- Pressed: scale 0.92, background `#0050D0`, with haptic; expands into an action sheet (Upload, Scan, Create Folder, Paper)

**Text Button ("Select" / "Manage access")**
- Font: Sharp Grotesk, 15pt, weight 600
- Color: `#0061FF`
- No background, no underline, 44pt hit area

**Icon Action (Star, Share, Download, More)**
- Size: 22pt glyph, 44pt hit area
- Default: `#6F6A65`
- Active: `#0061FF` (starred, shared, downloaded)
- Spacing: 20pt between icons in a row action bar

### Cards & Containers

**File / Folder Row**
- Height: 60pt
- Layout: 40pt × 40pt type icon (leading) → stacked name + metadata → trailing 20pt ellipsis (⋯)
- Background: `#FFFFFF`
- Pressed: background `#F7F5F2`
- Selected: background `#E6F0FF`, leading icon replaced by a `#0061FF` filled checkbox
- Name: Sharp Grotesk 16pt w600 `#1E1919`; Metadata: 14pt w400 `#6F6A65` ("2.4 MB · Apr 12")
- Folder rows show a `#8C97A8` folder glyph and a trailing chevron instead of ellipsis

**Recent File Card (Horizontal shelf)**
- Width: 140pt, height: 160pt
- Top: 140pt × 96pt preview thumbnail (4pt radius) or a centered type icon on `#F7F5F2`
- Below: file name (17pt w600, 2-line clamp) + metadata (12pt w400 `#6F6A65`)
- Corner radius: 12pt on the card, 1pt border `#E6E1DA`
- Gap between cards: 12pt
- Tap: scale 0.97 with subtle haptic

**Photo Grid Tile**
- Square, 3-column grid, 2pt gutter, edge-to-edge
- Corner radius: 0pt (tiles touch — a contact-sheet feel)
- Selected: 4pt `#0061FF` inset border + a top-right `#0061FF` checkmark badge
- Long-press enters multi-select with a count chip in the nav bar

**Share Sheet**
- Bottom sheet, corner radius 16pt top corners, 16pt grabber
- Background: `#FFFFFF`
- Header: file thumbnail + name + "X people have access"
- Access rows: avatar + name + a permission dropdown ("Can edit" / "Can view")
- Footer: full-width `#0061FF` "Copy link" primary button

**Section Group (Settings / Account)**
- Background: `#F7F5F2` container with `#FFFFFF` rows
- Group header label: 11pt w700 uppercase `#6F6A65`, 0.6pt tracking
- Rows: 52pt tall, 1pt `#E6E1DA` divider inset to align with text

### Navigation

**Bottom Tab Bar**
- Height: 56pt + safe area
- Background: `rgba(255,255,255,0.94)` with `.regularMaterial` blur, 0.5pt top divider `#E6E1DA`
- Tabs: Home, Files, Photos, Offline, Account
- Icon size: 24pt
- Active color: `#0061FF` (icon + label)
- Inactive: `#6F6A65`
- Labels: Sharp Grotesk 11pt w600, always shown
- Active icon: filled SF Symbol variant; inactive: outlined

**Top Nav**
- Height: 44pt + safe area
- Large title (28pt w700 `#1E1919`) collapsing to inline 17pt on scroll
- Trailing: search icon (22pt) + select/overflow icon (22pt), both `#6F6A65`
- Translucent white blur on scroll, 0.5pt bottom divider

**Search Field (in Search screen)**
- Background: `#F7F5F2`
- Height: 44pt
- Corner radius: 10pt
- Leading SF Symbol `magnifyingglass`, 18pt, `#6F6A65`
- Placeholder: "Search files and folders", 16pt w400 `#6F6A65`
- Focused: 2pt `#0061FF` ring, background `#FFFFFF`

### Input Fields

**Text Field (Rename / Folder name)**
- Background: `#FFFFFF`
- Border: 1pt solid `#E6E1DA`, corner radius 8pt
- Height: 48pt, 14pt horizontal padding
- Label above in 14pt w600 `#1E1919`
- Focused: border `#0061FF` 2pt, subtle `#E6F0FF` glow
- Error: border `#D1180B`, helper text `#D1180B` 13pt

**Permission Dropdown**
- Pill, background `#F7F5F2`, text `#1E1919` 14pt w600
- Trailing chevron `#6F6A65`
- Tap opens a menu: "Can edit", "Can view", "Remove"

### Distinctive Components

**File-Type Row List**
- The core browsing surface: a flat vertical list where each row leads with a colored, glyph-bearing type icon (PDF red, Doc blue, Sheet green, Image teal, Folder slate)
- Icons are simple filled rectangles with a folded corner and a 1-letter or glyph label — no skeuomorphism
- Rows are 60pt, ultra-scannable, with tabular metadata so size/date columns align vertically

**Upload Progress Bar**
- A 3pt determinate bar pinned to the bottom of the active list (above the tab bar) during upload
- Track `#E6E1DA`, fill `#0061FF`, animates left→right by real byte progress (no indeterminate shimmer)
- Accompanied by a 14pt w600 label: "Uploading 3 of 8 · 4.2 MB"
- On completion: bar fills, flashes a `#1A8754` check, then fades after 1.5s

**Preview Thumbnail Grid (Photos tab)**
- A dense, edge-to-edge square grid (3 columns, 2pt gutter) that turns the camera roll into a contact sheet
- Scroll is virtualized; thumbnails fade in as they decode (200ms opacity)
- Pinch to switch between 3-col and 5-col density

**Share Link Banner**
- After "Copy link", a `#E6F0FF` banner slides down: "Link copied · Anyone with the link can view" + a "Change" link
- Auto-dismisses after 3s or on tap

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56
- Standard margin: 16pt horizontal
- Section spacing: 24pt between the recents shelf and the file list
- Row internal padding: 12pt vertical, 16pt horizontal

### Grid & Container
- Content width: full device width, 16pt horizontal margins
- Recents shelf: begins at 16pt left inset, 12pt card gaps, peeks the next card
- Photo grid: 3-column edge-to-edge, 2pt gutter, no outer margin
- Folder grid view (optional): 2-column, 12pt gap, 8pt card radius

### Whitespace Philosophy
- **Dense but breathable lists**: 60pt rows are tall enough to tap comfortably while still showing ~10 files per screen — this is a browse-and-find app
- **Generous empty states**: when a folder is empty, the illustration + copy is vertically centered with ~120pt of air above
- **Content over chrome**: thumbnails and previews get full edge-to-edge width; UI furniture stays thin

### Border Radius Scale
- Square (0pt): Photo grid tiles (intentional contact-sheet edges)
- Soft (4pt): Preview thumbnails inside cards
- Standard (8pt): Buttons, text fields, file-type icons
- Comfortable (12pt): Recent-file cards, content cards
- Sheet (16pt): Bottom sheets, modals (top corners)
- Full Pill (500pt): Permission chips, filter chips
- Circle (50%): Upload FAB, avatars, checkbox

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | File rows, list canvas, section groups |
| Card (Level 1) | `rgba(30,25,25,0.06) 0 1px 3px` | Recent-file cards, content cards |
| Raised (Level 2) | `rgba(30,25,25,0.10) 0 4px 12px` | Search bar on scroll, sticky headers |
| FAB (Level 3) | `rgba(0,97,255,0.32) 0 8px 20px` | Floating Upload/Create button |
| Sheet (Level 4) | `rgba(30,25,25,0.16) 0 -12px 32px` | Share sheet, action sheets, modals |
| Scrim | `rgba(30,25,25,0.40)` | Behind modal sheets and the FAB action menu |

**Shadow Philosophy**: Shadows are soft, low-opacity, and warm-tinted (built from the `#1E1919` ink, not pure black) so they sit naturally on the cream-white canvas. Elevation is used sparingly — only the FAB and active sheets really lift. The FAB is the single exception with a colored blue shadow that signals "primary, floating, always reachable." Everything else stays flat to keep the file list calm and scannable.

### Motion
- **FAB tap**: scale 0.92 → 1.0 spring (damping 0.7), `.impactOccurred(.soft)` haptic, then a 0.25s action-sheet rise
- **Upload progress**: determinate fill animating to real byte ratio, 60fps, no easing tricks — honesty over flourish
- **Row press**: instant `#F7F5F2` background, no scale
- **Pull-to-refresh**: minimal blue spinner, 0.4s
- **Thumbnail decode**: 200ms opacity fade-in as each tile loads
- **Sheet present**: 0.3s spring rise with a `rgba(30,25,25,0.40)` scrim fade
- **Star toggle**: subtle scale bounce 1.0 → 1.12 → 1.0 over 240ms, fill flips to `#0061FF`

## 7. Do's and Don'ts

### Do
- Use a true white canvas (`#FFFFFF`) with the warm cream surface (`#F7F5F2`) for grouped sections
- Reserve Dropbox Blue (`#0061FF`) for primary actions, the active tab, links, and selection — nothing else
- Lead every file row with a colored type icon — it is the core wayfinding signal
- Use tabular numerals for file sizes, dates, and counts so columns align
- Keep the Upload FAB circular, blue, bottom-right, floating above the tab bar
- Show a determinate (real-progress) upload bar — never a fake indeterminate spinner for uploads
- Use warm ink (`#1E1919`) for text and warm dividers (`#E6E1DA`) — not pure black or cold gray
- Render the Photos grid edge-to-edge with 0pt tile radius for the contact-sheet feel
- Use Sharp Grotesk (Inter fallback) at weights 400/600/700 only

### Don't
- Don't use pure black `#000000` for text or dividers — the system is warm; use `#1E1919` / `#E6E1DA`
- Don't add accent colors beyond blue to UI chrome — type-icon colors are illustration, not UI accent
- Don't apply gradients or glass to the logomark or the canvas — Dropbox is flat and matte
- Don't round the photo grid tiles — the square edges are intentional
- Don't use an indeterminate spinner for file uploads — uploads must show real byte progress
- Don't over-elevate — only the FAB and active sheets lift; lists stay flat
- Don't use light or black font weights — Sharp Grotesk runs 400/600/700 here
- Don't hide the upload progress bar while a transfer is active
- Don't use blue text for non-interactive emphasis — blue means link or action

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | 2-col photo grid option; recents cards shrink to 128pt |
| iPhone 13/14/15 | 390pt | Standard 140pt recents cards, 3-col photo grid |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the large title nav |
| iPhone 15/16 Pro Max | 430pt | 4-col photo grid option, 156pt recents cards |
| iPad | 768pt+ | Two-pane: folder sidebar + file list; 5–6 col photo grid |

### Dynamic Type
- File names, metadata, body, empty-state copy: full scale
- Tab labels: fixed 11pt (layout-sensitive)
- Upload progress label: scales; the bar height stays 3pt
- Large title scales up to 34pt before collapsing to inline

### Orientation
- Home / Files / Photos: **portrait-primary**, landscape supported (grid recolumns)
- File preview (PDF / image): **rotates freely** — full-screen viewer
- iPad: **all orientations**, two-pane layout persists

### Touch Targets
- File rows: 60pt height, full-row tappable
- Upload FAB: 56pt — always reachable bottom-right
- Ellipsis / overflow: 44pt hit area
- Tab bar icons: 24pt glyph, 44pt effective hit
- Photo tiles: full tile tappable; long-press to multi-select

### Safe Area Handling
- Top: large title respects safe area + Dynamic Island
- Bottom: FAB floats 16pt above the tab bar; both clear the home indicator
- Upload progress bar pins just above the tab bar, inside safe area
- Sides: 16pt content insets (photo grid goes edge-to-edge intentionally)

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas: `#FFFFFF`
- Surface (cream): `#F7F5F2`
- Divider (warm): `#E6E1DA`
- Text primary (warm ink): `#1E1919`
- Text secondary: `#6F6A65`
- Text tertiary: `#A39E98`
- Dropbox Blue (action): `#0061FF`
- Blue pressed: `#0050D0`
- Blue tint (selection): `#E6F0FF`
- Dark canvas: `#1E1919`
- Dark surface: `#2A2424`
- Success green: `#1A8754`
- Error red: `#D1180B`

### Example Component Prompts
- "Create a SwiftUI Dropbox file row: 60pt height, leading 40×40pt colored type icon (PDF red `#FA551E` rounded-corner glyph), stacked file name 'Q3 Report.pdf' in Inter 16pt weight 600 `#1E1919` and metadata '2.4 MB · Modified Apr 12' in 14pt weight 400 `#6F6A65` with tabular figures. Trailing 20pt ellipsis `#6F6A65`. Pressed background `#F7F5F2`; selected background `#E6F0FF` with a `#0061FF` filled checkbox replacing the icon."
- "Build the Upload FAB: 56pt circular button, `#0061FF` background, SF Symbol `plus` 24pt `#FFFFFF`, shadow `rgba(0,97,255,0.32) 0 8px 20px`, anchored bottom-right 16pt inset and 16pt above the tab bar. Pressed: scale 0.92 with soft haptic, background `#0050D0`, then present an action sheet (Upload, Scan, Create Folder)."
- "Design the recents shelf: section header 'Recents' in Inter 22pt weight 700 `#1E1919`. Below: horizontal scroll of 140×160pt cards (12pt radius, 1pt `#E6E1DA` border), each with a 140×96pt preview thumbnail (4pt radius) on top, file name 17pt weight 600 (2-line clamp) and '12 KB · Today' in 12pt weight 400 `#6F6A65` below. 12pt gap, peek the next card."
- "Create the upload progress bar: 3pt determinate bar pinned above the tab bar, track `#E6E1DA`, fill `#0061FF` driven by real byte ratio (no shimmer). Above it a 14pt weight 600 `#1E1919` label 'Uploading 3 of 8 · 4.2 MB'. On completion fill to 100%, flash a `#1A8754` checkmark, fade after 1.5s."
- "Build the Photos grid: edge-to-edge 3-column square tiles, 2pt gutter, 0pt corner radius (contact-sheet feel). Tiles fade in over 200ms as they decode. Long-press enters multi-select: selected tiles get a 4pt `#0061FF` inset border and a top-right `#0061FF` checkmark badge; a count chip appears in the nav bar."

### Iteration Guide
1. Canvas is true white `#FFFFFF`; grouped sections use warm cream `#F7F5F2` — never gray
2. Dropbox Blue `#0061FF` only for primary action, active tab, links, and selection
3. Text and dividers are warm (`#1E1919`, `#E6E1DA`) — never pure black or cold gray
4. Every file row leads with a colored type icon — it is the core wayfinding device
5. Uploads show a real determinate progress bar — honesty over decorative spinners
6. Typography: Sharp Grotesk (Inter fallback), weights 400/600/700, tabular numerals for data
7. Only the FAB and active sheets elevate — the file list stays flat and scannable
8. Photo grid is edge-to-edge with 0pt tile radius — keep the contact-sheet square integrity