---
title: "Squarespace design system"
variant: extended
source: https://www.squarespace.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/squarespace-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Squarespace · Design System

> Quiet typography, bold imagery, business-ready tools

**Theme:** dark · **Industry:** saas · **Source:** https://www.squarespace.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Squarespace pairs a predominantly black canvas and restrained typography with immersive website imagery. The homepage alternates a cinematic dark introduction and conversion sections with a bright product feature band, then returns to dark editorial content and a dense footer.

## North star

Let restrained white-on-black typography frame rich, full-bleed website imagery, using bright sections only as purposeful product-focused contrast.

## Overview

The visual identity is built around a black canvas (#000000), with white (#ffffff) carrying headings, navigation, links, and primary calls to action. A broad white band introduces business features and product cards, creating a deliberate tonal reset rather than a uniformly dark page. The opening viewport layers a centered, lightweight headline and compact CTA over dramatic floral photography and overlapping website previews; imagery supplies the page’s warm color, not a separate brand accent. Clarkson sans-serif handles nearly all text, using light display weights and tight tracking for large headings, while uppercase navigation and button labels are firmer. Clarkson Serif appears sparingly in a small heading role. Content shifts between centered hero and domain-search sections, wide carousels, multi-column feature layouts, and left-aligned FAQ rows. Generous blank intervals around product showcases balance the compact body copy and dense footer. Hairline dividers and flat surfaces keep the interface crisp; layered media and dark gradients create depth without relying on shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary text, headings, links, and CTA surfaces; also defines the prominent business-feature band. |
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and dark section background; supports white text and fades media into the surrounding page. |
| Divider Charcoal | `#404040` | `--color-divider-charcoal` | neutral | Thin footer and content dividers; keep borders understated against the black canvas. |
| Muted Grey | `#898989` | `--color-muted-grey` | semantic | Muted supporting copy, most visibly in footer text and secondary information. |
| Slate Surface | `#2f2f2f` | `--color-slate-surface` | surface | Dark surface for selected feature links and cards, differentiated subtly from the black canvas. |
| Soft Silver | `#dddddd` | `--color-soft-silver` | neutral | Minor light text and border detail; measured sparingly, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#2f2f2f` (Slate Surface) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#898989` (Muted Grey) · `--color-border` → `#404040` (Divider Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#2f2f2f` | 13.39:1 | AAA |
| `#898989` | `#000000` | 6:1 | AA |
| `#898989` | `#ffffff` | 3.5:1 | AA-large |
| `#898989` | `#2f2f2f` | 3.83:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 85%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Clarkson | `--font-body` | webfont | 400, 500, 300 | Primary family for display, headings, body copy, navigation, links, and buttons. | Inter |
| Clarkson Serif | `--font-clarkson-serif` | webfont | 400, 300 | Sparse serif heading accent, measured for the h4 role. | Lora |

- **Clarkson:** Use light weights for large headings, regular for body, and medium for uppercase navigation and CTA labels; display tracking is tight.
- **Clarkson Serif:** Use sparingly for a refined contrast; measured at regular weight with subtly tight tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.369, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1.04 | -0.05em | — | Clarkson | Oversized, lightweight campaign statement in the hero. |
| h1 | 64px | 300 | 1.04 | -0.06em | — | Clarkson | Primary page or section headline where prominent. |
| h2 | 56px | 300 | 1.08 | -0.04em | — | Clarkson | Major centered section headings and conversion messages. |
| h3 | 40px | 400 | 1.08 | -0.04em | — | Clarkson | Feature and product-card titles. |
| h4 | 26px | 400 | 1.08 | -0.02em | — | Clarkson Serif | Occasional serif subheading for editorial contrast. |
| body | 15px | 400 | 1.4 | -0.001em | — | Clarkson | Supporting descriptions, explanatory copy, and footer content. |
| caption | 12px | 400 | 1.4 | 0 | — | Clarkson | Small helper notes, labels, and image-related details. |
| nav | 14px | 500 | 1 | 0 | uppercase | Clarkson | Uppercase site navigation labels. |
| link | 15px | 400 | 1.4 | -0.001em | — | Clarkson | Text links within feature areas and content. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 77, 120 px.
- Section rhythm 40px · element gap 12px · card padding — · max content width 660px.

Use a broad, full-bleed page canvas, with measured text content reaching a 660px maximum width where appropriate. Center the hero and domain-search content; align feature-card copy and FAQ content to the left. Product areas use wide carousels and measured 12- or 9-column arrangements, while the footer divides into four columns. Alternate dark and white section bands for rhythm, leaving generous breathing room around showcases. The measured density is compact within navigation and footer, but open around major media and section introductions.

## Shape & elevation

- Radius: button `9999px` · input `8px` · media `8px` · link `8px` · xs `4px` · sm `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The interface is largely flat, with no measured shadows. Use crisp section color changes, restrained #404040 hairlines, and image overlap to establish hierarchy. Dark gradients soften the edges of media and help it recede into the black canvas; card surfaces offer subtle contrast rather than strong elevation.

## Imagery

Photography and website mockups dominate the first impression: cinematic floral imagery sits behind the hero, while overlapping portfolio previews demonstrate real site designs. Later carousels and cards use product screenshots, artwork, and business scenes. A dark gallery and subtle gradients fade media into black sections. Treat image colors as content-specific, not as a recurring brand palette; preserve strong, immersive framing.

## Components

### Primary CTA

White surface with black uppercase Clarkson medium label; measured button corner radius is 4px. Use the arrow treatment where the label includes GET STARTED.

### Top navigation

Compact uppercase navigation with product, solutions, and resources links; position login and a white primary CTA alongside the brand mark.

### Hero showcase

Centered lightweight headline and CTA over immersive photography, with layered website previews entering from the lower edge.

### Feature carousel

Wide image-led business feature panels with left-aligned title and copy; navigation controls signal horizontally browsable content.

### Product cards

Dark or image-backed cards combine a concise tool title, brief explanatory copy, product imagery, and a directional link.

### Domain search

Centered heading, dark search input, and compact transfer-domain link on the black canvas.

### FAQ rows

Left-aligned accordion-style questions separated by thin dark-grey rules, with a plus control at the far edge.

### Footer directory

Four-column link directory on black, separated from the page by a hairline and finished with muted legal and utility details.

### Measured component styles

- **Primary button** (“GET STARTED →”): background #ffffff · text #000000 · radius 4px · padding 23px 28px · 500 14px Clarkson · uppercase
- **Link** (“Extensions Streamline shipping, inventor”): background #2f2f2f · text #ffffff · radius 8px · padding 24px · 400 16px sans-serif
- **Input**: background #333333 · text #ffffff · border 20px solid · radius 8px · padding 0px · 400 16px sans-serif
- **Navigation item** (“PRODUCTS SOLUTIONS RESOURCES”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px sans-serif

## Do

- Use #000000 as the default canvas and #ffffff for primary contrast.
- Set large headlines in lightweight Clarkson-style sans-serif with tight tracking.
- Keep the hero centered and let photography carry its dramatic color.
- Use the white section band as a deliberate product-story contrast.
- Build product showcases from real-looking website previews and image-led cards.
- Separate dense content with whitespace and restrained #404040 rules.

## Don't

- Do not introduce bright accent colors into the interface palette.
- Do not treat warm photography colors as brand UI colors.
- Do not add heavy shadows or decorative gradients to ordinary controls.
- Do not make every section a card or box.
- Do not use heavy, tightly packed typography for large headlines.
- Do not crowd the hero message with secondary copy or controls.

## Agent prompt

Build a new Squarespace-style page with a predominantly #000000 Canvas Black background and #ffffff Gallery White typography and primary CTA surfaces. Use #898989 Muted Grey only for supporting details, #404040 Divider Charcoal for restrained hairlines, and #2f2f2f Slate Surface for subtle card contrast; keep #dddddd Soft Silver minor. Set headings in a light, tightly tracked Clarkson-like sans-serif, with an occasional restrained serif accent. Lead with a centered, cinematic image-led hero and overlapping website previews. Alternate dark sections with a purposeful white product-feature band, using wide carousels, image-backed cards, and clear content breathing room. Keep navigation compact and uppercase, CTAs crisp, and FAQ rows left-aligned with fine dividers. Avoid heavy shadows, invented accent colors, or generic dashboard styling.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and CTA over full-bleed dark imagery; website previews overlap below. | Primary start-free CTA, Trial reassurance | Dark image backdrop, Centered display type, White CTA |
| 2 | gallery | Wide, horizontally browsable portfolio previews on the dark canvas. | Previous and next controls, Portfolio discovery | Image carousel, Dark framing |
| 3 | stats | Centered social-proof statement and prominent business metrics on black. | Entrepreneur credibility, Animated-style counters | Large numeric figures, Minimal dark section |
| 4 | feature-grid | Centered heading and short supporting line on a full-width white band. | Section introduction | White background, Centered typography |
| 5 | product-showcase | Multi-column, image-led feature panels with left-aligned copy. | Browse business use cases, Carousel navigation | Large feature imagery, Short descriptions, Directional controls |
| 6 | feature-grid | Wide feature introduction followed by a varied grid of product cards. | Explore integrated tools, AI guidance discovery | Image-backed cards, Dark card surfaces, Mixed media |
| 7 | feature-split | Open, spacious media area that transitions from product content to the following dark section. | Explore AI-assisted setup, Template discovery | Large media region, Soft tonal fade |
| 8 | contact | Centered domain headline, search form, and transfer link on black. | Search domain availability, Transfer an existing domain | Dark input, Compact helper link, Centered form |
| 9 | logo-cloud | Small centered strip of customer portraits with ample dark space. | Social proof | Portrait thumbnails, Dark background |
| 10 | testimonials | Centered trust statement above a full-bleed, dark website gallery. | Worldwide credibility, Browse customer sites | Immersive gallery, Black fades, Centered heading |
| 11 | faq | Left-aligned accordion rows on black, divided by fine horizontal rules. | Expand answers, Scan grouped questions | Plus controls, Hairline dividers |
| 12 | cta | Two-column support and conversion content with a centered CTA in a dark media area. | Contact support, Start free trial | Prominent white button, Dark background, Atmospheric media |
| 13 | footer | Four-column link directory above a compact legal and utility strip. | Browse site categories, Language and legal links | Muted text, Thin divider, Dense link columns |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/squarespace-com