McLaren (inspired interpretation)

# McLaren — Brand Spec

## 01 Brand Overview
McLaren is a British performance icon spanning automotive engineering and elite motorsport — a world where precision, speed and cinematic restraint converge. The identity is confident, dark, and minimal, letting the machine (and the light on it) carry the drama. The digital presence reads like a premium film: black canvas, tight typography, and a single ember of Papaya heat.

## 02 Color Palette

```
- name: canvas
  role: bg
  light: oklch(100% 0 0)
  dark:  oklch(15% 0.01 265)
  hex:   #ffffff
```
```
- name: ink
  role: subject
  light: oklch(46% 0 0)
  dark:  oklch(72% 0 0)
  hex:   #595959
```
```
- name: carbon
  role: accent
  light: oklch(0% 0 0)
  dark:  oklch(0% 0 0)
  hex:   #000000
```
```
- name: colnbrook
  role: highlight
  light: oklch(88% 0.006 90)
  dark:  oklch(88% 0.006 90)
  hex:   #dcdad4
```
```
- name: ember
  role: highlight
  light: oklch(48% 0.16 38)
  dark:  oklch(48% 0.16 38)
  hex:   #a5320a
```
```
- name: papaya
  role: highlight
  light: oklch(70% 0.19 48)
  dark:  oklch(70% 0.19 48)
  hex:   #ff8000
```
```
- name: midnight
  role: shadow
  light: oklch(17% 0.03 265)
  dark:  oklch(17% 0.03 265)
  hex:   #050f23
```
```
- name: mist
  role: highlight
  light: oklch(96% 0 0)
  dark:  oklch(96% 0 0)
  hex:   #f0f0f0
```

## 03 Typography
- Primary (display): `'mclarenSansDisplay', 'Helvetica Neue', Arial, sans-serif` — headlines, hero statements, nav. Set in caps, tight tracking.
- Secondary (body): `'mclarenSansText', 'Helvetica Neue', Arial, sans-serif` — running prose, UI labels, buttons.
- Mono (optional): `'IBM Plex Mono', 'SF Mono', ui-monospace, monospace` — telemetry, specs, timing data and numerics.

## 04 Voice

### Values
"Relentless pursuit of performance — where precision engineering and racing pedigree meet uncompromising design."

### Aesthetic
cinematic darkness, monochromatic precision, high-contrast restraint, engineered minimalism, single ember accent, motorsport gravitas

### Tone of Voice
confident, precise, aspirational, understated, purposeful

## 05 Layout posture
- Dark, full-bleed cinematic hero with product silhouetted in dramatic low-key light; content anchored to lower-left.
- Sharp, zero-radius rectangular elements — no rounding anywhere; edges are engineered, not soft.
- Generous negative space around a centered wordmark and thin horizontal nav; the machine breathes.
- Sparse, deliberate emphasis — a single lit accent or CTA per view, never competing focal points.

## 06 Anti-defaults
- Never use rounded corners — the radius system is strictly 0px.
- Avoid busy, colorful UI; the palette is monochrome with one ember/papaya accent used sparingly.
- No decorative gradients or drop shadows on cards — flatness and hard edges only.
- Avoid centered body prose; long-form copy stays left-aligned and restrained.
- Body/display typefaces are proprietary McLaren Sans — do not substitute a rounded or geometric humanist as a default.

## 07 Logo
- Wordmark-only in this capture: "McLAREN" in caps with a distinctive raised superscript "c", proprietary letterforms, rendered white on dark.
- Provide light-on-dark (white) and dark-on-light (black) variants; the hero uses the white SVG wordmark on near-black.
- Maintain clear-space of at least the cap-height of the "M" on all sides; minimum legible width ~120px on screen.
- Never recolor the mark off-palette, never add effects, and never alter the superscript-c spacing.

## 08 Imagery
- Cinematic automotive/motorsport photography — low-key lighting, deep shadow, single directional highlight raking across bodywork.
- Subjects: cars and race machinery shown as silhouettes emerging from darkness; garage, track and studio-dark environments.
- Treatment: high contrast, desaturated toward monochrome with occasional warm ember/papaya light source; symmetrical, centered compositions.
- Avoid bright daylight, busy backgrounds, or saturated color grading; keep the mood dark and premium.

## 09 UI Components
- Buttons: solid white fill with black uppercase text, zero radius, no shadow — hard rectangular CTAs ("VISIT AUTOMOTIVE").
- Nav: thin horizontal top bar, white uppercase labels with small chevron indicators for dropdowns, centered wordmark above.
- No visible cards or elevation on the hero — components sit directly on the dark canvas with no borders or fill.
- Media control chip: minimal square play/pause toggle, subtle gray fill, bottom-right — quiet, functional, non-branded.
- State treatment implied: subtle hover on nav links; buttons stay flat with high-contrast fill throughout.
- Corner-radius scale is a flat 0px across all interactive elements — buttons, controls, containers.

## 10 Iconography
- Thin-stroke line icons (chevrons, media controls) — light weight, sharp terminals, no fill.
- Minimal, literal metaphors; icons are functional wayfinders rather than decorative.
- Small, disciplined sizing paired inline with type; icons never dominate a label.

## 11 Patterns & Data Visuals
- No charts on the landing view; data-visual language would follow the monochrome-plus-ember palette with thin lines over fills.
- Background is imagery-driven (video/cinematic still) rather than pattern texture — the machine is the motif.
- Empty/negative space itself is the pattern — vast dark fields frame sparse content.
- Tables/lists would be low-density, thin-ruled, uppercase-labeled if present.

## 12 Spacing & Grid
- Airy, cinematic spacing on a 4px base unit; large vertical gaps push hero content to the lower third.
- Centered single-column masthead (wordmark + nav) over an edge-to-edge full-bleed media stage.
- Content anchored lower-left with generous margins; sections read as full-viewport panels.
- Radius scale is systematically 0px — sharpness is a global constant, not a per-component choice.

## 13 Products
- Automotive: McLaren W1 (product)
- Racing (service)
- Formula 1 (service)
- IndyCar (service)
- Endurance (service)
- Golf (service)
- Store (service)