Typography
scale ratio 1.266- Atlas Groteskcss: Atlas Grotesk Webbody400 50066%
- Sharp Groteskdisplay400 50035%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Sharp Grotesk | 66.24px | 500 | 1.08 | -0.015em |
| headline | Sharp Grotesk | 32px | 400 | 1.2 | 0em |
| title | Sharp Grotesk | 18px | 500 | 1.2 | 0em |
| body | Atlas Grotesk | 16px | 400 | 1.5 | 0em |
| body-sm | Atlas Grotesk | 14px | 400 | 1.429 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa26Aa32Aa66
- Body size
- 16px / 1.5
- Display size
- 66.24px
- Display tracking
- -0.015em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.38:1
- Muted on bg
- 5.30:1
- Accent on bg
- 5.07:1
- Dark mode
- none
Declared accent tokens
- --dig-color__accent__red#9B0032not on page
- --dig-color__icon__accent#0061FEpainted
- --dig-color__accent__cyan#007891not on page
- --dig-color__glyph__accent#0061FEpainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 51.5
- 72
- 120
- 258.5
Corner radii
121657.558pill
Shadows (0)
none
- Borders
- regular, 2px
- Section padding
- 120px
Components
exact computed valuesbutton-primary
- backgroundColor
- #0061FE
- textColor
- #F7F5F2
- rounded
- 12px
- padding
- 0px 12px
- height
- 40px
- fontFamily
- Times
- fontSize
- 16px
- fontWeight
- 400
- border
- 2px solid #0061FE
button-secondary
Try Dropbox free
- textColor
- #FFFFFF
- rounded
- 16px
- padding
- 24px 24px
- height
- 71.2px
- fontFamily
- Atlas Grotesk
- fontSize
- 16px
- fontWeight
- 500
- border
- 2px solid #FFFFFF
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #F7F5F2
Layout & motion
- Container
- 1344px
- Grid columns
- 2
- Hero
- centered
- Navigation
- top-sticky
- Page height
- 10,179px
- Easing
- cubic-bezier(0.4, 0, 0.6, 1)
- Durations
- 100ms 125ms 500ms 750ms
- Transitions
- 53
- Keyframes
- 8
- Stack
- react, lenis
Page sections (9)
section labels are heuristic
01banner?
02nav
03heroPeace of mind built in. Freedom to work your way.
04features?Join the over 700 million registered users who trust Dropbox
06content?
07features?Education
08features?Discover, learn, thrive with Dropbox
09footerCompany
How Dropbox compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 66.2px: larger than 67% of indexed sites (median 60px).
- Type scale
- 1.27×: flatter than 57% of indexed sites (median 1.28×).
- Container
- 1344px: wider than 83% of indexed sites (median 1242px).
- Text contrast
- 17.4:1: lower than 53% of indexed sites (median 17.6:1).
- Page length
- 10,179px: longer than 67% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Atlas Grotesk
- One of 2 indexed sites that load Atlas Grotesk (1%).
- Sharp Grotesk
- One of 2 indexed sites that load Sharp Grotesk (1%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Dropbox use?
Dropbox uses Atlas Grotesk (loaded as "Atlas Grotesk Web") for body text. Sharp Grotesk is used for headings.
What are Dropbox's brand colors?
Dropbox's website uses a light scheme: background #FFFFFF, surface #F7F5F2, text #1E1919, muted text #524A3ED1.
How is Dropbox's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1344px wide.
