A magazine-grade cycling storefront whose signature is a strict two-voice type system: a transitional SERIF (raphaSerifText, 784 uses) carries every piece of reading text while a CONDENSED grotesque carries every heading and button label in UPPERCASE at a constant +0.3px tracking with line-height equal to font size — 64/62 at the display, 32 and 24 beneath it. Ink is pure #000000 on white with #767676 and #555555 below, and the one brand accent, a hot Rapha pink #fa3c6e, stays rationed to small utility controls and sale flashes while the garments supply saturated colourway swatches that never touch the chrome. Everything is SQUARE: buttons, cards, inputs and the 84px size-selector cells all sit at 0px radius, structured by 1px black or #949494 borders with almost no elevation — the only real shadow is a soft grey product-card glow, rgb(199,197,199) 0 0 12px 2px. Unusually for a retail site it publishes a real focus system as :root tokens, a double ring at 3px width and 2px offset with a grey #888 outer and white #fff inner. Motion is quiet and considered: color 0.15s ease-in-out as the house transition, buttons cross-fading background, border and colour over 0.25s, an overshoot cubic-bezier(0.6,1.6,0.6,0.9), a 175s linear sale-ticker marquee, and a genuine reduced-motion block. There are zero CSS gradients, zero canvas and zero video — all atmosphere is full-bleed ride photography.
⚠ site only
Browse Rapha in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: rapha.cc/gb/en (live DOM, computed styles), 2026-07-27 (desktop 1512px). Coverage: homepage. OneTrust consent-widget rules (#onetrust-*,#ot-*,onetrust-fade-in, green #2c6415) excluded as third-party.#0000ee(52×) is default unstyled-link leakage, excluded. Product colourway swatches (#d5d717/#59bfdf/#db2b4d/#36c594/#e63888/#bfc7d6) are per-garment swatch fills, not chrome. Reality check: hint ("editorial pink accent, photographic") is accurate and the "editorial" is specifically a SERIF body (raphaSerifText, 784×) paired with a CONDENSED UPPERCASE sans for every heading — plus the signature Rapha pink #fa3c6e used sparingly. Sharpens it: buttons are strictly SQUARE (0px) black/white inverse pairs, and the site ships a real published double-ring focus system.
A restrained, magazine-grade cycling storefront: black text on white, generous full-bleed ride photography, and a deliberately literary type voice where a transitional serif carries all reading text while a condensed grotesque carries every heading in UPPERCASE. Colour is rationed almost to nothing in the chrome — the one brand hue, a hot Rapha pink #fa3c6e, appears on tiny controls and accents while the garments themselves supply saturated colourway swatches. Everything is square: buttons, cards and inputs sit at 0px radius with thin black or grey borders and near-zero shadow, so the page reads like a printed catalogue. Feels: editorial, precise, photographic, understated.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Primary text + headings (792×) |
| muted | #767676 | Secondary text, borders |
| muted-2 | #555555 | Tertiary text |
| disabled | #949494 | Disabled text / outline |
| ink-30 | rgba(16,16,16,.3) | Faint overlays |
| white | #ffffff | Text on imagery / dark bands |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background, cards (40×) |
| ink-fill | #000000 | Inverse button fill / dark bands (12×) |
| border | #cccccc | Light hairline / disabled border |
| surface | #f2f2f2 | Section tint |
| navy | #103b58 | Deep-navy feature band |
| card-glow | #c7c5c7 | Product-card shadow tint |
| Token | Hex | Role / usage |
|---|---|---|
| pink | #fa3c6e | Signature Rapha accent — carousel/utility controls, sale flashes |
| pink-light | #f67599 | Secondary pink tint |
| blue | #3860be | Rare link/badge blue |
Rule: chrome is black-on-white; pink #fa3c6e is the one brand accent and stays rationed. Product colourway swatches are content, never chrome.
raphaSerifText (a transitional serif, Times fallback) — the dominant family, 784×. Specimen uses Newsreader (open serif stand-in); the site ships Rapha Serif Text.raphaSansCondensed (a condensed grotesque) set UPPERCASE with +0.3px tracking. Specimen uses Oswald (open condensed stand-in); the site ships Rapha Sans Condensed.| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Display (h1) | raphaSansCondensed | 64 / 62 | 700 | +0.3px | UPPERCASE |
| Section (h2) | raphaSansCondensed | 32 / 32 | 600 | +0.3px | UPPERCASE |
| Sub (h3) | raphaSansCondensed | 24 / 24 | 600 | +0.3px | UPPERCASE |
| Body | raphaSerifText | 12–16 / 21 | 400 | normal | none |
| Button/label | raphaSansCondensed | 14 | 600 | +0.3px | UPPERCASE |
Patterns: every heading is UPPERCASE condensed with a constant +0.3px track and line-height equal to font size; body is a serif at normal tracking. No mid-family — it is strictly serif-reads / condensed-shouts.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.