Squarespace Foundations
Squarespace's official brand guidelines, presented as an interactive experience of the principles behind its visual identity.
About Squarespace Foundations
Squarespace Foundations presents the company's brand identity as a guided, chapter-based experience rather than a static reference document. Numbered sections move through the logo, color, typography and photography, pairing concise principle statements with campaign imagery and pull quotes that explain how each element should behave.
The presentation alternates between near-black stages with sculptural imagery and bright editorial layouts framed by botanical photography, echoing the neutral, gallery-like palette it advocates. Squarespace built the site with the studio Resn.
Color palette
Typography
Website details
/frontpage
The interface provides a light-mode switch, an index menu and previous/next navigation controls.
The markup carries 61 image elements and 19 video elements, combining brand principle copy with campaign photography and film.
The palette rests on black, near-black and white with light grey neutrals, accented by deep blue, burnt orange and gold, matching the restrained, gallery-like color approach the guidelines describe. A narrow central column alternates white text panels and dark image panels over a full-bleed botanical backdrop.
The stylesheet defines a responsive layout with desktop breakpoints around 1024px, tablet breakpoints around 900 and 901px and mobile breakpoints around 500px.
The site uses Nuxt and Vue, with GSAP, ScrollTrigger, Draggable and Lenis referenced in its JavaScript.
