Gymshark Design System

Gymshark's marketing site does what fitness DTC brands typically only attempt in print: it scales display typography to billboard sizes inside a browser viewport. The CSS exposes `--hero-title-font-size-h1: 18rem` — a 180px Montserrat hero at weight 700 uppercase, sitting against a full-bleed photograph of an athlete mid-lift. The rest of the chrome retreats: Roboto at 14px for every running paragraph, a black ink color used 2365 times across text and border, and a white canvas that lets the photography carry the brand voice. Where Lululemon paints soft gradient overlays on its hero imagery and where Alo Yoga uses a perfectly rectangular black CTA, Gymshark commits to a fully-rounded pill — `--rounded-corners-button: 5rem` renders every primary CTA as a 40-50px capsule — and lets the display typography do the dramatic work the chrome would otherwise carry.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from the 40 distinct values the page renders — almost all of them either pure black ink (the dominant text and border at 2365 occurrences), pure white canvas, or a six-step grey scale wired through `--particles-color-grey-{50,100,200,300,500,600,700,800,900,950}`, plus one sale-red #bf2e35 used for discount prices and validation errors. 12 typography tokens running Montserrat at the display tier (180px / 128px / 96px / 80px / 64px / 32px headlines), Roboto at the body tier (14px workhorse running text), with Bebas Neue and Druk Condensed Super declared as condensed promotional voices for sale-band callouts. 6 corner-radius tokens spanning a binary scale: 2-8px for cards and 50px for pill CTAs and category chips, with 50% for circular brand-dot icons. 17 component definitions covering the pill CTA, the pill search input, hero photography panels, the 4-up athlete product grid, sale-price strips, and the persistent free-shipping promo banner.

Feed this file to Claude or Cursor and it will reproduce Gymshark's specific moves: full-bleed athlete photography per band, billboard-scale Montserrat displays, monochrome chrome with one sale-red voltage, pill CTAs over photography, and the discipline of keeping every color choice inside a `--particles-*` token family. Treat it as a reference rather than a clone target. The one move worth borrowing only if your category is athletic or fashion is the billboard-display rule — 180px headlines need photography behind them strong enough to anchor the type, otherwise the size reads as gratuitous. For most SaaS, holding display at 56-72px is safer; for performance apparel, this is the move.