# Rapha — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text & ink
| 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 |

### Surfaces & borders
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Body / reading: `raphaSerifText` (a transitional serif, Times fallback) — **the dominant family, 784×**. Specimen uses **Newsreader** (open serif stand-in); the site ships Rapha Serif Text.
- Headings / UI: `raphaSansCondensed` (a condensed grotesque) set UPPERCASE with +0.3px tracking. Specimen uses **Oswald** (open condensed stand-in); the site ships Rapha Sans Condensed.
- Body: 12–16px serif, 400. Two-voice system: serif reads, condensed sans shouts.

| 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.

## 4. Component Stylings

### Buttons — all SQUARE (0px radius)
- **Primary (over imagery)**: bg `#ffffff`, text `#000000`, 1px `#ffffff` border, radius `0px`, h `44px`, raphaSansCondensed 14/600 UPPERCASE +0.3px, padding `8px 20px`.
- **Outline**: transparent, text `#000000`, 1px `#000000` border, 0px, uppercase condensed.
- **Utility/carousel**: pink `#fa3c6e` fill, black icon, 40px (e.g. Pause control).
- **Disabled**: 1px `#949494` border, text `#949494` → `#cccccc`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Button | white or outline, 0px, uppercase | bg/border/color transition 0.25s | double-ring (below) | — | `#949494`/`#cccccc` |
| Link | `#000000` serif | `color .15s ease-in-out` | double-ring | — | — |

Focus is a real published system (`:root` tokens): `--focus-width: 3px`, `--focus-offset: 2px`, `--focus-outer-color: #888`, `--focus-inner-color: #fff` — a double ring (grey outer + white inner). Reproduce it, don't invent an `outline:auto`.

### Inputs
- Square (0px), 1px `#767676`/`#000000` border, serif text; size selectors are 84px outlined cells that fill/border black when selected.

### Cards / product tiles
- White, square, thin or no border; the only elevation is a soft grey product glow `rgb(199,197,199) 0px 0px 12px 2px`.

## 5. Layout Principles

- Full-bleed ride-photography heroes with overlaid white square CTAs and a top sale-ticker marquee.
- Product grids (jerseys, bibs) in square tiles with serif price + condensed-uppercase name.
- Occasional deep-navy `#103b58` feature bands; otherwise white canvas with `#f2f2f2` tints.
- Nav: white bar, condensed-uppercase links, Rapha wordmark; utility ticker above.

## 6. Depth & Elevation

- Radius scale: **0px is the rule** (buttons/cards/inputs square); minor `2px`/`3px` on chips, `50%`/`100%` on circular controls and avatars.
- Borders do the structural work: `1px #949494` (20×), `1px #000000` (19×), `1px #767676` (6×), `2px #000000` (3×), `1px #ffffff` on imagery.
- Shadows are nearly absent: a product-card grey glow `rgb(199,197,199) 0 0 12px 2px` and a faint `rgba(0,0,0,.2) 0 0 18px`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.15s | ease-in-out | links (dominant, 70×) |
| background-color, border-color, color | 0.25s | ease-in-out | button hover (20×) |
| transform | 0.3s | ease-out | card/image lifts |
| opacity | 0.25s | ease-in-out | reveals |

House transition is `color 0.15s ease-in-out`, with buttons cross-fading bg/border/color over 0.25s. Signature easings include an overshoot `cubic-bezier(0.6, 1.6, 0.6, 0.9)` and an ease-out-quint `cubic-bezier(0.22, 1, 0.36, 1)`. One infinite marquee (`_12w9fm90 175s linear infinite`) drives the sale ticker. No JS motion library detected. Ships **1 `prefers-reduced-motion` block**.

## 8. Backgrounds, Effects & WebGL

None decorative — flat white surfaces. Zero CSS gradients, zero canvas/WebGL, zero video, zero backdrop-filter, zero grain. Atmosphere is entirely full-bleed ride and product photography served from the Cloudinary CDN (media.rapha.cc).

## 9. Do's and Don'ts

### Do
- Pair a transitional serif for all reading text with a condensed grotesque for every heading, UPPERCASE at +0.3px.
- Keep chrome black-on-white; ration pink `#fa3c6e` to small controls and flashes.
- Make buttons, cards and inputs SQUARE (0px) with thin black/grey 1px borders.
- Use black/white inverse button pairs; disabled goes `#949494`/`#cccccc`.
- Reproduce the double-ring focus (3px, 2px offset, outer `#888`, inner `#fff`).
- Let full-bleed photography carry all the colour; keep motion to 0.15–0.25s.

### Don't
- Don't round corners — the system is square.
- Don't introduce a third type family or set headings in the serif.
- Don't tint the chrome with product colourway swatches.
- Don't spread pink across large areas; it is an accent, not a surface.
- Don't replace the double-ring focus with `outline:auto`.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 360 / 400 / 425 / 480 | phone tiers, nav collapse |
| 530 / 550 / 600 / 640 / 767 | phone→tablet grid reflow |
| 768 / 896 / 992 | tablet→desktop |
| 1200 / 1400 / 1600 / 1900 | large-desktop max-widths |

A dense device-targeted ladder (18 seams, min+max pairs). No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, **1 reduced-motion block**. Mobile nav collapses to a hamburger; grids reflow to 2-up then 1-up.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#767676` · Border `#000000`/`#949494` · Accent `#fa3c6e`
- Fonts: `raphaSerifText` serif (body) + `raphaSansCondensed` (UPPERCASE headings) · Body: 16px serif · Radius: 0px everywhere · Control height: 44px
- Focus: double ring — 3px width, 2px offset, outer `#888`, inner `#fff` · Hover: bg/border/color 0.25s ease-in-out

<rapha-marketing_design_language>
Use the Rapha design language: a restrained, magazine-grade cycling storefront, black text on a white canvas with generous full-bleed ride photography. The type voice is strictly two-part and is the signature — a transitional SERIF (raphaSerifText) carries every piece of reading text while a CONDENSED grotesque (raphaSansCondensed) carries every heading and button label in UPPERCASE at a constant +0.3px tracking, line-height equal to font size (64/62 display, 32 and 24 heads, 600–700). Ink is pure #000000; secondary #767676; the one brand accent is a hot Rapha pink #fa3c6e, rationed to small controls and sale flashes while the garments supply saturated colourway swatches that never touch the chrome. Everything is SQUARE — buttons, cards and inputs at 0px radius with thin 1px black or #949494 borders and almost no shadow (a soft grey product glow at most), so the page reads like a printed catalogue; buttons are black/white inverse pairs, disabled goes #949494/#cccccc. Reproduce the published double-ring focus: 3px width, 2px offset, grey #888 outer and white #fff inner. Motion is quiet — color 0.15s and button bg/border/color 0.25s ease-in-out, transform 0.3s ease-out, an overshoot cubic-bezier(0.6,1.6,0.6,0.9), a slow sale-ticker marquee — with a reduced-motion block and no gradients, canvas or video. Feels: editorial, precise, photographic. Avoid: rounding corners, setting headings in the serif or adding a third family, spreading pink across large areas, tinting chrome with product swatch colours, and replacing the double-ring focus with outline:auto.
</rapha-marketing_design_language>