Squarespace Design System

Squarespace's marketing canvas is editorial before it is technical. The page opens on a photographic dark band — plants, vases, a wooden shelf — with the hero "A website makes it real" set in Clarkson at 64px weight 300, the lightest weight available on the page, kerned tight to `-3.84px`. Below the hero, the canvas flips to pure white, and from there every band is either pure `#ffffff` or pure `#000000` with photographic content carrying the chromatic load. The Squarespace marketing brand owns almost no chromatic chrome of its own: the page's 989 white hits and 839 black hits account for the overwhelming majority of color usage, and the only true accent hexes — `#88bcd8` cool sky and `#f3ffc1` warm citrus — appear exclusively inside footer linear-gradients. This is a brand that lets customer content provide every color, and reserves its own CSS for layout, type, and contrast.

This page packages the system into a single DESIGN.md file built on the Google Labs open spec. Inside: 18 color tokens grouped into surface, ink, hairline, gradient anchor, and inherited semantic roles; 9 type styles all running the proprietary `Clarkson` and `Clarkson Serif` families with 12px–64px sizes and weights 300 / 400 / 500; 5 radius tokens with the twin-chassis pattern (8px rectangle, 100px pill, plus 0 / 30px / 50% utility); 9 spacing increments on a tight 4px grid leaning on 8 / 12 / 16 / 24 / 32 / 40px steps; and 19 component recipes covering buttons, top nav, cards, inputs, hero bands, footer gradient surface, and the editorial italic h3 break. Every token is a quoted string ready to paste into Tailwind config or CSS variables.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Squarespace's discipline — the 8px-radius rectangle CTA, the 100px pill secondary, the weight-300 hero, the serif italic h3 — instead of a generic monochrome shadcn theme. The system is worth studying because it inverts the no-code category's normal voice. Where most no-code builders (Webflow, Framer, Wix) lean on chromatic category palettes or gradient atmosphere as primary chrome, Squarespace treats its own CSS as a frame for someone else's photography — black hairlines, white surfaces, one editorial typeface, and a single italic serif accent. The brand confidence is in restraint.