Soho House Design System

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.