---
version: alpha
name: Squarespace
website: "https://www.squarespace.com"
description: >-
  Squarespace's marketing surface is a near-monochrome editorial canvas — pure white `#ffffff` and pure black `#000000` carry every chrome decision, with the proprietary `Clarkson` family handling the 64px / weight 300 hero display at -3.84px tracking and dropping to `Clarkson Serif` for italic editorial breaks; the only chromatic chrome on the entire page is a two-stop gradient pair (`#88bcd8` cool sky and `#f3ffc1` warm citrus) reserved for footer atmosphere, and the only CTA chassis is an 8px-radius rectangle paired against a 100px pill secondary.

seo:
  title: "Squarespace Design System for React — Clarkson, monochrome canvas, 8px chassis"
  metaDescription: "Squarespace's design system as a DESIGN.md file. Clarkson + Clarkson Serif, 18 colors, 9 type styles, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "Two-hex chrome — pure `#000000` and pure `#ffffff` carry 1828 of the page's ~1990 color hits between them, with 0 grey midtones in the page's CSS variables"
    - "Display weight at 300 — 64px Clarkson hero pulled to `-3.84px` letter-spacing, the lightest weight on the page rather than the heaviest"
    - "Serif italic as accent — `Clarkson Serif` at 26px weight 400 with `-0.52px` tracking is the system's only italic moment, used inside section h3 breaks"
    - "Gradient-only color — `#88bcd8` cool sky and `#f3ffc1` warm citrus exist exclusively inside footer linear-gradients, never as fills, borders, or text"
    - "Twin radius chassis — 8px (38 hits, card / input / button-primary) sits beside 100px pill (10 hits, secondary CTA / chip), with nothing between them"
  tags:
    - "Workflow & No-code"
    - "Design & Creative Tools"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.squarespace.com"
      title: "Squarespace — official site"
      description: "The live marketing surface this spec was extracted from — see the photographic hero, the dark gradient footer, and the serif italic h3 in motion."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Squarespace's primary brand color?"
      answer: "Squarespace's brand is monochrome — pure black (`#000000`, 839 page hits) and pure white (`#ffffff`, 989 hits) carry every chrome decision. The only true chromatic hexes in the system are `#88bcd8` (cool sky) and `#f3ffc1` (warm citrus), and both appear exclusively inside the footer linear-gradient — never as fills, borders, or text. A `#0072f0` blue exists as `--color-blue` in the root CSS but does not render anywhere on the captured marketing surface. Customer photography provides the brand's chromatic moments; Squarespace's own CSS provides only the frame."
    - id: "typography"
      title: "What typography does Squarespace use, and what should I substitute?"
      answer: "Squarespace runs two custom families: `Clarkson` (geometric sans, weights 300 / 400 / 500) and `Clarkson Serif` (transitional italic-leaning serif, weight 400). The 64px hero sits at weight 300 — the lightest weight available, kerned to `-3.84px`. The 40px h2 sits at weight 400 with `-1.6px` tracking. Body is 15px / weight 400 / `-0.015px` tracking. The only serif moment is the 26px h3 in `Clarkson Serif` at weight 400 with `-0.52px` tracking. Open-source substitutes: `Inter` weights 300 / 400 / 500 with character-variant `cv11` enabled for the sans, and `Source Serif Pro` or `Fraunces` weight 400 for the serif break."
    - id: "shape-language"
      title: "What is Squarespace's button geometry?"
      answer: "There are two radius tiers and nothing between them. Primary CTAs and text inputs sit at `{rounded.md}` 8px (38 page hits). Secondary CTAs and chip / pill labels sit at `{rounded.full}` 100px (10 hits). The system never uses a 4px utility radius, never uses a 12px / 16px / 20px intermediate, and never uses square 0px chassis on interactive surfaces — those appear only on full-bleed bands. The twin-chassis pattern is deliberate: every interactive element on the page is either a tight 8px rectangle or a full 100px pill."
    - id: "gradient-footer"
      title: "Why does only the footer use color?"
      answer: "The footer carries the page's only two chromatic hex declarations — `#88bcd8` cool sky and `#f3ffc1` warm citrus — both as gradient stops inside CSS `linear-gradient(...)` declarations. They never appear as flat fills, button backgrounds, badge surfaces, or text colors anywhere else in the system. Per the extraction, both hexes register zero text / bg / border hits on the entire 3305-element page and only 2 gradient hits each. The pattern is intentional: the footer band acts as the page's only atmospheric chromatic moment, and the rest of the canvas yields to customer photography for color."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React app?"
      answer: "Yes — the file is structured for AI tools. Feed it to Claude, Cursor, or GitHub Copilot alongside your component prompt, and the model will reproduce Squarespace's restraint (weight-300 hero, 8px / 100px twin chassis, serif italic accent on h3, monochrome chrome) instead of a generic shadcn theme. Every color, type style, radius, and spacing value is a quoted token you can paste directly into Tailwind config, CSS variables, or your own component library. The 19 component recipes resolve through `{token.path}` references so renaming `colors.canvas` propagates everywhere."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "The marketing surface does not expose hover states for `nav-link`, `button-primary`, or `card-template` — the brand uses subtle background-shifts that don't extract reliably from a static screenshot. Focus rings on `text-input` are likely the `#0072f0` `--color-blue` declared on `:root`, but the precise ring offset and width were not captured. Form-input validation states (error red, success green) are absent — none render in the static capture. The Squarespace template gallery uses customer photography to provide chromatic atmosphere; those template thumbnails are not extracted as part of this spec. The product-app UI (the Squarespace editor itself) lives behind auth and uses a denser chrome distinct from the marketing surface — not captured here."

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  canvas-inverse: "#000000"
  ink: "#000000"
  ink-deep: "#2f2f2f"
  ink-mid: "#5a5a5a"
  ink-mute: "#898989"
  on-ink: "#ffffff"
  hairline: "#dddddd"
  hairline-strong: "#000000"
  hairline-soft: "#dddddd"
  surface-inverse: "#000000"
  surface-mute: "#2f2f2f"
  gradient-sky: "#88bcd8"
  gradient-citrus: "#f3ffc1"
  link-blue: "#0072f0"
  focus-ring: "#0072f0"

typography:
  display-xl:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 66.56px
    letterSpacing: "-3.84px"
  display-lg:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 43.2px
    letterSpacing: "-1.6px"
  heading-serif-md:
    fontFamily: '"Clarkson Serif", Helvetica, sans-serif'
    fontSize: 26px
    fontWeight: 400
    lineHeight: 28.08px
    letterSpacing: "-0.52px"
  heading-sans-md:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 28.08px
    letterSpacing: "-0.52px"
  heading-sm:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "-0.2px"
  body-md:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: "-0.015px"
  body-sm:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18.2px
    letterSpacing: 0
  caption:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0
  eyebrow-uppercase:
    fontFamily: "Clarkson, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 14px
    letterSpacing: 0
    textTransform: uppercase

rounded:
  none: "0px"
  md: "8px"
  lg: "30px"
  full: "100px"
  circle: "50%"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "80px"
  4xl: "120px"

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    height: "80px"
    padding: "{spacing.base} {spacing.2xl}"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "{spacing.sm} {spacing.md}"
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md} {spacing.lg}"
    height: "44px"
    border: "0"
  button-primary-on-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md} {spacing.lg}"
    height: "44px"
    border: "0"
  button-secondary-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "{spacing.md} {spacing.lg}"
    height: "40px"
  chip-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.sm} {spacing.base}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md} {spacing.base}"
    height: "62px"
  hero-band-dark:
    backgroundColor: "{colors.canvas-inverse}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-xl}"
    padding: "{spacing.4xl} {spacing.2xl}"
  hero-band-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "{spacing.4xl} {spacing.2xl}"
  metric-band:
    backgroundColor: "{colors.canvas-inverse}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-xl}"
    padding: "{spacing.3xl} {spacing.2xl}"
  card-template:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  card-feature-dark:
    backgroundColor: "{colors.canvas-inverse}"
    textColor: "{colors.on-primary}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.md}"
    padding: "{spacing.xl}"
  card-photo:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: "0"
  italic-h3-break:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-serif-md}"
    padding: "{spacing.lg} 0"
  eyebrow-tag:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mid}"
    typography: "{typography.eyebrow-uppercase}"
    padding: "{spacing.xs} {spacing.sm}"
  category-tab:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "{spacing.sm} {spacing.base}"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas-inverse}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    padding: "{spacing.4xl} {spacing.2xl}"
  footer-gradient-band:
    backgroundColor: "{colors.gradient-sky}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "{spacing.4xl} {spacing.2xl}"
  link-inline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.link-blue}"
    typography: "{typography.body-md}"

---


## 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

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 300 | 66.56px | -3.84px | Hero headline. |
| `{typography.display-lg}` | 40px | 400 | 43.2px | -1.6px | Section h2. |
| `{typography.heading-serif-md}` | 26px | 400 | 28.08px | -0.52px | Italic serif h3 break. |
| `{typography.heading-sans-md}` | 26px | 400 | 28.08px | -0.52px | Sans h3 (paired with serif variant). |
| `{typography.heading-sm}` | 20px | 500 | 24px | -0.2px | Card-cluster h3. |
| `{typography.body-md}` | 15px | 400 | 21px | -0.015px | Default body paragraph. |
| `{typography.body-sm}` | 13px | 400 | 18.2px | 0 | Caption / metadata. |
| `{typography.caption}` | 12px | 400 | 16.8px | 0 | Fine-print rows. |
| `{typography.eyebrow-uppercase}` | 14px | 500 | 14px | 0 | UPPERCASE eyebrow tags. |

### 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

| Breakpoint | Treatment |
|---|---|
| Mobile (< 768px) | Hero stacks; grids drop to 1-up. |
| Tablet (768–1024px) | 2-up grids. |
| Desktop (≥ 1024px) | Full multi-up template grid; hero retains 64px display. |

#### 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

| Level | Treatment | Use |
|---|---|---|
| Level 0 — Flat | No shadow, no border. | Default bands and the photographic hero. |
| Level 1 — Hairline | 1px `{colors.hairline}` (`#dddddd`) stroke on `{colors.canvas}`. | Template cards, input borders, footer column dividers. |
| Level 2 — Inverse Surface | Pure-black `{colors.canvas-inverse}` (`#000000`) fill against the white page. | The "Grow your business" metric band and the feature-card-dark surfaces. |
| Level 3 — Gradient Atmosphere | Linear gradients composed of `{colors.gradient-sky}` (`#88bcd8`) and `{colors.gradient-citrus}` (`#f3ffc1`). | Footer bottom band only. |

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

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed bands. |
| `{rounded.md}` | 8px | The canonical button / input / card chassis (38 page hits). |
| `{rounded.lg}` | 30px | Larger photo card containers. |
| `{rounded.full}` | 100px | Pill secondary CTAs, category chips (10 page hits). |
| `{rounded.circle}` | 50% | Avatar / icon circles. |

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.