Screenshot of Squarespace

Squarespace

www.squarespace.com

The reference for a purely achromatic system (#000000 / #ffffff only) where a single whisper-light display headline floats over a full-bleed cinematic photo, so the product's own user content carries all the colour.

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Clarkson
body
Clarkson
mono

Do / Don't

Reference it for

  • Strictly two-colour system: pure black #000000 and pure white #ffffff, with greys (#2f2f2f, #898989, #dddddd) reserved for borders and muted text only, no brand hue at all
  • Giant centred hero headline at ~64-72px in a light 300 weight with tight tracking (around -0.06em) so a sans reads with serif-like editorial density
  • Full-bleed photographic hero with a dark overlay and white type laid directly over it, no card or container framing the words
  • White solid CTA button with black label sitting on the dark photo, paired with a quiet supporting line ('Start for free. No credit card required.')
  • Slim dismissible promo bar pinned above the nav (offer copy + monospace coupon chip)
  • Floating overlap composition: tilted product-screenshot cards crop in from the bottom edge of the hero to preview what the tool makes
  • Depth without shadows: alternate pure-black and pure-white section bands instead of drop shadows or elevation
  • Component restraint: 8px-radius image cards, pill filter tabs (100px radius), square 0px-radius buttons, ghost outlines

Do not copy

  • The Squarespace wordmark and the cubic spiral logo mark
  • The proprietary Clarkson / Clarkson Serif typefaces (substitute a light geometric sans)
  • The literal 'A website makes it real' campaign line
  • The specific plant-shop hero photography and the demo store screenshots (Capsula, Bed & Blade)
  • The JUN20WF discount-code promo bar as live copy