Dropbox

Dropbox sets restrained Sharp Grotesk headlines on a light pale cobalt canvas. Cobalt (#0061fe) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 12px, with 16px and 8px on smaller elements.

dropbox.com ↗

Colors

Cobalt

#0061fe

Primary actions and links

Rose

#cd2f7b

Secondary accent and highlights

Pale Cobalt

#deebff

Page canvas

Void

#000000

Headlines and body copy

Bone White

#f7f5f2

Surface or divider

Soft Bone White

#ffffff

Surface or divider

Graphite

#1e1919

Surface or divider

Ash

#524a3e

Supporting colour

Pale Ember

#eee9e2

Surface or divider

Type scale

DisplayKeep your content in Dropbox. Put it to work in your AI tools.Sharp Grotesk · 40px · 500

HeadingJoin the over 700 million registered users who trust DropboxAtlas Grotesk Web · 20px · 500

SubheadingOpenAIAtlas Grotesk Web · 20px · 500

BodyStore, share, and collaborate in Dropbox, then use the context behind your files with suppAtlas Grotesk Web · 20px · 400

NavBusinessTimes New Roman · 16px · 400

Buttons

Skip to main contentGet startedTry Dropbox free

Style reference measured from the public page at dropbox.com on 2026-10-12 for design education. Dropbox and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Dropbox, Style Reference
> Dropbox sets restrained Sharp Grotesk headlines on a light pale cobalt canvas. Cobalt (#0061fe) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 12px, with 16px and 8px on smaller elements.

**Theme:** light · **Source:** https://www.dropbox.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens, Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#0061fe` | `--color-accent` | Primary actions and links |
| Rose | `#cd2f7b` | `--color-secondary` | Secondary accent and highlights |
| Pale Cobalt | `#deebff` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Bone White | `#f7f5f2` | `--color-surface-1` | Surface or divider |
| Soft Bone White | `#ffffff` | `--color-surface-2` | Surface or divider |
| Graphite | `#1e1919` | `--color-surface-3` | Surface or divider |
| Ash | `#524a3e` | `--color-surface-4` | Supporting colour |
| Pale Ember | `#eee9e2` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Sharp Grotesk | 40px | 500 | 1.20 | 0 |
| Heading | Atlas Grotesk Web | 20px | 500 | 1.20 | 0 |
| Subheading | Atlas Grotesk Web | 20px | 500 | 1.20 | 0 |
| Body | Atlas Grotesk Web | 20px | 400 | 1.50 | 0 |
| Nav | Times New Roman | 16px | 400 | normal | 0 |

Font families on the page: Times New Roman, Atlas Grotesk Web, Arial, Sharp Grotesk, Sharp Grotesk 23. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 12px, 16px, 8px, 20px
- Primary button: background `#0061fe`, text `#f7f5f2`, radius 12px, padding 0px 12px, 16px / 400

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer