---
version: alpha
name: "Soho House"
description: "Heritage members-club design system: Cardo serif headlines over cinematic dark photography, warm cream accents, and a restrained two-typeface system that reads like a printed house journal."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f0eeeb"           # warm parchment — primary UI surface, nav bar
  surface-dark: "#0d0d0d"      # near-black hero overlay and dark sections

  # Text / ink
  ink: "#121212"               # primary text — slightly softened from pure black
  on-background: "#121212"
  on-surface: "#121212"
  ink-light: "#ffffff"         # text on dark hero surfaces

  # Brand accent
  primary: "#f0eeeb"           # warm cream — primary button background
  on-primary: "#121212"        # button label on cream

  # Interaction states
  primary-hover: "#e0ddd9"     # slightly deeper cream on button hover /* estimated */
  focus-ring: "#121212"

  # Borders
  border: "#121212"            # solid dark border on buttons
  border-muted: "#8d8d8d"      # mid-grey dividers and secondary strokes /* estimated */

  # Shadow tints
  shadow-soft: "#000000"

  # Semantic
  success: "#2d6a4f"           # /* estimated */
  warning: "#d97706"           # /* estimated */
  error: "#b91c1c"             # /* estimated */

typography:
  display-hero:
    fontFamily: "Cardo, Georgia, 'Times New Roman', serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.5px
  display:
    fontFamily: "Cardo, Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Cardo, Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "HK Grotesk, 'DM Sans', Inter, ui-sans-serif, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "HK Grotesk, 'DM Sans', Inter, ui-sans-serif, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0px
  body:
    fontFamily: "HK Grotesk, 'DM Sans', Inter, ui-sans-serif, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "HK Grotesk, 'DM Sans', Inter, ui-sans-serif, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.13
    letterSpacing: 0px
  button-ui:
    fontFamily: "HK Grotesk, 'DM Sans', Inter, ui-sans-serif, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "HK Grotesk, 'DM Sans', Inter, ui-sans-serif, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  pill: 9999px   # buttons — 40px actual, treated as pill

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.shadow-soft}"
    textColor: "{colors.ink-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
---

# Soho House Design System

## Overview

Soho House's digital presence is a members' journal made interactive. The default canvas is white (`{colors.background}`) with a warm parchment tone (`{colors.surface}`) reserved for navigation bars, button surfaces, and UI chrome, but the brand's signature moment is the full-bleed cinematic hero: saturated moody photography cropped wide across the viewport with a Cardo serif headline floating centred over it. That contrast — warm, tactile paper surfaces against dark-room photography — is the defining visual tension of the entire system. Everything else exists to manage the transition between these two worlds.

The typeface contract is two-part and carefully hierarchical: Cardo, a classical-proportion serif, handles every editorial heading, hero line, and house name treatment. It brings the warmth of printed hotel stationery to a digital surface. HK Grotesk — a friendly, legible geometric grotesk — handles navigation, body copy, form labels, and button text. At no size does Cardo appear in UI contexts, and at no size does HK Grotesk appear in editorial headings. The button CTA "Apply for membership" in 14px bold HK Grotesk sits on the warm cream (`{colors.primary}`), and this pairing — a tactile surface with a modern grotesk label — is the functional heart of the system.

Motion is conspicuously restrained. A single custom cubic-bezier easing (`0.3, 0.9, 0.4, 0.98`) governs transitions at 350ms — unhurried enough to feel considered without being precious. There are no decorative animations and no scroll-triggered reveals; the photography and editorial content do the atmospheric work. Shape language is binary: most UI surfaces and content areas are sharp-edged (`{rounded.none}`), while the single pill radius (`{rounded.pill}`) is reserved for call-to-action buttons, maintaining a clear signal hierarchy.

**Key Characteristics:**
- White canvas with warm cream surface (`{colors.surface}`) for navigation chrome and UI elements
- Full-bleed dark photography heroes — cinematic, unhurried, club-atmosphere
- Cardo serif for all editorial and display headings; HK Grotesk for all transactional UI
- Pill-shaped buttons (`{rounded.pill}`) — the only rounded element in the system
- Warm cream (`{colors.primary}`) as the primary button background, a tactile paper-substitute
- Near-black (`{colors.ink}`) text — `#121212` rather than pure black, warmer on the eye
- Custom slow easing (`cubic-bezier(0.3, 0.9, 0.4, 0.98)` at 350ms) on interactive elements
- OpenType features active: `"kern"` and `"ss01"` — kerning plus a stylistic alternate set
- Six-tier responsive breakpoint system from 374px to 2120px for global member base
- No gradients, no drop shadows in UI chrome; depth comes entirely from photography

## Colors

### Primary Surfaces
- **White Canvas** (`{colors.background}`): The primary page background. Clean white used for content sections, article bodies, and the default reading surface.
- **Warm Cream** (`{colors.surface}`): The signature warm-white surface tone used for the navigation bar, button backgrounds, and UI chrome. Not quite `#f5f5f5`; it tilts slightly warm with a faint yellow undertone, recalling quality print paper.
- **Club Dark** (`{colors.surface-dark}`): Near-black used in dark hero sections, dark-mode panels, and the secondary button variant. Pulls directly from the photography palette.

### Text / Ink
- **Ink** (`{colors.ink}`): Primary text colour for all body copy, headings on light surfaces, and interactive labels. Slightly softened at `#121212` — the brand avoids pure black `#000000` for reading surfaces.
- **Ink Light** (`{colors.ink-light}`): White text used on dark hero photography and dark surface panels.

### Brand Accent
- **Warm Cream** (`{colors.primary}`): Soho House's primary CTA background. This is the same token as `{colors.surface}` — the button's tactile quality comes from the surface matching the navigation, reinforcing a sense of printed collateral. Applied exclusively to primary buttons.

### Interaction States
- **Button Hover** (`{colors.primary-hover}`): Slightly darker cream on button hover — a two-step deepening that confirms interactivity without breaking the warm tone.
- **Focus Ring** (`{colors.focus-ring}`): Hard dark focus outline, matching `{colors.ink}`, for keyboard navigation accessibility.

### Borders
- **Dark Border** (`{colors.border}`): `#121212` used on button outlines (an inset `box-shadow`) and dark-mode UI strokes.
- **Muted Border** (`{colors.border-muted}`): `#8d8d8d` mid-grey for secondary dividers and low-priority lines.

## Typography

### Font Family
- **Display / Editorial**: `Cardo`, with fallbacks `Georgia, 'Times New Roman', serif`. A classically-proportioned Roman serif with generous counters and elegant stroke contrast. Carries Soho House's heritage, print-culture positioning.
- **Primary UI / Body**: `HK Grotesk`, with fallbacks `'DM Sans', Inter, ui-sans-serif, sans-serif`. A rounded geometric grotesk that balances warmth and legibility across all interactive surfaces.
- **OpenType Features**: Both faces ship with `"kern"` enabled (optical kerning) and `"ss01" 0` (stylistic set 1 declared, currently deactivated) — the kernig shows in tight headline tracking.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero overlay headlines — large Cardo at 56px over full-bleed photography |
| `display` | Section-opening editorial headers — 48px Cardo for content leads |
| `heading-section` | Major section titles within page content — 36px Cardo |
| `heading-sub` | Sub-section titles in HK Grotesk — 24px weight 500 |
| `body-large` | Intro paragraphs and pull quotes — 18px HK Grotesk |
| `body` | Default reading copy — 16px HK Grotesk at 1.5 line-height |
| `nav-link` | Top navigation links — 16px HK Grotesk weight 500, line-height 1.13 |
| `button-ui` | All button labels — 14px HK Grotesk weight 700 |
| `caption` | Metadata, dates, and micro-labels — 14px HK Grotesk weight 400 |

### Principles
- **Two-typeface contract**: Cardo for every editorial heading; HK Grotesk for all UI. No mixing at a given role.
- **Serif restraint**: Cardo is never used at body-copy sizes — it exclusively serves display and heading positions where its stroke contrast reads at scale.
- **Weight discipline**: The design system uses three weights — 400 (Cardo and HK Grotesk regular), 500 (HK Grotesk medium for nav and sub-heads), 700 (HK Grotesk bold for button labels only). No 600, no 800.
- **Sentence case throughout**: Navigation, buttons, and labels all read as natural language. No uppercase transforms in the system.
- **OpenType kerning always on**: `"kern"` is actively declared, contributing to the polished headline setting at display sizes.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Soho House uses a generous spacing rhythm that reflects the hospitality context — pages breathe. Content sections receive substantial vertical padding; imagery is never crowded. The 8px base resolves into a predictable scale with four expansion steps (`{spacing.xl}` through `{spacing.4xl}`) that match editorial content block transitions.

### Grid & Container
- Max content width: 1600px (2120px for large-display breakpoint support)
- Six responsive breakpoints: 374px · 517px · 768px · 1024px · 1600px · 2120px
- Hero: full-bleed edge-to-edge photography with centred overlay text stack
- Content sections: typically constrained to 960–1200px with centred margin auto
- Footer: multi-column grid on desktop, stacking to single-column on mobile

### Whitespace Philosophy
- **Editorial breathing**: Major section transitions use 64–96px vertical gaps — content areas feel like separate pages in a hotel magazine, not stacked web sections.
- **Photography priority**: Image areas are never padded internally; photography is always edge-to-edge or flush within a defined container, never inset with interior margins.
- **Navigation compactness**: Nav links at `{spacing.lg}` horizontal gap keep the menu bar dense and hotel-reception legible — efficient but not cramped.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default state for all content surfaces and card containers |
| Button Border (Level 1) | `box-shadow: 0 0 1px solid #000000` | Subtle button border on the cream CTA variant |
| Dark Button Border (Level 2) | `border: 1px solid #121212` | Outline emphasis on secondary buttons on light backgrounds |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard navigation — hard dark ring matching ink |

**Shadow Philosophy**: Soho House does not use box shadows for elevation or depth within the UI. The site's sense of depth comes entirely from the photography — dramatic moody images against flat white or cream surfaces create all the visual weight. UI chrome is intentionally flat, foregrounding content over container. The only "shadow" values recorded by dembrandt are thin border strokes on button elements, confirming this is a shadow-free system.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses a binary approach:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All content containers, cards, inputs, nav bars — the system default |
| `pill` | 9999px | CTAs and action buttons exclusively — the only rounded element |

Soho House's shape language is deliberately binary. The default state of every surface — content areas, editorial cards, image containers, form fields — is sharp-cornered. The sole exception is the primary button, which uses a full pill (40px actual radius, approximated as `{rounded.pill}`). This contrast between a perfectly circular button and flat-edged content containers makes CTAs unmistakable at a glance, functioning as visual stamps within the editorial flow.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Warm cream (`{colors.primary}`) background with near-black (`{colors.on-primary}`) label. 14px HK Grotesk weight 700. Pill radius (`{rounded.pill}`). The "Apply for membership" CTA. Tactile and editorial, like a printed membership card in pill form.
- **`button-secondary`** — Near-black (`{colors.surface-dark}`) background with white label. Same geometry as primary. Used on dark hero sections where the cream button would lose contrast.
- **`button-primary-hover`** — Cream deepens to `{colors.primary-hover}` on hover, maintaining the tonal warmth while confirming interactivity.

### Cards

Content cards are sharp-edged (`{rounded.none}`) with warm cream surface (`{colors.surface}`) or white background, no drop shadows, and generous internal padding (`{spacing.2xl}` or 24px). Photography leads every card format — images are full-bleed at card top, with text below.

### Inputs

Form fields inherit the flat-surface language: `{rounded.none}` corners, minimal border, white background matching the canvas. Focus state promotes the border to a solid `{colors.focus-ring}` line — no glow effect. Input heights accommodate comfortable touch targets.

### Navigation

The top navigation bar sits on `{colors.background}` with standard-weight HK Grotesk links at `{typography.nav-link}`. Brand mark "Soho House" appears in Cardo at the centre or left anchor. Member actions (Sign In · Membership) sit right-aligned. Dropdown panels expand on hover with flat white backgrounds. On mobile, navigation collapses to a hamburger drawer.

### Badges / Tags

Membership and property labels use pill badge style (`{components.badge}`) on warm cream backgrounds with dark ink labels, consistent with the button palette.

## Do's and Don'ts

### Do
- Use Cardo exclusively for editorial headings (`{typography.display-hero}`, `{typography.display}`, `{typography.heading-section}`) — it carries the brand's heritage positioning
- Set button shape to `{rounded.pill}` only — the pill CTA is the sole rounded element in the system
- Use warm cream (`{colors.primary}`) as the primary button background — it's the brand's tactile signature
- Keep primary text at `{colors.ink}` (`#121212`) — never pure `#000000` for extended reading
- Allow full-bleed photography to carry the atmospheric weight — UI chrome should not compete
- Maintain the two-typeface rule: Cardo for display, HK Grotesk for all transactional/body/UI
- Preserve generous vertical spacing between sections — pages read as curated chapters, not stacked modules
- Apply `"kern"` OpenType feature on headline type — optical kerning at Cardo's display sizes is visible and intentional
- Use HK Grotesk weight 700 only for button labels — no other element in the system gets bold

### Don't
- Don't introduce mid-range border radius (4–16px) — the system is binary: `{rounded.none}` for content, `{rounded.pill}` for CTAs only
- Don't use Cardo for body copy or UI labels — its stroke contrast renders illegibly small below 24px
- Don't add box shadows or elevation layers to content cards — depth comes from photography, not UI chrome
- Don't use pure black (`#000000`) for body text on white — `{colors.ink}` (`#121212`) is the correct reading ink
- Don't introduce gradients on surfaces — the system is solid tones and photography, never blended
- Don't break the weight system — three weights only: 400, 500 (nav/sub-head), 700 (buttons)
- Don't apply the pill CTA shape to tags, inputs, or card containers — it belongs to action buttons exclusively
- Don't set display type below 36px in Cardo — the serif only performs above heading scale
- Don't uppercase navigation or button labels — sentence case is the system standard throughout

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <374px | Single-column, minimum viable layout |
| Mobile | 374–517px | Default mobile: single-column, hamburger nav, stacked hero |
| Tablet Small | 517–768px | Two-column content grids begin, nav still compact |
| Tablet | 768–1024px | Multi-column layouts, full nav starting to expand |
| Desktop | 1024–1600px | Full horizontal navigation, multi-column editorial grids |
| Large Desktop | >1600px | Maximum editorial width (2120px cap), hero photography at full scale |

### Touch Targets
- Primary buttons: pill shape with `12px 24px` padding provides comfortable thumb-tap height (~44px effective)
- Navigation links: `16px` body at `1.13` line-height with generous horizontal padding for tap precision
- Card tappable areas: full card surface registers the tap event — not just the text label
- Membership CTAs always meet 44px minimum height on mobile viewports

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger icon on tablet and below; drawer opens with a full-width overlay panel
- **Hero**: Full-bleed photography maintains cinematic proportion — text overlay centres vertically, scales to smaller type at mobile
- **Content grids**: Multi-column editorial and property grids collapse from 3–4 columns to 2-up at tablet, single-column at mobile
- **Spacing**: Section vertical gaps reduce from `{spacing.4xl}` (96px) on desktop to `{spacing.2xl}` (48px) on mobile — hospitality breathing room scales down but never disappears

### Image Behavior
- Hero photography is always full-bleed edge-to-edge; `object-fit: cover` with a stable aspect ratio
- Property and editorial images use defined aspect ratios (16:9 for wide-format, 4:3 for grid cells)
- Photography never carries `border-radius` — always sharp-edged, reinforcing the `{rounded.none}` default
- On retina displays, high-resolution image variants load via responsive `srcset`

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — white
- Text: `{colors.ink}` — `#121212`
- Primary button: `{colors.primary}` bg, `{colors.on-primary}` label
- Surface / nav bar: `{colors.surface}` — warm cream `#f0eeeb`
- Dark hero surfaces: `{colors.surface-dark}`
- Border: `{colors.border}`
- CTA shape: `{rounded.pill}`

### Example Component Prompts

- "Create a hero section: full-bleed dark photography as background, centred text overlay with a `{typography.display-hero}` Cardo serif headline ('A home for the world's creatives to come together and belong'), body text in 18px HK Grotesk `{colors.ink-light}` white, and a primary pill button — `{colors.primary}` (`#f0eeeb`) background, `{colors.on-primary}` (`#121212`) text, 14px HK Grotesk bold, `{rounded.pill}` radius, `12px 24px` padding."
- "Design a membership card tile: `{colors.surface}` (`#f0eeeb`) background, sharp edges (`{rounded.none}`), no shadow. Section header in `{typography.heading-section}` Cardo 36px, description in `{typography.body}` HK Grotesk 16px `{colors.ink}`, and a CTA using `{components.button-primary}`."
- "Create a primary pill CTA button: `{colors.primary}` background `#f0eeeb`, `{colors.on-primary}` label `#121212`, 14px HK Grotesk weight 700, `{rounded.pill}` (40px actual radius), `12px 24px` padding. Hover state deepens background to `{colors.primary-hover}`."
- "Build a top navigation bar: `{colors.background}` surface, Soho House wordmark in Cardo (leftmost), horizontal HK Grotesk nav links at 16px weight 500 `{colors.ink}`, right-side 'Sign In' and 'Membership' actions. Membership renders as `{components.button-primary}`. No box shadows, flat."
- "Design an editorial content section: white (`{colors.background}`) ground, `{typography.display}` Cardo 48px section heading, `{typography.body-large}` HK Grotesk 18px intro paragraph at 1.22 line-height, `96px` vertical padding above and below the block to maintain the hospitality breathing rhythm."
- "Create a property listing card: full-bleed image at top (`{rounded.none}` corners, no border-radius), `{colors.surface}` interior, `{typography.heading-sub}` HK Grotesk 24px weight 500 property name, `{typography.caption}` 14px metadata, and a `{components.button-primary}` CTA at the bottom."

### Iteration Guide

1. Start with the canvas: `{colors.background}` white for content, `{colors.surface}` warm cream for nav/chrome — these two surfaces carry the system's tactile identity.
2. Set display headings in Cardo (`{typography.display-hero}` to `{typography.heading-section}`) and switch to HK Grotesk (`{typography.body-large}` through `{typography.caption}`) for all UI and body.
3. Buttons are pills only: `{rounded.pill}`, `{colors.primary}` cream background, `{colors.on-primary}` label — never round other elements.
4. Use full-bleed photography for hero and feature moments; let images create depth — do not add box shadows or elevation to UI chrome.
5. Keep the weight system to three values: 400 for Cardo and HK body, 500 for HK nav/sub-heads, 700 for HK buttons only.
6. Apply `{spacing.3xl}` (64px) to `{spacing.4xl}` (96px) vertical section gaps — hospitality pace requires generous breathing room.
7. Keep all shape edges at `{rounded.none}` except buttons — binary contrast is the system's visual rule.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Soho House. Brand names and trademarks belong to their respective owners.