Squarespace
A website building platform with a premium, editorial brand built entirely on black (#000000) and white (#FFFFFF) with zero chromatic accent — a deliberate choice that signals restraint and typographic confidence. Squarespace's marketing uses luxury-brand art direction: full-bleed photography, generous whitespace, and display type set in their custom Graphik-based system at extreme weights and sizes. The product editor is a clean white surface for your content; the chrome is minimal dark. The system communicates: beautiful websites start here, and the tool itself won't get in your way by being beautiful too.
Color Tokens
version: alpha name: Squarespace description: "A website building platform with a premium, editorial brand built entirely on black (#000000) and white (#FFFFFF) with zero chromatic accent — a deliberate choice that signals restraint and typographic confidence. Squarespace's marketing uses luxury-brand art direction: full-bleed photography, generous whitespace, and display type set in their custom Graphik-based system at extreme weights and sizes. The product editor is a clean white surface for your content; the chrome is minimal dark. The system communicates: beautiful websites start here, and the tool itself won't get in your way by being beautiful too."
colors: primary: "#000000" on-primary: "#ffffff" primary-hover: "#1A1A1A" secondary: "#ffffff" on-secondary: "#000000" ink: "#000000" ink-muted: "#666666" canvas: "#ffffff" surface-1: "#F5F5F5" surface-2: "#EBEBEB" border: "#CCCCCC" editor-bg: "#1A1A1A" editor-panel: "#222222" editor-ink: "#FFFFFF" editor-muted: "#999999"
typography: display: fontFamily: "Graphik, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 64px fontWeight: 900 lineHeight: 0.95 letterSpacing: -0.04em body: fontFamily: "Graphik, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192]
radius: sm: 0px md: 0px lg: 4px pill: 9999px
shadows: card: "none" elevated: "0 4px 24px rgba(0,0,0,0.1)"
motion: duration-fast: 150ms duration-base: 300ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Squarespace is the only major product company that uses zero color in its own design language — black and white exclusively. This is a profound design statement: the platform's identity is defined by the quality of the websites built on it, not by the platform's own visual expression. The marketing site uses photography and typography as the sole visual elements. Display type is set at extreme weights (900) with very tight tracking (-0.04em) and sub-1.0 line-height — a premium editorial style that art directors recognize immediately as intentional and skilled.
2. Color System
The most restrained palette in any major product:
- Black: #000000 — text, primary buttons, active states, the brand itself
- White: #FFFFFF — canvas, reversed buttons, maximum contrast
- Grays: #666666 (muted) / #F5F5F5 / #EBEBEB (surfaces) / #CCCCCC (borders)
- No blue links, no green success, no orange warning — semantic color would break the purity
- Editor chrome uses dark (#1A1A1A) to separate itself from the website being built
3. Typography
Graphik (Commercial Type) — a clean, precise grotesque with a slightly clinical quality that reads as premium rather than cold. At extreme display weights (900) with tight tracking, it achieves a luxury-brand editorial feel. Zero border-radius on most elements is a companion design decision: Squarespace doesn't round things, it squares them.
4. Components & Patterns
- Website editor: Section-based content editor, click-to-edit inline, add-section button between sections
- Block overlay: Hover reveals block editing controls — clean, non-disruptive
- Section types: Stacked sections with full-width backgrounds (image/video/color/none)
- Template gallery: Large full-site previews, filterable by industry and style
- Navigation builder: Drag-to-reorder nav items, dropdown configuration
- Style editor: Global typography and color pickers — limited but intentional design constraints
5. Spacing & Layout
Marketing: massive section padding (96–192px vertical), full-bleed imagery, max-width 1600px. Product editor: full-viewport, minimal chrome (48px top bar, 300px right panel for settings). Template previews: 16:9 ratio cards, tight grid.
6. Motion & Interaction
Marketing: slow, smooth scroll reveals with subtle fade-up. Template gallery: smooth preview transitions. Editor: inline editing activates cleanly. The pacing is deliberately slower than tech-startup norms — luxury products don't rush.