Squarespace Design System

Overview

Squarespace's marketing canvas is editorial before it is technical. The page opens on a photographic dark band — plants, ceramic vases, a wooden shelf — with the hero "A website makes it real" set in {typography.display-xl} (64px Clarkson weight 300, the lightest weight available on the page), kerned tight to -3.84px. Below the hero, the canvas flips to pure {colors.canvas} (#ffffff), and from there every band alternates between white and pure black, with photographic content carrying the chromatic load.

Whispered chromatic restraint: the Squarespace marketing brand owns almost no chromatic chrome of its own. Pure #ffffff registers 989 hits across the page; pure #000000 registers 839. Together those two hexes carry 1828 of the page's ~1990 total color hits. The only chromatic hexes that exist as CSS declarations — #88bcd8 cool sky and #f3ffc1 warm citrus — appear exclusively inside footer linear-gradient(...) stops, contributing 2 hits each. Where most no-code builders (Webflow with its five-stop category palette, Framer with its gradient spotlight cards, Wix with its electric-cobalt CTA) carry their brand through chromatic chrome, Squarespace reserves its CSS for type, layout, and contrast — and lets customer photography provide every color.

The shape system runs on a twin-chassis pattern. Primary CTAs and text inputs sit at {rounded.md} 8px (38 page hits). Secondary CTAs and category chips sit at {rounded.full} 100px (10 hits). There is nothing between them — no 4px utility radius, no 12px or 16px intermediate. Every interactive surface on the page is either a tight 8px rectangle or a full 100px pill. Typography pairs Clarkson (geometric sans) at weights 300 / 400 / 500 with one italic serif moment — Clarkson Serif at 26px weight 400, -0.52px tracking — that lives inside h3 editorial breaks and nowhere else.

Key Characteristics:

• Two-hex chrome carrying 1828 of ~1990 color hits — {colors.canvas} (#ffffff) and {colors.ink} (#000000) do the structural work, with photography providing every chromatic moment.
• Weight 300 as hero signature — {typography.display-xl} at 64px / weight 300 / -3.84px tracking inverts the convention of bold display.
• Twin-radius chassis — {rounded.md} 8px (38 hits) for primary CTAs and inputs, {rounded.full} 100px (10 hits) for secondary CTAs and chips, with nothing between.
• Serif italic as accent — Clarkson Serif at 26px weight 400 with -0.52px tracking is the system's only italic moment, scoped to h3 editorial breaks.
• Gradient-only color — {colors.gradient-sky} #88bcd8 and {colors.gradient-citrus} #f3ffc1 exist exclusively inside footer linear-gradients.

Colors

Brand

• Ink Black ({colors.ink} — #000000) — frequency 839. Used as text (405), border (402), background (20), gradient (12). The brand's structural voltage. Carries every primary CTA fill, every dark hero band, every body heading, every footer surface.
• Canvas White ({colors.canvas} — #ffffff) — frequency 989. Used as text (427), border (426), background (12), gradient (124). The dominant surface and the on-dark text color. The 124 gradient hits anchor white-to-color transitions inside hero photo overlays.

Surface

• Ink Deep ({colors.ink-deep} — #2f2f2f) — frequency 9. Used as background (9). A dark grey lift, scoped to the page's middle "Grow your business" metric band where the surface needs to read as separate from pure black footer chrome.
• Hairline ({colors.hairline} — #dddddd) — frequency 7. Used as border (4), background (2), text (1). The 1px input border and the divider line between footer columns.

Text

• Ink Mute ({colors.ink-mute} — #898989) — frequency 140. Used as text (70), border (70). The mid-grey caption and the divider tone underneath body paragraphs.
• Ink Mid ({colors.ink-mid} — #5a5a5a) — declared as --color-gray-03 on :root for grey body type — does not render at the captured surface but is reserved as a documented role for secondary copy.

Gradient Anchors

• Gradient Sky ({colors.gradient-sky} — #88bcd8) — frequency 2. Used as gradient (2) only. The cool half of the footer's signature gradient band. Never appears as a fill, border, or text color anywhere else on the page.
• Gradient Citrus ({colors.gradient-citrus} — #f3ffc1) — frequency 2. Used as gradient (2) only. The warm half of the footer gradient. Same scoping rule — gradients only.

Semantic

• Link Blue ({colors.link-blue} — #0072f0) — declared as --color-blue on :root. Reserved for inline links and the focus-ring outline on text inputs.

Typography

Font Family

A two-family system: Clarkson (the proprietary geometric sans with weights 300 / 400 / 500) and Clarkson Serif (the matching transitional serif at weight 400). Both fall back to Helvetica then sans-serif. Open-source substitutes: Inter weights 300 / 400 / 500 for the sans, Source Serif Pro or Fraunces weight 400 for the serif.

Hierarchy

Principles

• Weight 300 as hero signature. The 64px display sits at weight 300 — the lightest weight on the page, never the heaviest. Where most no-code marketing sites command attention at weight 600+, Squarespace asserts authority at weight 300 with extreme negative tracking.
• Negative tracking scales with size. -3.84px at 64px, -1.6px at 40px, -0.52px at 26px, -0.015px at 15px. The brand's voice is kerned tight, not airy.
• Single serif moment. The 26px Clarkson Serif italic-leaning h3 break is the only typeface deviation in the system. Used inside section editorial copy, never inside cards or nav.
• No bold display. Weight 500 caps out at 20px headings; weight 400 is the default everywhere; weight 300 owns the hero only. The brand never goes 600+.

Layout

Spacing System

• Base unit: 4px, with heavy weighting on 8 / 12 / 16 / 24 / 32 / 40px multiples (the top six extracted spacing values).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 80px · {spacing.4xl} 120px.
• Section padding: hero / content bands use generous {spacing.4xl} 120px vertical inside a {spacing.2xl} 40px horizontal gutter.
• Card interior padding: template-grid cards sit at {spacing.lg} 24px; feature cards step up to {spacing.xl} 32px.

Grid & Container

• Marketing container uses a 12-column grid via the CSS variable --grid-column-width: calc((100vw - 520px) / 12).
• Grid gutter: --grid-gutter-width: 40px.
• Top nav height: --global-nav-height: 80px.
• Promo banner height (when present): --promo-banner-height: 40px.

Responsive Strategy

Touch Targets

Primary buttons render at 44px tall (12px vertical padding + 21px line-height). Text inputs render at 62px tall. WCAG AA met.

Elevation & Depth

Squarespace's marketing surface does not use drop-shadow elevation. Lift is signalled through pure-color polarity (white → black, black → gradient) rather than through box-shadow recipes.

Shapes

Border Radius Scale

The twin-chassis pattern (8px vs 100px, with nothing between) is the radius system's signature.

Components

Buttons

button-primary — the canonical 8px-radius rectangle CTA.

• Background {colors.ink} (#000000), text {colors.on-ink} white, label {typography.body-md} (15px weight 400), padding {spacing.md} {spacing.lg}, shape {rounded.md} 8px, height 44px.

button-primary-on-dark — the polarity-flipped CTA on the dark hero band.

• Background {colors.canvas} (#ffffff), text {colors.ink}, same typography, padding, shape, height.

button-secondary-pill — the pill outline secondary.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.ink} stroke, shape {rounded.full} 100px.

chip-pill — the rounded chip used in category rows.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} stroke, body in {typography.body-sm}, shape {rounded.full}.

Cards & Containers

card-template — the canonical template grid card.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} stroke, padding {spacing.lg} 24px, shape {rounded.md} 8px.

card-feature-dark — the polarity-flipped feature card on near-black.

• Background {colors.canvas-inverse} (#000000), text {colors.on-primary} white, padding {spacing.xl} 32px, shape {rounded.md} 8px.

card-photo — a full-bleed photographic card with no internal padding.

• Background {colors.canvas}, image fills the card chrome, shape {rounded.md} 8px.

Inputs & Forms

text-input — the 62px-tall text input from the hero email-capture form.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} stroke, body in {typography.body-md}, shape {rounded.md} 8px, padding {spacing.md} {spacing.base}, height 62px.

Navigation

top-nav — the 80px sticky top nav.

• Background {colors.canvas}, text {colors.ink}, 1px bottom {colors.hairline}, padding {spacing.base} {spacing.2xl}.

nav-link — link items inside top-nav.

• Text {colors.ink}, body in {typography.body-md}, padding {spacing.sm} {spacing.md}.

category-tab — the pill-shaped tab used in the template-category row above the grid.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} stroke, shape {rounded.full} 100px.

Signature Components

hero-band-dark — the photographic dark hero with weight-300 64px display.

• Background {colors.canvas-inverse}, text {colors.on-primary}, headline in {typography.display-xl}, padding {spacing.4xl} {spacing.2xl}.

hero-band-light — the white "Grow your business" band.

• Background {colors.canvas}, text {colors.ink}, headline in {typography.display-lg} (40px weight 400), padding {spacing.4xl} {spacing.2xl}.

metric-band — the inverse-canvas band carrying the 14M+ / $36B+ metric statistics.

• Background {colors.canvas-inverse}, text {colors.on-primary}, metrics in {typography.display-xl} (64px weight 300), padding {spacing.3xl} {spacing.2xl}.

italic-h3-break — the serif italic h3 editorial break.

• Background {colors.canvas}, text {colors.ink}, type {typography.heading-serif-md} (Clarkson Serif 26px weight 400, -0.52px tracking), padding {spacing.lg} 0. The system's only italic moment.

eyebrow-tag — the small uppercase eyebrow above section headlines.

• Background {colors.canvas}, text {colors.ink-mid}, type {typography.eyebrow-uppercase} (14px weight 500, uppercase), padding {spacing.xs} {spacing.sm}.

footer — the pure-black footer above the gradient band.

• Background {colors.canvas-inverse}, text {colors.on-primary}, body in {typography.body-sm}, padding {spacing.4xl} {spacing.2xl}.

footer-gradient-band — the page's only chromatic atmosphere.

• Background {colors.gradient-sky} (#88bcd8) fading to {colors.gradient-citrus} (#f3ffc1), text {colors.ink}, headline in {typography.display-lg}, padding {spacing.4xl} {spacing.2xl}.

link-inline — the inline blue text link.

• Background {colors.canvas}, text {colors.link-blue} (#0072f0), body in {typography.body-md}.

Do's and Don'ts

Do

• Reserve {colors.ink} (#000000) for every primary CTA fill, every body heading, and every footer surface. The brand's structural voltage is pure black.
• Set the hero headline in {typography.display-xl} at weight 300 with -3.84px tracking. The lightest weight is the loudest moment.
• Pair the 8px-radius rectangle CTA with the 100px-radius pill secondary. Nothing in between.
• Use {typography.heading-serif-md} (Clarkson Serif 26px italic) only inside h3 editorial breaks — never inside nav, cards, or buttons.
• Reserve the two gradient hexes ({colors.gradient-sky} and {colors.gradient-citrus}) for the footer band linear-gradient stops only.

Don't

• Don't promote the hero display to weight 400 or 500. The brand's hero signature is weight 300 at 64px with -3.84px tracking — bumping the weight kills the editorial voice.
• Don't fill button-primary with #0072f0 link blue. Blue is reserved for inline text links only; primary CTAs are pure #000000.
• Don't use #88bcd8 or #f3ffc1 as flat fills, border colors, or text. Both register zero text / bg / border hits on the entire page — they exist only as gradient stops in the footer band.
• Don't introduce a 4px or 12px button radius. The system's chassis is binary — 8px rectangle or 100px pill — and intermediate radii break the silhouette.
• Don't add box-shadow elevation to template cards. The brand signals lift through hairline borders and inverse-canvas polarity, not drop-shadows.

Known Gaps

• Hover states: nav-link, button-primary, and card-template hover styling uses subtle background-shifts that don't extract reliably from a static screenshot — not documented here.
• Focus rings: the system uses some form of focus indicator (likely a 2px outline at {colors.focus-ring} #0072f0), but exact ring offset and width were not captured.
• Form validation states: the captured surface does not render error / success input states — no red or green token surfaces in the marketing CSS.
• Template thumbnails: Squarespace's template gallery uses customer photography to provide chromatic atmosphere; those thumbnails are imagery rather than CSS tokens and are not part of this spec.
• Product UI: the Squarespace editor (the actual no-code builder) lives behind auth and uses a denser chrome distinct from the marketing surface — not captured here.
• Promo banner: --promo-banner-height: 40px is declared on :root but no promo banner renders in the captured surface, so its background, type, and CTA chrome are not documented.