Dropbox

Reference it for

• Cream-on-cream surface system — coconut #f7f5f2 page background + coconut-200 #eee9e2 section bands; warmer than pure white, more trustworthy than grey
• Single saturated brand colour rationed for CTAs — #0061fe appears 1 time as background, 4 times as ambient brand colour; never used decoratively
• Real product UI in the hero — Dropbox desktop app + mobile app composed side-by-side, real file names, real avatars, real interface chrome
• Section-banded long-page structure — 13 H2-led sections, each on a coconut variant, separated by adequate vertical breathing room
• 12px-radius workhorse with 100px pill reserved for the CTA — sharp-enough-to-feel-modern, soft-enough-to-feel-friendly
• Body type at 16px / 22px line-height — generous reading rhythm with 19.2px and 21.6px line-heights used for the secondary product cards
• 0 box-shadows on the page — depth comes from surface contrast between coconut variants, never elevation
• Bespoke Sharp Grotesk display + Atlas Grotesk body — high-craft custom face for titles, workhorse grotesque for body. A great licensable substitute is Söhne + Söhne Mono, or Inter Display + Inter if budget is constrained

Do not copy

• The Dropbox blue #0061fe itself — pick the client's saturated colour
• Atlas Grotesk Web and Sharp Grotesk licences — these are Dropbox-bespoke commissioned families
• The "Try Dropbox free" / "Discover Dash" dual-CTA pattern (two CTAs in the hero) — this only works because Dropbox has two strongly differentiated products to compete for the click; for most clients, one CTA converts better
• The 700M-user social-proof H2 — only ship that pattern if the client genuinely has the scale
• The dwg- and dig- design-token prefix system — Dropbox's foundations library is internal infrastructure; copying the naming reads as derivative