Squarespace
www.squarespace.comThe 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.
Marketing Platform flagship
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