What font does Dropbox use?

Dropbox’s website uses three typefaces: Sharp Grotesk (headings and body text), served from cfl.dropboxstatic.com; Atlas Grotesk Web, served from cfl.dropboxstatic.com; Sharp Grotesk 23, served from cfl.dropboxstatic.com.

What are Dropbox’s brand colours?

The main colours on dropbox.com are Royal Blue (#0061FE), Brown (#9B0032), Dark Golden Rod (#9B6400), Yellow Green (#B4DC19), Dodger Blue (#3984FF) and Gold (#FAD24B).

What colour is Dropbox’s text and background?

Body text is #1E1919 on a #FFFFFF background.

Where is Dropbox’s logo from?

The logo shown in this guide was found on dropbox.com’s homepage. For official logo files and usage rules, check Dropbox’s own brand or press page.

Is this Dropbox’s official style guide?

No. SiteStyleGuide made it from dropbox.com’s public web pages on 27 October 2026, and isn’t affiliated with Dropbox. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from dropbox.com’s public web pages. Not affiliated with or endorsed by Dropbox. The real site is dropbox.com ↗

Unofficial style guide

Dropboxstyle guide

Dropbox’s website (dropbox.com) uses Sharp Grotesk for its headings and body text. Its palette is led by Royal Blue (#0061FE), Brown (#9B0032) and Dark Golden Rod (#9B6400), with #1E1919 text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: dropbox.com
Typefaces: Sharp Grotesk, Atlas Grotesk Web, Sharp Grotesk 23
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the dropbox.com homepage on a desktop screen — Screenshot of dropbox.com on a 1440 px desktop screen, 27 Oct 2026.

Screenshot of the dropbox.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Dropbox: Secure cloud storage, file sharing, and more; ● 53 / 60 characters
Meta description: Discover Dropbox – secure, easy cloud storage for file sharing and collaboration. With Dash, save time and organize all your company content in one place.; ● 154 / 160 characters
Site name: Dropbox
og:title: Dropbox: Secure cloud storage, file sharing, and more
og:description: Discover Dropbox – secure, easy cloud storage for file sharing and collaboration. With Dash, save time and organize all your company content in one place.
Language: en

In search results

Dropboxhttps://www.dropbox.com/

Dropbox: Secure cloud storage, file sharing, and more

Discover Dropbox – secure, easy cloud storage for file sharing and collaboration. With Dash, save time and organize all your company content in one place.

When shared

dropbox.com

Dropbox: Secure cloud storage, file sharing, and more

Discover Dropbox – secure, easy cloud storage for file sharing and collaboration. With Dash, save time and or…

Logo & favicons

Found as: schema.org logo. PNG, 1200 × 628.

Logo

On white

On black

On Royal Blue

Favicons

1 found

32 px · ICO shortcut icon

Dropbox: Secure cloud storage, file sharing, and more

Light browser tab

Dropbox: Secure cloud storage, file sharing, and more

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#1E1919) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Off White 22.6%
Royal Blue 13%
Warm Near Black 12.5%
Warm Light Grey 6%
Brown 5.8%
Dark Golden Rod 5.5%
Yellow Green 5.1%
Dodger Blue 5.1%
Gold 4.9%
Green 4.7%
Orange Red 4.4%
Black 3.6%
Dark Slate Grey 2.1%
Light Steel Blue 1.9%
Plum 1.4%
Cornflower Blue 1.4%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 2 3

On text
15.97:1 AAA

On white
1.09:1 Fail

Background, text, border · --dig-color__fileicon__container, --dig-color__background__subtle
Warm Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 17 17 88

On text
—

On white
17.38:1 AAA

Background, text, border · button, --dig-color__glyph__primary
Warm Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 3 6 25

On text
9.11:1 AAA

On white
1.91:1 Fail

Background, border, text · .dwg-bg-color--disabled, .disabled\:dwg-bg-color--disabled:disabled
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 98

On text
1.17:1 Fail

On white
20.38:1 AAA

Text, background · --dig-color__text__base, --dig-color__secondary__base

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 62 0 0

On text
3.43:1 AA large

On white
5.07:1 AA

Text, background, border · ._dwg-plan-card-v2__dash-preview-banner-redesigned_j27m8_147 ._dwg-plan-card-v2_, --dig-color__icon__accent
Brown

HEX

RGB

HSL

OKLCH

CMYK
0 100 68 39

On text
2.02:1 Fail

On white
8.61:1 AAA

Text, border · --dig-color__alert__base, --dig-color__accent__red
Dark Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 35 100 39

On text
3.49:1 AA large

On white
4.98:1 AA

Text, border · --dig-color__accent__yellow, .server-warning
Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
18 0 89 14

On text
10.92:1 AAA

On white
1.59:1 Fail

Text · --dig-color__identity__green, --dig-color__identity__on-green
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
78 48 0 0

On text
4.90:1 AA

On white
3.55:1 AA large

Text · --dig-color__glyph__accent, --dig-color__utility__focus-ring
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 16 70 2

On text
11.91:1 AAA

On white
1.46:1 Fail

Text · --dig-color__identity__yellow, --dig-color__identity__on-yellow
Green

HEX

RGB

HSL

OKLCH

CMYK
63 0 98 52

On text
3.22:1 AA large

On white
5.39:1 AA

Text, border · .server-success, .dwg-color--success
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 66 88 2

On text
5.28:1 AA

On white
3.29:1 AA large

Text · --dig-color__identity__red, --dig-color__identity__on-red
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
81 0 25 69

On text
1.85:1 Fail

On white
9.40:1 AAA

Text · --dig-color__success__base, --dig-color__accent__green
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
29 18 0 0

On text
11.18:1 AAA

On white
1.55:1 Fail

Border · --dig-color__folder__closed, --dig-color__folder__outside
Plum

HEX

RGB

HSL

OKLCH

CMYK
17 27 0 6

On text
8.98:1 AAA

On white
1.94:1 Fail

Used · --dig-color__identity__purple, --dig-color__identity__on-purple
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
63 38 0 0

On text
6.42:1 AA

On white
2.71:1 Fail

Used · --dig-color__highlight__blue--bolder, --dig-color__primary__on-surface

Gradients

linear-gradient(0deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.35) 25.48%,transparent 67.79%)
linear-gradient(90deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%)
linear-gradient(180deg,#292c31,#000)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Sharp Grotesk

Aa 400 Aa 500

Sharp Grotesk

Served from cfl.dropboxstatic.com · weights 400, 500 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 500

Atlas Grotesk Web

Served from cfl.dropboxstatic.com · weights 400, 500 · buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 500

Sharp Grotesk 23

Served from cfl.dropboxstatic.com · weights 400, 500 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Sizes in use

Most common across the site

27px2 rules
26pxline 130% · 2 rules
20px1 rules
18px2 rules
16pxline 20px · 3 rules
14pxline 18px · 4 rules
12pxline 18px · 4 rules
10pxline 14px · 2 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

12px · 7×
50% · 4×
4px · 4×
16px · 3×

Shadows

0 0 0 3px #428bff
0 0 0 3px #3080ff
0 0 0 2px #a0d1fa

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

480

768

1024

1280

1440

1920

On a scale of 0 to 1920 px.

Content widths (max-width)

1800 px

1440 px

1280 px

768 px

696 px

648 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 53 characters, short enough to show in full in search results.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Dropbox use?: Dropbox’s website uses three typefaces: Sharp Grotesk (headings and body text), served from cfl.dropboxstatic.com; Atlas Grotesk Web, served from cfl.dropboxstatic.com; Sharp Grotesk 23, served from cfl.dropboxstatic.com.
What are Dropbox’s brand colours?: The main colours on dropbox.com are Royal Blue (#0061FE), Brown (#9B0032), Dark Golden Rod (#9B6400), Yellow Green (#B4DC19), Dodger Blue (#3984FF) and Gold (#FAD24B).
What colour is Dropbox’s text and background?: Body text is #1E1919 on a #FFFFFF background.
Where is Dropbox’s logo from?: The logo shown in this guide was found on dropbox.com’s homepage. For official logo files and usage rules, check Dropbox’s own brand or press page.
Is this Dropbox’s official style guide?: No. SiteStyleGuide made it from dropbox.com’s public web pages on 27 October 2026, and isn’t affiliated with Dropbox. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

dropbox-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* dropbox.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/dropbox.com) */
:root {
  /* Colours */
  --text: #1E1919;
  --background: #FFFFFF;
  --colour-off-white: #F7F5F2;
  --colour-warm-near-black: #1E1919;
  --colour-warm-light-grey: #C0BBB4;
  --colour-black: #050505;
  --colour-royal-blue: #0061FE;
  --colour-brown: #9B0032;
  --colour-dark-golden-rod: #9B6400;
  --colour-yellow-green: #B4DC19;
  --colour-dodger-blue: #3984FF;
  --colour-gold: #FAD24B;
  --colour-green: #2D7A02;
  --colour-orange-red: #FA551E;
  --colour-dark-slate-grey: #0F503C;
  --colour-light-steel-blue: #B4D1FF;
  --colour-plum: #C8AFF0;
  --colour-cornflower-blue: #5F9DFF;
  --gradient-1: linear-gradient(0deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.35) 25.48%,transparent 67.79%);
  --gradient-2: linear-gradient(90deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);
  --gradient-3: linear-gradient(180deg,#292c31,#000);

  /* Typefaces */
  --font-headings: 'Sharp Grotesk', 'SharpGrotesk', 'Sharp Grotesk KR', 'Sharp Grotesk Thai', 'Atlas Grotesk Web', 'Atlas Grotesk';
  --font-buttons: 'Atlas Grotesk Web', 'Atlas Grotesk', 'AtlasGrotesk', -apple-system, blinkmacsystemfont, 'Segoe UI';
  --font-other: 'Sharp Grotesk 23', 'Sharp Grotesk 23 KR', 'Sharp Grotesk 23 Thai', 'Atlas Grotesk Web', 'Atlas Grotesk', 'AtlasGrotesk';

  /* Shape */
  --radius-1: 12px;
  --radius-2: 50%;
  --radius-3: 4px;
  --radius-4: 16px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 768px;
  --breakpoint-3: 1024px;
  --breakpoint-4: 1280px;
  --breakpoint-5: 1440px;
  --breakpoint-6: 1920px;
  --max-width-1: 1800px;
  --max-width-2: 1440px;
  --max-width-3: 1280px;
  --max-width-4: 768px;
  --max-width-5: 696px;
  --max-width-6: 648px;
}

{
    "site": "dropbox.com",
    "source": "https://sitestyleguide.com/dropbox.com",
    "text": "#1E1919",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Off White",
            "hex": "#F7F5F2",
            "rgb": [
                247,
                245,
                242
            ]
        },
        {
            "name": "Warm Near Black",
            "hex": "#1E1919",
            "rgb": [
                30,
                25,
                25
            ]
        },
        {
            "name": "Warm Light Grey",
            "hex": "#C0BBB4",
            "rgb": [
                192,
                187,
                180
            ]
        },
        {
            "name": "Black",
            "hex": "#050505",
            "rgb": [
                5,
                5,
                5
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0061FE",
            "rgb": [
                0,
                97,
                254
            ]
        },
        {
            "name": "Brown",
            "hex": "#9B0032",
            "rgb": [
                155,
                0,
                50
            ]
        },
        {
            "name": "Dark Golden Rod",
            "hex": "#9B6400",
            "rgb": [
                155,
                100,
                0
            ]
        },
        {
            "name": "Yellow Green",
            "hex": "#B4DC19",
            "rgb": [
                180,
                220,
                25
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#3984FF",
            "rgb": [
                57,
                132,
                255
            ]
        },
        {
            "name": "Gold",
            "hex": "#FAD24B",
            "rgb": [
                250,
                210,
                75
            ]
        },
        {
            "name": "Green",
            "hex": "#2D7A02",
            "rgb": [
                45,
                122,
                2
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FA551E",
            "rgb": [
                250,
                85,
                30
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#0F503C",
            "rgb": [
                15,
                80,
                60
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#B4D1FF",
            "rgb": [
                180,
                209,
                255
            ]
        },
        {
            "name": "Plum",
            "hex": "#C8AFF0",
            "rgb": [
                200,
                175,
                240
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#5F9DFF",
            "rgb": [
                95,
                157,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Sharp Grotesk",
            "stack": "\"Sharp Grotesk\", \"SharpGrotesk\", \"Sharp Grotesk KR\", \"Sharp Grotesk Thai\", \"Atlas Grotesk Web\", \"Atlas Grotesk\", \"AtlasGrotesk\", -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
            "weights": [
                400,
                500
            ],
            "source": "Served from cfl.dropboxstatic.com"
        },
        {
            "name": "Atlas Grotesk Web",
            "stack": "\"Atlas Grotesk Web\", \"Atlas Grotesk\", \"AtlasGrotesk\", -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
            "weights": [
                400,
                500
            ],
            "source": "Served from cfl.dropboxstatic.com"
        },
        {
            "name": "Sharp Grotesk 23",
            "stack": "\"Sharp Grotesk 23\", \"Sharp Grotesk 23 KR\", \"Sharp Grotesk 23 Thai\", \"Atlas Grotesk Web\", \"Atlas Grotesk\", \"AtlasGrotesk\", -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
            "weights": [
                400,
                500
            ],
            "source": "Served from cfl.dropboxstatic.com"
        }
    ]
}

Websites whose lead colour is closest to Dropbox’s

CTV News

ctvnews.ca · 5 days ago
Save
Interia

interia.pl · 20 hours ago
Save
Digg

digg.com · 1 day ago
Save
WeTransfer

we.tl · 3 days ago
Save

Captured from dropbox.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Dropbox; this guide describes the public website for reference.

Dropboxstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Off White

Warm Near Black

Warm Light Grey

Black

Colours

Royal Blue

Brown

Dark Golden Rod

Yellow Green

Dodger Blue

Gold

Green

Orange Red

Dark Slate Grey

Light Steel Blue

Plum

Cornflower Blue

Gradients

Sharp Grotesk

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run dropbox.com?

Similar colours

CTV News

Interia

Digg

WeTransfer

Title &
description