# Honda Engine Room — The Café Racer Revolution

Longform design study No. 08. Research notes behind the homage page in `reports/08-honda.html`.

## Overview

Honda Engine Room is Honda UK's brand-content magazine. "The Café Racer Revolution" is a
heritage photo-essay built as a single, long, scroll-driven page. The personality is dark
and cinematic: a near-black canvas, wall-to-wall photography, one giant condensed display
face used sparingly, and brand red rationed to eyebrows, pull-quotes, and links. The thesis
of the layout is simple — photography plus scale carries the emotion, and the type stays
loud but sparse.

It is premium brand editorial with attitude. There is no card grid, no sidebar, no related
rail. Scroll is the only interaction and the reading order is strictly linear.

## How it structures longform content

- **Cinematic hero first.** Full-bleed photo, a single condensed white headline over a
  scrim, and an italic-condensed product lockup (e.g. "CB1000R / BLACK EDITION").
- **Alternating rhythm.** The page alternates full-width vignetted image fields with a
  narrow, quiet white reading column. That contrast is the pacing device.
- **Three hierarchy signals do the work:** a small red uppercase display eyebrow marks a
  new movement; the giant condensed headline anchors each beat; a red uppercase pull-quote
  breaks the column to reset the eye.
- **Imagery as environment.** Photos bleed edge to edge under heavy vignettes; captions are
  small, set in the display face, tagged in red, and sit low over the gradient rather than
  in a solid bar.
- **Long document.** Roughly 17,900px tall on desktop, carried by ~107 images (14 of them
  full-bleed). The tight measure keeps prose from competing with the imagery.

## Desktop treatment

- Dark canvas throughout (near-black).
- H1 in Proxima Nova Extra Condensed, **84.8px / weight 400**, white, mixed-case, over the hero.
- Pull-quote in the same condensed face, **28.8px, UPPERCASE, Honda red #DC182D**.
- Body **16px / 27.2 line-height (1.7)**, white.
- Measure ~**540px**, about **68 characters per line**.
- Black top nav with the boxed "HONDA / ENGINE ROOM" logo, red accents, and a red
  "Subscribe here" link top-right. Nav items: Cars, Bikes, Power Products, England Rugby,
  Racing, Events, Just Ride.
- 14 full-bleed images out of ~107 total.

## Mobile treatment (390px)

- Same voice, compressed — the layout does not restructure, it collapses to one column.
- H1 drops to **35px**.
- Body **14px / 23.8 line-height** (leading ratio held at 1.7).
- Measure ~**325px**, about **46 characters per line**.
- Photography stays full-bleed and becomes even more dominant; nav collapses, logo centred.

## Design system (tokens)

**Type**
- Display: Proxima Nova Extra Condensed (homage uses **Oswald** 400–700). Used huge.
- Body: **Inter** 400–600.
- Scale: H1 clamp(3rem, 11vw, 6rem) white mixed-case; pull-quote Oswald 500 UPPERCASE
  clamp(1.6rem, 4vw, 2.4rem) red; section eyebrow Oswald uppercase red small;
  body 16px / 1.7.

**Colour**
- Canvas near-black `#0B0B0B`
- Panel `#141414`
- Text white `#F4F4F4`
- Honda red `#DC182D`
- Muted gray `#9A9A9A`
- Hairline `rgba(255,255,255,.12)`

**Layout**
- Reading column ~540px (~68 CPL desktop / ~46 CPL mobile).
- Leading fixed at 1.7 across breakpoints; only pixel sizes flex.
- Full-bleed image bands alternating with the reading column.
- Product lockups set in italic condensed, white with a red slash.

## Signature techniques

- **Rationed accent.** One red, used only for emphasis (eyebrows, quotes, links), never
  decoration — so it always reads as a signal.
- **Two-voice typography.** One condensed grotesque for every structural moment, one neutral
  sans for the prose. Two fonts run the whole page.
- **Scrim, not box.** Contrast on text-over-image comes from a vignette plus gradient, which
  clears legibility without breaking the cinematic field with a solid caption bar.
- **Scale as emotion.** The headline is disproportionately large relative to the body, which
  is what gives the page its filmic, poster-like weight.
- **Grain and vignette** give otherwise flat surfaces a photographic feel.

## What to steal

1. Ration the accent colour to emphasis only — one red, never decorative.
2. Let photography set the tempo: alternate wall-to-wall fields with a narrow reading column.
3. One loud voice (condensed display) + one quiet voice (neutral sans) can carry a whole page.
4. Keep the leading ratio constant across breakpoints; flex only the pixel sizes.
5. Earn text contrast with a scrim/vignette rather than a solid bar, to preserve the image field.

## Homage build notes

- All cinematic fields in `reports/08-honda.html` are CSS gradients + SVG grain + vignette —
  none of Honda's copyrighted photography is embedded in the layout.
- The two captured screenshots appear only inside a small, attributed "Visual reference"
  figure for commentary.
- Motion (IntersectionObserver reveals, sticky nav) is CSS/JS-light and fully gated behind
  `prefers-reduced-motion: reduce`.

## Visual references

- Desktop: `../assets/screenshots/08-honda-desktop.jpeg`
- Mobile: `../assets/screenshots/08-honda-mobile.jpeg`

## Source URL

https://www.honda.co.uk/engineroom/bikes/the-cafe-racer-revolution/