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
version: alpha name: Dropbox description: "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."
colors: primary: "#0061FF" on-primary: "#ffffff" primary-hover: "#0052D9" ink: "#1E1919" ink-muted: "#637282" canvas: "#ffffff" surface-1: "#F7F7F7" surface-2: "#EFEFEF" border: "#E2E2E2" folder-color: "#0061FF" success: "#28A745" danger: "#DC3545"
typography: display: fontFamily: "Dropbox Sans, Sharp Grotesk, -apple-system, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 1.05 letterSpacing: -0.03em body: fontFamily: "Atlas Grotesk, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 1px 4px rgba(0,0,0,0.08)" elevated: "0 4px 16px rgba(0,0,0,0.1)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
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.