Design System inspired by Dropbox

Cloud storage. Blue brand, clean illustration style, friendly corporate.

Usage

npx getdesign@latest add dropbox

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Dropbox design system. A curated starting point for building Dropbox-like UIs with your AI coding agent.

Cloud storage. Blue brand, clean illustration style, friendly corporate.

Preview

dropbox.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF DROPBOX

Cloud storage. Blue brand, clean illustration style, friendly corporate.

Explore the system View tokens

Color Palette

Cloud storage. Blue brand, clean illustration style, friendly corporate.

Primary

Dropbox Blue

#0061ff

Brand color

Dark Blue

#003b99

Brand color

White

#ffffff

Brand color

Light Gray

#f7f5f2

Brand color

Warm Gray

#d1ccbe

Brand color

Black

#1e1919

Brand color

Coral

#ff7e79

Brand color

Purple

#a262ff

Brand color

Typography

A type system inspired by Dropbox.

Sharp Grotesk

Sharp Grotesk, Sharp Grotesk

Atlas Grotesk

Atlas Grotesk, Sharp Grotesk

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Dropbox.

Not detected on this URL

Components

Other component primitives mapped from the Dropbox spec.

Not detected on this URL

Design System Inspired by Dropbox

1. Visual Theme & Atmosphere

Cloud storage. Blue brand, clean illustration style, friendly corporate.

Key Characteristics:

Dropbox Blue (#0061FF) as primary brand

Hand-drawn illustration style for personality

Clean corporate layouts with warmth

File-type icons as visual language

Generous whitespace and rounded corners

2. Color Palette & Roles

Primary

Dropbox Blue (#0061FF): Brand color
Dark Blue (#003B99): Brand color
White (#FFFFFF): Brand color
Light Gray (#F7F5F2): Brand color
Warm Gray (#D1CCBE): Brand color
Black (#1E1919): Brand color
Coral (#FF7E79): Brand color
Purple (#A262FF): Brand color

3. Typography Rules

Font Family

Display & UI: Sharp Grotesk, Atlas Grotesk

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Dropbox Blue: #0061FF
Dark Blue: #003B99
White: #FFFFFF
Light Gray: #F7F5F2
Warm Gray: #D1CCBE
Black: #1E1919

Typography

Font: Sharp Grotesk, Atlas Grotesk