Overview
Dropbox's design system (DIG — Dropbox Interface Guidelines) is a mature, token-driven system built around warm off-white neutrals, a signature Dropbox Blue (#0061fe), and a dual-font strategy pairing Sharp Grotesk for display and Atlas Grotesk for body text. The system emphasises clarity and calm, using subtle layered box shadows for depth, a generous but measured spacing scale based on an 8px base unit, and a flat-border-radius default that can be overridden to rounded corners via the vis2023 theme variant.
Signature traits: warm neutral palette anchored in off-white (#f7f5f2), dual-typeface system with geometric grotesks, 8px-base spacing grid, dual light/dark mode via CSS custom properties, flat (0px) default border radius with rounded option, and a token-layered colour architecture supporting full theme inversion.
Colors
| Role | Token | Hex | Usage |
|------|-------|-----|-------|
| Background | --dig-color__background__base | #ffffff | Page backgrounds |
| Surface | --dig-color__background__subtle | #f7f5f2 | Card/panel backgrounds |
| Text Primary | --dig-color__text__base | #1a1918 | Headings, body copy |
| Text Secondary | --dig-color__text__subtle | #736c64 | Captions, placeholders, helper text |
| Border | --dig-color__border__base | #bbb5ae | Dividers, input outlines |
| Accent | --dig-color__primary__base | #0061fe | CTAs, links, highlights, focus rings |
Typography
| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Sharp Grotesk, SharpGrotesk (title stack) | 28px | 400 | 36px | 0 | Hero headlines | | Heading | Sharp Grotesk, SharpGrotesk (title stack) | 22px | 400 | 28px | 0 | Section titles | | Body | Atlas Grotesk Web, AtlasGrotesk (body stack) | 14px | 400 | 22px | 0 | Paragraph text | | Caption | Atlas Grotesk Web, AtlasGrotesk (body stack) | 12px | 400 | 20px | 0 | Labels, metadata | | Mono | ui-monospace, SFMono-Regular, SF Mono, Menlo (monospace stack) | 14px | 600 | 22px | 0 | Code, data |
Layout
| Token | Value | Context |
|-------|-------|---------|
| Spacing XS | 4px | Inline gaps, icon padding |
| Spacing SM | 8px | Component internal padding |
| Spacing MD | 16px | Component padding, card gutters |
| Spacing LG | 24px | Section gaps, between components |
| Spacing XL | 32px | Layout margins, section padding |
| Spacing 2XL | 40px | Large section separators |
| Max Width | 1344px | Content container (--dwg-plank-frame__max-content-width) |
Responsive strategy: Seven breakpoints observed — mobile (base), mobile-lg (480px), tablet (768px), tablet-lg (1024px), desktop (1280px), desktop-lg (1440px), and ultrawide (1920px). The system uses a fluid flex-grid with CSS custom property overrides at each breakpoint, enabling per-cell column span control without JavaScript.
Elevation & Depth
| Level | CSS Value | Usage |
|-------|-----------|-------|
| sm (elevation1) | 0px 8px 32px #1e191908, 0px 8px 16px #1e191908, 0px 4px 8px #1e191908, 0px 2px 4px #1e191908, 0px 1px 2px #1e191908 | Cards, tooltips |
| md (elevation2) | 0px 16px 80px #1e191908, 0px 32px 48px #1e191908, 0px 16px 32px #1e191908, 0px 8px 24px #1e191908, 0px 4px 16px #1e191908, 0px 2px 8px #1e191908, 0px 1px 4px #1e191908 | Dropdowns, popovers |
| lg (focus ring) | 0 0 0 3px #3080ff | Modals, overlays, focused interactive elements |
Shapes
| Token | Value | Applied To |
|-------|-------|-----------|
| none | 0px | Default theme — all components (buttons, cards, inputs) |
| sm | 4px | --dig-radius__xsmall — small interactive elements (vis2023 theme) |
| md | 8px | --dig-radius__medium — cards, modals (vis2023 theme) |
| lg | 12px | --dig-radius__large — large cards, containers (vis2023 theme) |
| xl | 16px | --dig-radius__xlarge — prominent containers (vis2023 theme) |
| full | 9999px | --dig-radius__circular — pills, avatar chips, circular buttons |
Components
Buttons: Two generations co-exist — dwg-button and dwg-button2. Primary buttons use the core accent blue with --dwg-theme__color__primary__button--hover darkening on hover. Outline buttons have a 2px solid border. Transparent/text buttons use text-decoration underline as their affordance. All interactive elements share a consistent 0 0 0 3px var(--dig-color__utility__focus-ring) focus ring pattern via :focus-visible.
Accordion: CSS-only implementation using a hidden checkbox input for state. Dropdown panels animate via max-height and opacity transitions at 300ms with cubic-bezier(0.5, 0, 0, 1). Used in the JTBD (Jobs To Be Done) plank with additional media reveal animations.
Navigation dropdown: Supports 1-, 2-, and 3-column layouts at desktop widths (240px per column). List items animate with hover colour transitions and use inset focus rings. Nav redesign variant adds border-radius: 12px to list items.
Modals: Fixed-position, centered at >=1024px via transform: translate(-50%, -50%). Full-width on mobile. Uses <dialog> element with ::backdrop for the overlay. Max width 768px at desktop.
Notifications: Animated via fade-in keyframe (opacity: 0, translateY(-10px) → opacity: 1). Semantic colour variants: error (#f4e5ea/#9a0032), warning (#fef5da/#9a6500), success (#e5efe0/#2d8000), info (#fff/#666), confirm (#deebff/#0044af).
Plank Frame: The core page layout primitive. Manages vertical rhythm via CSS custom properties for margin-top/bottom at each breakpoint. Coloured planks (e.g. --coconut, --graphite) collapse their margins when adjacent to a differently-coloured plank to prevent double-spacing.
Typography: Rich-text variant includes opinionated list, paragraph, and heading spacing. Ordered lists use CSS counters with dot-separated numbering. The vis2023 theme shifts action/button font family from body stack to the title (Sharp Grotesk) stack and adds 0.02em letter-spacing to action elements.
Do's and Don'ts
| Do ✓ | Don't ✗ |
|------|---------|
| Use #0061fe (Dropbox Blue) as the single primary action colour | Use multiple competing accent colours on the same surface |
| Use Sharp Grotesk for all display and heading text | Use Atlas Grotesk for display-size headlines |
| Apply the 8px base spacing grid (4px, 8px, 16px, 24px, 32px, 40px) | Use arbitrary spacing values outside the defined token scale |
| Use 0 0 0 3px var(--dig-color__utility__focus-ring) for all focus states via :focus-visible | Remove focus indicators or rely solely on outline |
| Use CSS custom property tokens for all colour references to support dark mode | Hard-code hex colour values in component styles |
| Default to border-radius: 0 in the standard theme; opt into rounded corners via the vis2023 theme variant | Mix rounded and flat radius styles across the same theme context |
Agent Prompt Guide
You are working within the Dropbox: Secure cloud storage, file sharing, and more design system. Key constraints:
- —Colours: background #ffffff, surface #f7f5f2, text #1a1918, text-secondary #736c64, border #bbb5ae, accent #0061fe — reference via CSS custom properties (e.g. var(--dig-color__primary__base))
- —Typography: Sharp Grotesk for headings/display (28px/36px bold, 22px/28px standard), Atlas Grotesk Web for body (14px/22px) and captions (12px/20px), monospace stack for code (600 weight)
- —Spacing: use the 8px-base scale only — xs=4px, sm=8px, md=16px, lg=24px, xl=32px, 2xl=40px
- —Radius: 0px (flat) for default theme; 4px/8px/12px/16px/999px available in vis2023 theme variant
- —Elevation: multi-layer warm-tinted box-shadows at very low opacity (#1e191908); focus ring is 0 0 0 3px #3080ff
- —Dark mode: all colour tokens invert automatically via .dig-Mode--dark — never hard-code hex values
- —Never use colours, fonts, or spacing values outside the design system token set