Dropbox
A cloud storage and collaboration platform with a clean, minimalist canvas anchored in Dropbox blue (#0061FF) on predominantly white surfaces with cool gray accents. The interface prioritizes file-and-folder clarity: simple list views, thumbnail previews, and a sharing model that feels trustworthy and straightforward. Typography uses Sharp Grotesk (or system sans) with strong weight contrast between headings and body. Dropbox's visual language shifted toward creative-professional as they repositioned from pure storage to collaboration — marketing now uses bold typography, creative campaign imagery, and the Dropbox Sans custom font at expressive display sizes.
Color Tokens
1. Visual Theme & Atmosphere
Dropbox started as pure utility and evolved into a creative platform. The file browser is clean and white — list rows with file type icons, shared indicators, and modified dates. Blue (#0061FF) appears on folder icons, primary actions, and navigation active states. The product never gets in the way: it's ambient, accessible, and trusted. The marketing brand is more expressive — bold, tight display type and campaign photography that speaks to creative professionals.
2. Color System
Simple and restrained:
- Blue: #0061FF — folder icon color, primary buttons, active nav, links
- Canvas: Pure white for all file browser surfaces
- Surfaces: Very light grays (#F7F7F7 / #EFEFEF) for hover states and panel backgrounds
- Ink: #1E1919 — very dark, slightly warm near-black
- Muted: #637282 — file metadata, secondary labels
- File type colors: Each file type icon (PDF red, image blue, video purple, etc.) uses a standard palette
3. Typography
Dropbox Sans (marketing display) — an ultra-heavy, ultra-compressed grotesque used at massive sizes in campaigns. Atlas Grotesk for product UI — clean, neutral, highly legible in file list contexts. The contrast between the expressive marketing type and functional product type mirrors a broader brand evolution.
4. Components & Patterns
- File list row: File icon (type-colored) + name + size + modified date + shared avatar stack + action menu
- Grid view: Thumbnail tiles with filename overlay on hover
- Folder breadcrumb: Compact path navigation with arrow separators
- Share modal: Access level dropdown (viewer/editor), copy link button, email invite field
- Left sidebar: All files / Shared / Recent / Deleted — minimal icon + label nav
- Upload drop zone: Full-browser drag target with dashed overlay
5. Spacing & Layout
File list: 12px row padding, 1px separator, 100% width. Sidebar: 220px fixed. Content area: flex. Thumbnail grid: 4-column with 16px gap. Modal: 480px wide.
6. Motion & Interaction
File upload shows progress ring on file icon. Rename field inline-edits in place. Share modal slides up. Drag-and-drop shows ghost + drop target highlight. File type icon animates on new upload confirmation.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for