Dropbox Design System Preview

01 / Colors

Warm canvas, blue action

Dropbox clearly separates surface from action: cream/white carries the work, near-black carries readability, blue carries conversion and focus.

Dropbox Blue#0061FE

CTA, Logo, Focus.

Blue Hover#004DC7

Hover/active.

Warm Canvas#F7F5F2

Page background.

Dropbox Ink#1E1919

Headlines, footer.

Muted Text#736C64

Secondary copy.

Warm Border#D3CEC9

Hairlines.

Blue Wash#B4D1FF

Selected files.

Brand Yellow#FAD24B

Illustration accent.

Brand Lime#B4DC19

Product accent.

Brand Orange#FA551E

Highlight only.

Success#0F503C

Secure/OK.

Error#9B0032

Risk/error.

02 / Typography

Sharp headline, Atlas work text

Live CSS shows Sharp Grotesk for big statements and Atlas Grotesk Web for paragraphs, navigation and practical UI.

Display XL

64px / 500 / 1.05

Found what you need!

Hero/H1

48px / 500 / 1.08

Send securely, share fast

Section Title

32px / 500 / 1.2

Everything perfectly organised

Body Large

20px / 400 / 1.5

Dropbox offers tools for simplified collaboration and secure file storage.

Body/UI

16px / 400 / 1.5

Sync, share, comment and restore files.

03 / Buttons

Action hierarchy

Blue is primary, text links stay plain, dark surfaces get light outline buttons. Cookie primary actions may be black.

04 / Cards

Files, folders, proof

Cards are functional and flat. Elevation belongs mainly to product mockups and overlays, not every content surface.

Product mockup

Team Folder

Shared folder with synced assets and role-based sharing.

4 people editing

Article

McLaren Racing

Resource card with label, image area, headline, copy and link.

Security

Security always comes first

Dark trust card with lock icon, quote and CTA pair.

Construction

Store and review CAD, BIM, PDF and visual content files from anywhere.

Upload Progress

Transfer large files with a clear progress indicator.

Version History

Previous file versions remain accessible and restorable.

v24restore

05 / Brand-specific product patterns

Not generic SaaS

These patterns make the preview specific to Dropbox: file organisation, sharing, search, sync, security and industry translation.

Search first

Search bar as the core product promise: find files, info and messages.

Folder grid

Folder tiles with sync status, members, comments and file meta.

Share row

Avatar, role, permissions dropdown and copy link in one row.

Desktop + mobile

Overlapping devices show cross-platform file availability.

Logo rail

Monochrome customer logos with pause control as a quiet proof strip.

Security island

Dark block as a trust anchor instead of a small badge.

Industry translation

One core product translated for construction, media, tech, consulting, manufacturing and education.

Product portfolio menu

Dropbox, Replay, Sign, Reclaim.ai, Dash, DocSend as mega menu cards.

06 / Dark security panel

Security always comes first

Dropbox uses darkness not as an overall theme, but as a focused trust surface for privacy, encryption and recovery.

🔒

Protect files, keep work flowing

Tamper-proof documents, version history and access control told as concrete product benefits.

”The confidence that our data is protected.”
Customer story / Play card

”Truly impressive security features”
Tech influencer / Video card

07 / Forms

Plain, warm, focused

Form fields stay white and border-based. The focus state is a clear blue, error messages use the observed dark red tone.

Search fileShare roleEmailStatusMessage

Shared securelyReview openAccess denied

Send link with expiry date

08 / Spacing

Breathing room

The brand needs breathing room. Small UI follows 8px steps, the page story uses 88–128px vertical rhythm.

4px

micro gap

8px

icon gap

12px

input radius/gap

16px

button/card inset

24px

card padding

48px

section cluster

96px

section

128px

hero

09 / Radius

Soft utility corners

Dropbox is rounded but not playful. Product mockups may be softer than text cards.

4px
logo details

8px
chips

12px
inputs/menu items

16px
buttons/cards

24px
mockups

pill
states

10 / Elevation

Subtle product depth

Content stays nearly flat. Shadows signal app windows, overlays, mobile panels and dropdowns.

Flat
none

Border
1px

Low
1px

UI card
16/40

Overlay
34/90

Focus
blue ring

11 / Extracted component tokens

Implementation values

Concrete values for agents building Dropbox-style HTML/CSS/React components.

Header64px height, white/slightly transparent, subtle bottom edge, logo left, CTA right.#fff / #1E1919

Primary CTA16px radius, 15–16px vertical, 22–24px horizontal, Atlas Grotesk 16px.#0061FE / #F7F5F2

Hero mockupDesktop window 24px radius, mobile overlay 28px radius, warm border, soft shadow.#fff + #D3CEC9

Mega menu item12px radius, 12–16px padding, hover with #F7F5F2 or #F2F7FF.12px / #F7F5F2

File card16px radius, 14–24px padding, folder/icon on top, name and meta below.#fff / #EBE9E6

Security panelDark surface, 24–28px radius, light CTAs, quote cards with translucent borders.#1E1919

Input12px radius, 1px warm border, 12px 14px padding, focus ring #B4D1FF.#fff / #D3CEC9

Status chips999px radius, 7px 10px padding, coloured washes with dark text.success/warn/error