Dropbox

name Dropbox

colors background: "#f7f5f2" # Coconut foreground: "#1e1919" # Graphite brand: "#0061fe" # Dropbox Blue muted: "#636363" border: "#d0d0d0" card: "#ffffff" accent: "#0061fe" dark: background: "#1e1919" foreground: "#f7f5f2" muted: "#a1a1a1" border: "#3d3d3d" card: "#2b2b2b" accent: "#0061fe"

typography fontFamily: sans: "Sharp Grotesk, Inter, system-ui, sans-serif" body: fontSize: "16px" lineHeight: "1.5" heading: fontWeight: "500" letterSpacing: "-0.01em"

rounded default: "4px" md: "8px" lg: "12px"

Design System: Dropbox

Overview

Dropbox's design system, DIG, focuses on "Expressive Contrast" and "Collaborative Clarity." It is a professional yet creative environment designed to help teams focus on their work.

Design Philosophy

• Expressive Contrast: Pairs the vibrant Dropbox Blue with soft, organic "Coconut" backgrounds and deep "Graphite" text.

• Composability: The system is built on a modular set of tokens and components that can be "dialed up or down" based on the context.

• Collaborative Clarity: The UI is designed to make file management and team communication feel effortless and transparent.

• Human-Centric Utility: Combines the precision of a file system with the warmth of a creative tool through unique typography and soft colors.

Colors

• Dropbox Blue (#0061FE): The signature brand "voltage." It represents the energy of collaboration and the brand's heritage.

• The "Coconut" Canvas (#F7F5F2): A soft, off-white background that feels more human and approachable than pure white.

• Vibrant Accent Palette: Uses an expansive secondary palette (Azalea, Sunset, Canopy, Ocean) for tagging, folders, and creative highlights.

Typography

• Sharp Grotesk: A massive typeface family that is the core of the brand. It allows for extreme variation in "personality" while maintaining a consistent structure.

• Inter (UI): Used for functional elements and metadata where neutrality and speed are paramount.

Components

• The Folder: A clean, flat icon that uses the brand blue or the accent palette to indicate organization.

• Sharing Modal: A high-contrast, center-focused component designed for zero-friction collaboration.

• The Grid View: A structured, high-density layout of file thumbnails with 4px rounding.

Visual Effects

• Bold Accents: Uses large blocks of color in marketing and headers to create a "confident" presence.

• Subtle Layering: Uses soft shadows and background shifts to separate the file navigation from the content.

• Micro-animations: Focuses on "successful completion" animations (like file uploads) to provide a sense of progress.