---
version: alpha
name: "Soho House"
website: "https://www.sohohouse.com"
description: >-
  A members' club network whose marketing site is architecture for the aspirational gaze — full-bleed photography of candlelit bars, lush courtyards, and pool terraces occupies the entire above-fold canvas, while Cardo (a classical serif with ink-weight hairlines) carries display headlines at 56px in weight 400 over pure black. HK Grotesk handles every functional surface — nav links, body copy, pill CTA labels — in a restrained sans so the serif owns every editorial moment. No brand color exists; the system runs on ink black, pure white, and two warm parchment tones (#f0eeeb and #ebe3db), making the photography itself the chromatic voice of the brand.

seo:
  title: "Soho House Design System for React — ink black, Cardo serif, 16 components"
  metaDescription: "Soho House's marketing system as a DESIGN.md file. Ink black on warm parchment, Cardo serif display at 56px, HK Grotesk sans for navigation, zero brand color. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Photography as sole brand color — the page declares no chromatic brand token; editorial images carry every warm and saturated moment the text never does"
    - "Cardo at weight 400 for display — the 56px serif hero headline and 48px h2 both run at weight 400, trusting letterform structure over weight for authority"
    - "Dual typeface split — Cardo for editorial identity, HK Grotesk for functional chrome; the two families share a page without competing because they operate in non-overlapping size bands"
    - "Pill-pill radius at 40px — the membership CTA uses a fully-rounded pill on a 40px-height element, the only rounding in the system; every other surface is sharp-cornered at 0px"
    - "Warm parchment as the only surface tone — two off-white values (#f0eeeb and #ebe3db) appear on membership CTA fills and section backgrounds; neither is pure white"
  tags:
    - "Travel & Hospitality"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Soho House's marketing site is built on a fundamental substitution: it puts photography where other membership brands would put brand color. The above-fold hero is a full-bleed photograph — candlelit interiors, a mosaic pool, a terrace at dusk — with a Cardo serif headline in black dropped over a light overlay. There is no voltage orange, no cobalt accent, no brand-coded blue link. The only chromatic moves on the page come from the photography grid below the fold, where seven room and venue photographs sit edge-to-edge without borders or captions competing for attention. Where Equinox uses a heavy black-plus-gold system and WeWork uses a coral-accent UI, Soho House removes color from the brand chrome entirely and lets the spaces speak.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 12 color tokens — ink black, pure white, two warm parchment tones (#f0eeeb and #ebe3db), and graduated ink shades for structural use; 11 typography tokens spanning Cardo at 56px and 48px for editorial display, and HK Grotesk from 14px to 18px for body and functional chrome; a single radius tier (40px pill for the CTA button, 0px everywhere else); 8 spacing tokens on a 8px base unit; and 16 component definitions covering the full-bleed hero module, the photography grid, the editorial section layout, the pill membership CTA, and the footer.

    Feed this file to an AI coding tool and it will reproduce Soho House's specific restraint: no accent colors to reach for, Cardo only for h1 and h2, HK Grotesk for everything a user might click, warm parchment surfaces instead of pure white, and photography-first composition where the image block carries the emotional weight that a gradient or brand color would carry on a conventional SaaS or hospitality site. The system is worth studying precisely because it achieves brand recognition through what it omits rather than what it asserts.
  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.sohohouse.com"
      title: "Soho House — official site"
      description: "Soho House's public marketing site — the source of truth for the live tokens captured in this file."
    - 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 Soho House's primary brand color?"
      answer: "Soho House has no chromatic brand accent. The extracted marketing surface exposes five color tokens: ink black (#000000) at 623 occurrences (322 as text, 296 as border), pure white (#ffffff) at 160 occurrences, a near-black #121212 at 7 occurrences on button text, a warm parchment #f0eeeb at 2 occurrences on the CTA button fill, and a slightly warmer parchment #ebe3db at 4 occurrences on section backgrounds. No CSS custom properties declare a brand voltage. The brand's chromatic voice comes entirely from the photography — the marketing system's job is to stay out of the way."
    - id: "typography"
      title: "What typefaces does Soho House use, and what should I use as a substitute?"
      answer: "Soho House runs two typefaces: Cardo for display and editorial headings, and HK Grotesk for all functional surfaces including nav, body copy, buttons, and metadata. Cardo is an open-source classical serif available on Google Fonts; it runs at weight 400 across every display tier — 56px for h1 and 48px for h2 — trusting letterform structure rather than weight for hierarchy. HK Grotesk is a commercial humanist sans-serif by Hanken Design Co. For Cardo substitutes: Cormorant Garamond or EB Garamond transfer cleanly at these sizes. For HK Grotesk: Inter or DM Sans are the closest open-source alternatives."
    - id: "radius-philosophy"
      title: "What corner radius does Soho House use?"
      answer: "Soho House runs a binary radius system: 40px pill on the primary membership CTA button (height 40px, making it fully circular in the vertical dimension), 20px on secondary pill elements, and 0px on every other surface — cards, section containers, image tiles, footer cells, and form inputs are all sharp-edged. The system does not use a graduated radius ladder. The pill is reserved specifically for action elements (the 'Apply for membership' and 'Find out more' CTAs); all content surfaces are rectilinear."
    - id: "serif-display-choice"
      title: "Why does Soho House use a serif typeface for display when most hospitality brands use a san-serif?"
      answer: "Cardo at 56px / weight 400 signals heritage and editorial authority without heavy weight — the thin-stroke serifs at 56px read as print-quality typography, the kind you'd find in a house magazine or a Condé Nast travel feature, rather than in a SaaS hero. Most contemporary hospitality apps (Airbnb, Booking.com, Marriott) run sans-serif display to project modernity and speed. Soho House inverts the convention: the serif locates the brand in a tradition of private dining rooms and cultural institutions, not in the app economy. The restrained weight 400 prevents the serif from reading as fusty — it reads as assured."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury hospitality marketing site in React?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Soho House's specific moves: full-bleed photography as the primary chromatic event, Cardo only for h1 and h2, HK Grotesk for all functional chrome, warm parchment surface tones instead of pure white, a 40px pill CTA on a sharp-edged page, and ink black as the sole structural border and text color. The component token references resolve without invention. One note: the photography-first approach requires genuinely high-quality editorial images to carry the brand weight — the design system works as a frame, but the images are the content."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000000"
  ink-mid: "#121212"
  ink-soft: "#313131"
  canvas: "#ffffff"
  parchment: "#f0eeeb"
  parchment-warm: "#ebe3db"
  hairline: "#000000"

typography:
  display-xl:
    fontFamily: "Cardo, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 70px
    letterSpacing: 0
  display-lg:
    fontFamily: "Cardo, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-md:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  body-md-medium:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  label-md:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  label-bold:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  button-md:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 18.72px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  caption:
    fontFamily: "\"HK Grotesk\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0

rounded:
  none: "0px"
  md: "15px"
  lg: "20px"
  pill: "40px"

spacing:
  xs: "2px"
  sm: "6px"
  md: "8px"
  base: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "92px"

components:
  button-primary:
    backgroundColor: "{colors.parchment}"
    textColor: "{colors.ink-mid}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px 24px"
    height: "40px"
    border: "0"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px 24px"
    height: "40px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "64px"
    borderColor: "{colors.ink}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "92px 24px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  photo-tile:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "0"
  section-parchment:
    backgroundColor: "{colors.parchment-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "92px 24px"
  membership-cta-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    padding: "92px 24px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.ink}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    padding: "24px 24px"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    padding: "2px 0px"
---

## Overview

Soho House's marketing site treats photography as the brand's chromatic voice. **Absent color as identity**: there is no declared brand voltage, no accent hex, no color-coded CTA. The extracted palette runs to five structural tones — ink black, a near-black, pure white, and two warm parchments — and that is the entire system. Where Equinox commands the page with heavy black and a gold accent, and where Four Seasons uses a muted teal-gold system, Soho House makes the deliberate move of keeping all color in the photographs. The brand chrome — navigation, headline type, button labels, hairlines — stays ink-on-white. The membership page at full scroll is a series of framed photographs with restrained black text beneath them.

**Serif-sans split as editorial signal**: Cardo carries every h1 and h2 at weight 400, at 56px and 48px respectively. The thin-stroke classical serif at large sizes reads as print-quality editorial — a house magazine, not a booking app. HK Grotesk covers every functional surface below h2: nav links, body copy at 14-18px, button labels, metadata captions. The two families operate in non-overlapping size bands; there is no blurred boundary where you might choose one or the other.

**Key Characteristics:**
- Zero brand color — the marketing chrome declares no chromatic accent; all saturated color on the page arrives through photography.
- Cardo at weight 400 for display: 56px h1 and 48px h2, trusting letterform structure over weight hierarchy.
- HK Grotesk for all functional surfaces — 14-18px, weight 400-700, across nav, body, and button labels.
- Pill CTA at 40px radius on 40px height, fully-rounded; 0px radius on every content surface.
- Warm parchment (#f0eeeb and #ebe3db) for button fills and warm section backgrounds — neither is pure white.
- Full-bleed photography hero with headline text in ink black dropped over a light image overlay.
- 92px vertical rhythm between major page sections — generous breathing room between editorial bands.
- Ink black (#000000) carries 622 of the 623 border and text occurrences: the sole structural mark-making color.

## Colors

### Ink

- **Ink** (`#000000`): frequency 623. Used as text (322), border (296), background (5). The dominant structural tone — every hairline rule, nav link, heading, and form border in the system. Not tempered by a slight blue undertone the way Linear or Vercel use near-black; this is pure black on a white page.
- **Ink Mid** (`#121212`): frequency 7. Used as text (2), border (5). A near-black that appears on the membership CTA button text and a small set of borders — close enough to pure black to read as a single family but distinct enough the extractor separated them.
- **Ink Soft** (`#313131`): a structural dark used sparingly in sub-section text — referenced for body-copy contexts where pure black would feel too heavy at small sizes.

### Surface

- **Canvas** (`#ffffff`): frequency 160. Used as text (80, over dark surfaces), border (77, as light hairlines over the dark hero), background (3). The default page floor — nav surface, between-section white, footer contrast pair.
- **Parchment** (`#f0eeeb`): frequency 2, as background fill. The button background for the primary membership CTA. Warmer than white, cooler than the warm parchment — the least saturated possible surface still distinguishable from pure white.
- **Parchment Warm** (`#ebe3db`): frequency 4, all as background. The warm-section page band — used behind the "Membership unlocks the world" editorial section. Has a faint biscuit quality; the warmth signals shelter and invitation without color.

### Hairlines

- **Hairline** (`#000000`): the ink family serves dual duty as both text and border — 296 of the 623 ink occurrences are border uses. There is no dedicated mid-gray hairline; the system uses 1px pure-black rules throughout.

## Typography

### Font Families

The system runs two families: **Cardo** for editorial display and **HK Grotesk** for functional chrome. Cardo is an open-source classical serif (Google Fonts); HK Grotesk is a commercial humanist sans-serif by Hanken Design Co. The pairing signals a distinct intent — Cardo establishes the house-magazine editorial register, HK Grotesk handles the membership-app register. They do not share size ranges.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Cardo | 56px | 400 | 70px | Hero h1 ("Membership unlocks the world of Soho House") |
| `{typography.display-lg}` | Cardo | 48px | 400 | 60px | Section h2 ("Stay at Soho House during football's biggest tournament") |
| `{typography.body-lg}` | HK Grotesk | 18px | 400 | 26px | Lead-paragraph body copy and membership benefit descriptions |
| `{typography.body-md-medium}` | HK Grotesk | 16px | 500 | 24px | Paragraph body and cookie-bar text |
| `{typography.body-md}` | HK Grotesk | 16px | 400 | 18px | Tighter body variant used inside narrow editorial columns |
| `{typography.label-md}` | HK Grotesk | 14px | 400 | 18px | Default label for nav, footer links, metadata |
| `{typography.label-bold}` | HK Grotesk | 14px | 700 | 18px | Button labels and h3 secondary-level call-to-action text |
| `{typography.nav-link}` | HK Grotesk | 16px | 500 | 24px | Top-nav link labels |
| `{typography.button-md}` | HK Grotesk | 14px | 700 | 18px | Membership CTA pill label ("Apply for membership") |
| `{typography.heading-sm}` | HK Grotesk | 18.72px | 700 | 24px | h3-level card headings in the feature grid |
| `{typography.caption}` | HK Grotesk | 14px | 400 | 18px | Footer metadata, sub-labels |

### Principles

Display weight stays at 400. The Cardo h1 at 56px / 400 is the loudest typographic moment — the thin strokes of the classical serif at that scale carry authority without force. HK Grotesk's weight ceiling for functional text is 700, reserved for button labels and small call-to-action anchors; body copy stays at 400-500.

### Note on Font Substitutes

Cardo is available free on Google Fonts. For a closer editorial-serif alternative: **Cormorant Garamond** or **EB Garamond** at the same weight 400 transfer the thin-stroke character, though Cardo has slightly shorter x-height. For HK Grotesk: **Inter** at 95% line-height or **DM Sans** are the closest open-source substitutes. Preserve weight 700 for button labels — dropping to 500 softens the CTA distinction from body copy.

## Layout

### Spacing System

- **Base unit:** 8px — the primary internal rhythm.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 6px · `{spacing.md}` 8px · `{spacing.base}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 92px.
- **Section padding (vertical):** 92px between major page bands — the hero, the editorial membership description, the photography grid, and the article section each sit 92px apart.
- **Horizontal padding:** 24px on the left nav rail; content sections use a centered column with generous horizontal margins.
- **Button padding:** 0×24px (zero vertical, 24px horizontal) on the pill CTA — height is controlled by a fixed 40px value, not by padding.

### Grid & Container

- **Max content width:** ~960px for text columns; the photography grid extends to the full 1440px viewport.
- **Hero:** full-bleed photography at 1440px, content (headline + CTA) centered over a mid-image position.
- **Photography grid:** 3-column asymmetric mosaic below the hero — a large editorial photograph on the left spanning two rows, three smaller photographs on the right at equal width.
- **Article section:** 2-column 50/50 split — text on left, a bracketed square photograph on the right.
- **Footer:** 5-column grid for link categories (Terms, Membership, Contact, etc.) with a newsletter subscribe form on the far right.

### Rhythm

The page alternates between full-bleed photography and constrained white editorial. The hero is edge-to-edge dark image. The membership description section sits on parchment-warm (#ebe3db) at 92px top/bottom. The photography grid returns to edge-to-edge. The article section returns to white. The 92px section padding is the pace-setter; the page never rushes.

## Elevation

The system has **no elevation layer**. There are no drop shadows, no box-shadow tokens, and no surface ladders. Depth on the page comes entirely from photographic depth — the images have natural spatial depth that no shadow token can replicate. Card surfaces sit flush with the page floor; the 1px ink hairline is the only structural signal of a container boundary. Where a SaaS system would layer surfaces with box-shadow increments, Soho House keeps everything flat and relies on the photographs to create the perception of space.

## Shapes

The radius system is **binary plus one transition value**:

- `{rounded.none}` 0px — the default. Every card, section container, image tile, nav, footer cell, text input, and editorial layout element is sharp-cornered. This is the overwhelming majority of the page.
- `{rounded.md}` 15px — a single mid-range radius that appears on secondary rounded elements (badge-style chips in the nav area).
- `{rounded.lg}` 20px — appears on some secondary pill elements and category labels.
- `{rounded.pill}` 40px — the primary membership CTA buttons ("Apply for membership", "Find out more"). On a 40px-height element this renders as fully-rounded. The pill is reserved exclusively for action elements.

The binary character — sharp everywhere except the action pill — makes every membership CTA immediately readable as the single soft-edged element on an otherwise architectural page.

## Components

**`button-primary`** — The membership CTA. Warm parchment `{colors.parchment}` fill, near-black `{colors.ink-mid}` text, weight 700 HK Grotesk label, `{rounded.pill}` 40px radius, 0×24px padding, 40px height. "Apply for membership" is the canonical instance. No border.

**`button-secondary`** — Transparent fill, ink text, 1px ink border, same pill radius. Used for "Find out more" style secondary calls to action that sit beneath editorial content sections.

**`top-nav`** — White `{colors.canvas}` surface, 64px height, 24px horizontal padding. Soho House wordmark flush left, navigation links (Membership, Houses, Bedrooms, Wellness, Shop, etc.) distributed center, Sign in + Membership pill CTA flush right. 1px ink bottom rule.

**`nav-link`** — Transparent, ink text at `{typography.nav-link}` (16px / 500), 8×12px padding. No hover surface visible in the captured marketing page.

**`hero-section`** — Full-bleed photography behind a constrained text+CTA stack. No background token: the image IS the surface. The heading and sub-copy overlay the photograph with natural contrast from the image's composition.

**`hero-heading`** — Ink text at `{typography.display-xl}` (Cardo, 56px / 400 / 70px line-height). The typographic heart of the system.

**`section-heading`** — Ink text at `{typography.display-lg}` (Cardo, 48px / 400 / 60px). Used for secondary editorial article sections below the main photography grid.

**`body-paragraph`** — Ink text at `{typography.body-lg}` (HK Grotesk, 18px / 400 / 26px). The editorial description of membership benefits beneath the hero section.

**`body-paragraph-muted`** — Ink text at `{typography.label-md}` (HK Grotesk, 14px / 400 / 18px). Sub-copy and secondary descriptive paragraphs beneath article sections.

**`card`** — White `{colors.canvas}` surface, 1px ink hairline border, 0px radius, 16px internal padding. The default content container in editorial sections.

**`photo-tile`** — Dark background behind photography in the mosaic grid, 0px radius, no padding (image fills edge-to-edge). Three sizes in the asymmetric 3-column grid.

**`section-parchment`** — Warm parchment `{colors.parchment-warm}` background band, 92px vertical padding. The above-fold membership-description section sits on this surface.

**`membership-cta-section`** — White canvas section with 92px vertical padding. Houses the "Membership unlocks the world of Soho House" headline plus the primary CTA pill.

**`text-input`** — White fill, ink text, 1px ink border, 0px radius, 12×16px padding, 44px height. The newsletter email field in the footer subscribe area.

**`footer`** — Ink black `{colors.ink}` fill, white text, 24px padding. Five-column link grid. The only dark surface outside the photography hero.

**`footer-link`** — White text at `{typography.label-md}`, transparent background, 2px top padding to create vertical separation between stacked link items.

## Do's and Don'ts

**Do** use full-bleed photography as the primary chromatic event above the fold. The system has no brand voltage to carry that role; a white or gradient hero with Cardo headlines but no photograph would read as a typographic exercise, not as the world of Soho House.

**Do** reserve Cardo exclusively for h1 and h2. The system's editorial register depends on Cardo appearing only where the brand is making a statement — once it descends to h3, body copy, or button labels, the editorial signal is gone.

**Do** use `{colors.parchment}` (#f0eeeb) for the primary button fill and `{colors.parchment-warm}` (#ebe3db) for warm section backgrounds. Substituting either with pure `#ffffff` removes the warmth signal that distinguishes the page from a generic white-canvas hospitality site.

**Do** keep the pill radius (`{rounded.pill}` — 40px) reserved for membership CTAs only. The contrast between the rounded button and the sharp-cornered page everywhere else is what makes the CTA readable as the sole action invitation.

**Don't** introduce a brand accent color to "identify" the system. The system is structured around the absence of a chromatic accent; adding one — a warm amber, a muted teal, a heritage burgundy — would immediately shift the brand register from members' club to hotel booking app. Use the photography for color.

**Don't** use Cardo at display sizes below 40px. At 48-56px the thin-stroke hairlines read as architectural; below 32px they read as fragile or fussy and lose authority. For sub-heading sizes, switch to `{typography.heading-sm}` (HK Grotesk, 18.72px / 700).

**Don't** apply border-radius to cards or content containers. Introducing a 4px or 8px radius on image tiles or editorial cards invites them into a softer, more app-like register (Airbnb, Booking.com) and away from the architectural sharpness that signals a physical place rather than a digital product.

**Don't** put body copy in Cardo. The two-family system only works when the families divide labor cleanly: Cardo speaks, HK Grotesk serves. Running editorial body paragraphs in a 16px serif dissolves the hierarchy that makes the display moments legible as moments.

## Known Gaps

- **Brand accent in authenticated surfaces:** the members-only dashboard and house-specific booking flows likely carry additional color tokens (e.g., house-specific tones per location) not captured on the public marketing page.
- **Dark mode:** the photography-led sections use both light and dark photography depending on the image; no explicit dark-mode palette is exposed in the extracted CSS.
- **Hover and focus states:** documented for button-primary and button-secondary shapes; focus rings, active press states, and disabled variants are not captured from the marketing surface.
- **Motion:** the hero photography module appears to include a crossfade carousel; no animation easing, timing, or transition tokens are captured in this spec.
- **Mobile breakpoints:** the extracted surface is 1440px desktop. The photography grid, nav, and section layout collapse at mobile breakpoints with different padding scales not represented here.
- **Product surfaces:** this DESIGN.md captures the public marketing site only. The Soho House app and the members-only booking portal carry their own functional component systems not reflected here.
- **Type size scale precision:** several HK Grotesk sizes (e.g., 18.72px) appear to be the browser's computed value from a fluid-type scale rather than a round design token; the rounded values used in this spec (18px, 19px) are the closest stable anchor.