Design teardown
Dropbox
A warm off-white page with near-black type, blue reserved for the main action, and short centered sections under a product video.
dropbox.com
Design character
Warm paper, blue action
The first screen is a warm paper field with a white bar across the top. A two-line title sits left, with one support paragraph and a blue button beside a text link. A product video fills the right. Below that, a logo row, a black four-column band, then white centered sections: a small pill, a title, one or two sentences, a button, and another video. A dark gradient panel, quote cards, photo cards, and a black link footer follow. Copy stays short and practical.
Typography
Titles use Sharp Grotesk, mostly at weight 500, with a Sharp Grotesk 23 cut at weight 400 for some 32px lines. Interface text, navigation, buttons, and body use Atlas Grotesk Web at 400 and 500. Tracking on the page is normal. Consent buttons add about 0.3px of tracking.
Color system
The page is warm paper, white, and near-black. Blue is the filled action, the small mark tile, and text links in the consent note. A magenta label appears only on quote cards.
Spacing and geometry
The spacing unit is 8px. Sections are loose: feature bands open with about 120px of padding, and the black band opens with 72px. Controls use 12px, 16px, and 24px.
Layout
A sticky white header spans the viewport. The opening is a left-aligned split on warm paper. Later bands center a short text block, then a wide video or a card grid. The footer is a black multi-column link list.
Motion
Buttons change fill and border over 0.1s with a balanced ease. Header labels change color over 0.125s linear. A logo row drifts sideways on a 90s linear loop. Product areas are playing video.
UI fingerprint
- Warm paper, near-black type The opening is #f7f5f2. Text and the dark band are #1e1919. White is for the header and feature bands. The footer is #000000.
- Blue only for the action Filled buttons, the header mark tile, and consent links are #0061fe. The rest of the chrome stays paper, white, and near-black, plus one magenta label on quotes.
- Two grotesques Sharp Grotesk carries titles at 40, 32, 26, and 18px. Atlas Grotesk Web carries navigation, buttons, and sentences at 20, 16, and 14px.
- 12px and 16px corners Header and consent buttons are 12px. Large buttons and quote cards are 16px. Photo cards are 12px. The security panel is 20px. Section labels are pills.