---
version: alpha
name: McLaren
description: Engineering velocity made visual — near-absolute dark canvas, proprietary MCL Standard typeface at clean weight 400, papaya orange as the singular high-voltage CTA stamp, and full-bleed cinematic photography that lets machinery do the talking.

colors:
  # Primary surfaces — site is predominantly dark/near-black
  background: "#0a0a0a"           # Near-black canvas — dominant page surface
  surface: "#111111"              # Slightly lifted dark surface for cards/panels
  surface-mid: "#1a1a1a"         # Secondary surface — sidebars, drawers
  surface-overlay: "#000000"      # Full black overlay behind modals

  # Papaya orange — McLaren's signature racing livery accent
  primary: "#ff8000"              # Papaya Orange — primary CTA and brand stamp
  primary-hover: "#e67200"        # Deeper orange on hover
  primary-active: "#cc6600"       # Pressed state — rich amber

  # Text / ink
  ink: "#ffffff"                  # Primary text on dark canvas
  ink-secondary: "#53565a"        # Mid-gray — secondary labels, metadata
  ink-muted: "#787878"            # Tertiary — captions, disabled
  on-primary: "#000000"           # Black text on papaya orange background

  # Interactive
  link-hover: "#ff8000"           # Orange on link hover — brand consistency
  focus-ring: "#ff8000"           # Orange focus ring — accessible, on-brand

  # Borders
  border: "#2a2a2a"              # Subtle dark hairline
  border-mid: "#3a3a3a"          # Slightly more visible divider

  # Shadows (dark system — minimal, used for floating panels)
  shadow-soft: "#000000"          # opaque approx of rgba(0,0,0,0.08) card shadow — Google format requires hex

  # Semantic
  success: "#2e7d32"
  error: "#c62828"
  warning: "#f57f17"

typography:
  display-hero:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  body-large:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  body:
    fontFamily: "Noto Sans, Noto Sans Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "mclStandardMedium, mclStandardRegular, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  label-upper:
    fontFamily: "mclStandardRegular, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 2px
  caption:
    fontFamily: "Noto Sans, Noto Sans Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 2px
  micro-label:
    fontFamily: "Noto Sans, Noto Sans Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 64px
  5xl: 96px
  6xl: 104px

rounded:
  none: 0px
  micro: 1px
  sharp: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sharp}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sharp}"
    padding: 12px 24px
    border: "1px solid {colors.border-mid}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sharp}"
    padding: 12px 24px
    border: "1px solid {colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"

  card-editorial:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-elevated:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sharp}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sharp}"
    padding: 12px 16px
    border: "1px solid {colors.border-mid}"
  input-focus:
    border: "1px solid {colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.micro-label}"
    rounded: "{rounded.sharp}"
    padding: 4px 10px

  tag-label:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sharp}"
    padding: 4px 12px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px
  link-hover:
    textColor: "{colors.link-hover}"
---

# McLaren Design System

## Overview

McLaren's website is a precision instrument — a dark machine-space where engineering aesthetics dominate and ornamentation is eliminated with the same discipline applied to race car aerodynamics. The near-absolute `{colors.background}` canvas functions as a void: a technical theater in which carbon fiber finishes, titanium-bright headlights, and the sculpted silhouettes of supercars and Formula 1 chassis become pure object against shadow. There is no decorative layer between viewer and machine. The photography is not illustrative but documentary — the site feels like the engineering bay floor, not the showroom.

The color language is almost ascetic until `{colors.primary}` explodes into view. Papaya orange — the racing livery McLaren wore in its early championship decades — appears with strategic scarcity: the two CTA buttons in the hero, the focus ring, the brand stamp moments that demand immediate response. Against the surrounding near-black, orange carries extraordinary visual energy at minimal application. There is no accent gradation, no tonal range, no warm-up palette. The system is binary: dark field, orange signal.

Typography is built around the proprietary MCL Standard family — a precision sans with geometric clarity and tight proportions. The regular weight (400) handles everything from display headlines down through navigation links, giving the type system a uniform calm that echoes McLaren's engineering ethos: no unnecessary weight, no decorative variation. Noto Sans serves the secondary utility layer (body copy, metadata, captions) with extended tracking (2px) and uppercase transforms that annotate rather than narrate. Letter-spacing in uppercase captions creates a label-like annotation quality reminiscent of aerospace technical documentation.

**Key Characteristics:**
- Near-absolute dark canvas (`{colors.background}`) — the page is a machine space, not a lifestyle set
- Papaya orange (`{colors.primary}`) used as a high-voltage signal color — maximum contrast, minimum application
- MCL Standard proprietary typeface at weight 400 — geometric, clinical, precisely proportioned
- Near-zero border-radius (`{rounded.sharp}` at 2px default) — every corner is a right angle at machine tolerance
- Full-bleed cinematic photography of F1 cars, supercars, and the McLaren Technology Centre architecture
- Noto Sans for body text and captions, rendered uppercase with 2px letter-spacing for annotation quality
- 8px base spacing grid with generous outer margins — interior spacing is compact, breathing room is at the macro scale
- Subtle card shadows using near-black `{colors.shadow-soft}` — depth by shadow tint, not contrast inversion
- Uppercase labels with expanded tracking as the primary category annotation system
- Navigation at MCL Standard 16px weight 400 — same voice as headings, reinforcing typographic unity

## Colors

### Primary Surfaces
- **Near-Black Canvas** (`{colors.background}`): Dominant page surface — the defining characteristic of McLaren's digital aesthetic.
- **Lifted Dark** (`{colors.surface}`): Slightly elevated surface for content cards and content panels.
- **Secondary Surface** (`{colors.surface-mid}`): Sidebars, drawers, secondary containers.
- **Full Black Overlay** (`{colors.surface-overlay}`): Modal backdrops and overlay contexts.

### Brand Accent
- **Papaya Orange** (`{colors.primary}`): McLaren's signature racing color — used exclusively for primary CTAs and high-priority brand moments. The single most important color in the system; it should never become ambient.
- **Deep Orange** (`{colors.primary-hover}`): Darker hover variant maintaining orange identity.
- **Amber Press** (`{colors.primary-active}`): Richest tone — active/pressed state.

### Text & Ink
- **Pure White** (`{colors.ink}`): Primary text on dark canvas — the dominant text color.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary labels, metadata, and subdued UI text.
- **Tertiary Gray** (`{colors.ink-muted}`): Captions, disabled states, least-important annotations.
- **Black on Orange** (`{colors.on-primary}`): Text and icons applied directly onto papaya orange surfaces.

### Interactive & Semantic
- **Orange Link Hover** (`{colors.link-hover}`): Consistent orange brand signal on link hover.
- **Orange Focus Ring** (`{colors.focus-ring}`): Accessibility focus indicator — on-brand and WCAG 3:1 compliant.
- **Border Hairline** (`{colors.border}`): Subtle structural line in dark contexts.
- **Border Mid** (`{colors.border-mid}`): Slightly more visible divider for component boundaries.

## Typography

### Font Family
- **MCL Standard Regular** (`mclStandardRegular`): Proprietary McLaren typeface — headlines, navigation, body-large, labels. Fallbacks: Arial, Helvetica, sans-serif.
- **MCL Standard Medium** (`mclStandardMedium`): Medium-weight variant for button UI and emphasis contexts.
- **MCL Standard Bold** (`mclStandardBold`): Bold variant for high-emphasis contexts.
- **Noto Sans**: Secondary typeface for body text, UI utilities, and captions. Rendered uppercase with 2px letter-spacing in annotation contexts.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px MCL Standard — full-bleed hero headlines and marquee statements |
| `display` | 48px MCL Standard — section openers and model name displays |
| `heading-section` | 32px MCL Standard — major section headings |
| `heading-sub` | 24px MCL Standard — subsection headings, card titles |
| `body-large` | 20px MCL Standard — lead copy, primary descriptive text |
| `body` | 16px Noto Sans — general body copy and prose |
| `nav-link` | 16px MCL Standard — navigation links, all horizontal nav items |
| `button-ui` | 16px MCL Standard Medium — CTA button labels |
| `label-upper` | 18px MCL Standard uppercase 2px tracking — category annotations |
| `caption` | 12px Noto Sans uppercase 2px tracking — metadata, timestamps |
| `micro-label` | 12px Noto Sans medium uppercase — smallest badge and tag text |

### Principles
- **Singular family voice**: MCL Standard handles all display, navigation, and structural text — one voice from hero to nav link.
- **Weight compression**: The system uses weight 400 almost exclusively; differentiation comes from size and case, not weight variation.
- **Uppercase-as-annotation**: Noto Sans captions and labels use `text-transform: uppercase` with 2px tracking to create an aerospace-label quality.
- **Tight display metrics**: `{typography.display-hero}` uses -1px letter-spacing — precision compression at large scale, like machined tolerances.
- **Two-register system**: MCL Standard handles narrative identity; Noto Sans handles structural annotation — never mixed within the same text block.

## Layout

### Spacing System
Base unit is **8px**. The scale jumps to 12px as the first meaningful interior spacing unit, with 24px, 32px, and 40px as primary content breathing values. Large-scale hero padding reaches 96–104px — generous outer frames that let photography command its space.

The spacing personality is compact internally and generous externally: component padding is tight (12px vertical, 24px horizontal on buttons), while section margins are wide. This creates a sense that machinery is placed with precision inside spacious engineering bays.

### Grid & Container
- Max content width: ~1536px (largest breakpoint — full viewport at this scale)
- Hero: Full-bleed photography extending edge to edge
- Content sections: 2-column image+text layouts alternating orientation
- Navigation: Horizontal bar at `{colors.background}` with MCL Standard links, McLaren wordmark right-aligned
- Footer: Multi-column link grid

### Whitespace Philosophy
- Large outer margins function as staging areas — content arrives into white space rather than filling it
- Inner component spacing is tight and purposeful, reflecting racing car packaging philosophy
- The dark canvas means whitespace is dark space — absence reads as technical void, not emptiness

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default content sections and editorial cards |
| Subtle (Level 1) | `rgba(0,0,0,0.08)` 8px vertical — opaque: `{colors.shadow-soft}` | Navigation dropdowns, floating panels |
| Card (Level 2) | `rgba(0,0,0,0.08)` 4px vertical — opaque: `{colors.shadow-soft}` | Content cards on dark surface |
| Depth (Level 3) | `rgba(0,0,0,0.2)` 18px spread — opaque: `{colors.shadow-soft}` | Modal dialogs, full-screen overlays |
| Focus Ring | 2px solid `{colors.focus-ring}` outline | Keyboard focus state — papaya orange |

**Shadow Philosophy**: McLaren's shadow system is nearly invisible — three subtly varying black-tinted shadows calibrated to dark backgrounds where shadows read as depth variations in near-black rather than the white-light-casting shadows of light-mode systems. The effect is textural — panels appear to lift fractionally from the canvas surface, like machined components stacked in assembly. Photography provides all emotional depth; UI shadows are structural only.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Editorial image containers, section dividers |
| `micro` | 1px | Inline spans, progress indicators |
| `sharp` | 2px | Buttons, inputs, cards — the default interactive radius |
| `pill` | 9999px | Filter chips, circular badges, icon buttons |

McLaren's corner language is essentially rectilinear. The 2px default (`{rounded.sharp}`) is barely perceptible — a machine tolerance, not a design statement. The system avoids mid-range radii (4–16px) entirely: corners are either right angles or pill-shaped, binary like the binary orange-on-black color decision.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing raw values.

### Button Variants
- **`button-primary`** — Papaya orange fill, black text, 2px radius, MCL Standard Medium 16px. The defining interactive element; used exclusively for highest-priority actions (Racing Careers, Automotive Careers, primary CTAs).
- **`button-secondary`** — Dark surface fill with mid-border, white text. Secondary actions and alternative paths.
- **`button-ghost`** — Transparent with white outline, transitions to orange on hover. Used over photographic backgrounds and cinematic sections.

### Cards
- **`card-editorial`** — Zero-radius, flush image above with text below. No shadow, no border. Pure content.
- **`card-elevated`** — Slightly elevated dark surface with `{rounded.sharp}` and 24px padding. Used for structured content blocks.

### Inputs
- **`input`** / **`input-focus`** — Dark surface, mid-border, sharp 2px radius. Focus state promotes border to orange (`{colors.primary}`) — brand-consistent accessibility.

### Navigation
- **`nav-bar`** — Near-black background, MCL Standard 16px weight 400 white links. Sparse and architectural; the wordmark right-aligns as a precision stamp.

### Badges & Tags
- **`badge`** — Papaya orange fill, black text, micro-label typography. High-contrast label for race events, new model indicators.
- **`tag-label`** — Dark surface, secondary ink, uppercase caption. Category and filter annotations.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (papaya orange) exclusively for primary CTAs — one or two per screen maximum
- Apply `{rounded.sharp}` (2px) as the universal default radius for all interactive elements
- Render uppercase Noto Sans captions with 2px letter-spacing for all structural annotation
- Use MCL Standard Regular at weight 400 for display, headings, and navigation — let size do the work
- Keep the near-black canvas (`{colors.background}`) dominant — photography should be the contrast event
- Use focus ring (`{colors.focus-ring}`) consistently on all keyboard-interactive elements — the orange is accessible and on-brand
- Scale spacing with the 8px grid — interior compact (12–24px), exterior generous (64–104px)
- Let full-bleed photography dominate hero sections — no decorative overlays, no color-tinted gradients over imagery
- Compress display letter-spacing to -1px at hero scale — precision mechanics, not loose editorial

### Don't
- Scatter `{colors.primary}` as ambient decoration — orange is a signal, not a theme
- Introduce mid-range border radii (4–16px) — the system is binary: `{rounded.sharp}` or `{rounded.pill}`
- Use colored backgrounds (blue, green, or tinted surfaces) — the palette is near-black + white + orange only
- Apply MCL Standard Bold indiscriminately — weight variation should be reserved for the most critical emphasis
- Add decorative box-shadows to editorial cards — depth is achieved through surface color differentials
- Mix MCL Standard and Noto Sans within the same text block — the two-register system is structural
- Use light or white canvas sections without clear editorial intention — the dark mode is not a mode, it's the brand
- Place multiple orange elements in the same view — scarcity is what makes orange carry authority
- Use generic sans-serif fallbacks at display size without MCL Standard loaded — the proportions are distinctive

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤425px | Single column, stacked hero CTAs, hamburger nav, 12px outer margins |
| Mobile | 426–640px | Single column, slightly increased padding (16px), full-width cards |
| Tablet Small | 641–768px | 2-column grid begins for cards, nav collapses to hamburger |
| Tablet | 769–1024px | Full 2-column editorial layout, hero scale reduces, 20px outer margins |
| Desktop | 1025–1280px | Full navigation bar, 2-column alternating image+text sections |
| Large Desktop | 1281–1536px | Maximum content width, hero photography at full cinematic scale, widest outer margins |

### Touch Targets
- Primary orange CTAs: minimum 44px height with 12px vertical padding — meets WCAG 2.5.5
- Navigation links: 16px text with adequate vertical spacing in expanded mobile menu
- Card interaction zones: full card is the tap target — no small hotspot within card chrome
- Focus ring: 2px solid orange at 3:1 minimum contrast ratio against dark canvas

### Collapsing Strategy
- **Navigation**: Horizontal MCL Standard nav collapses to hamburger + McLaren wordmark on mobile; vertical slide-out panel
- **Hero sections**: Full-bleed photography maintained at all breakpoints; text overlay repositions to lower-left at mobile
- **Editorial grid**: 2-column image+text alternating layouts collapse to single-column, image stacking above text
- **Card grids**: 3–4 column desktop grids collapse through 2-column tablet to 1-column mobile
- **Spacing reduction**: Section padding reduces from 64–104px (desktop) to 24–40px (mobile), preserving proportional breathing

### Image Behavior
- Hero photography: full-bleed at all breakpoints using `object-fit: cover` — composition maintained, edges crop
- Car photography: aspect ratio preserved; mobile crops tighten on vehicle subject matter
- Technical Centre architecture shots: wide-format images scale responsively, never pixelate
- Lazy loading: below-fold assets load progressively

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — near-absolute dark, the dominant canvas
- Primary text: `{colors.ink}` — pure white
- Brand CTA: `{colors.primary}` — papaya orange, used sparingly
- Secondary text: `{colors.ink-secondary}` — mid gray for labels
- Tertiary / caption: `{colors.ink-muted}` — dark gray
- Border: `{colors.border-mid}` — subtle dark hairline
- On orange (text/icons): `{colors.on-primary}` — black

### Example Component Prompts

- "Create a full-bleed hero section on `{colors.background}` with a cinematic photograph of an F1 car spanning the full viewport, a `{typography.display-hero}` MCL Standard headline in `{colors.ink}` (white) positioned lower-left with 96px outer padding, and two `button-primary` CTAs in papaya orange (`{colors.primary}`) with black text, `{rounded.sharp}` corners, and 12px 24px padding side by side"
- "Design an editorial card on `{colors.surface}` with a full-width 16:9 image above, a `{typography.heading-sub}` MCL Standard heading (white, 24px weight 400) below, a `{typography.caption}` Noto Sans uppercase label in `{colors.ink-secondary}` (12px, 2px letter-spacing) as the category annotation, and zero border radius — no shadows, no borders, pure content architecture"
- "Build a dark navigation bar at `{colors.background}` with MCL Standard 16px weight 400 links in `{colors.ink}` spaced horizontally, the McLaren wordmark SVG right-aligned, a focus state using 2px solid `{colors.focus-ring}` (papaya orange), and a hover state that transitions link color to `{colors.link-hover}`"
- "Create a stats row on `{colors.surface-mid}` with 3–4 large numerical values in `{typography.display}` MCL Standard (48px weight 400, white), each with a `{typography.label-upper}` uppercase annotation in `{colors.ink-secondary}` below (18px, 2px tracking), and `{spacing.2xl}` horizontal gaps between stat blocks"
- "Design a model showcase card in `{colors.surface}` with a full-bleed photograph of the vehicle, a `{typography.heading-section}` MCL Standard model name in white (32px weight 400), a one-line `{typography.body}` description in `{colors.ink-secondary}` (16px Noto Sans), a `{components.badge}` orange badge for 'New' or 'Racing' category, and a `{components.button-ghost}` ghost button labeled 'Explore' with white outline transitioning to orange on hover"

### Iteration Guide

1. **Start with the canvas**: Set `{colors.background}` as the root — near-absolute dark is non-negotiable; never substitute a lighter surface as the main background
2. **Introduce orange once per screen**: Place `{colors.primary}` on the single highest-priority CTA; verify it reads as a singular signal before adding any additional orange
3. **Type size over type weight**: MCL Standard Regular at 400 is the system default — increase size to add hierarchy, not weight (reserve Medium for button labels only)
4. **Photography as depth**: Let full-bleed vehicle photography be the primary source of visual energy and depth; avoid adding color overlays, gradient burns, or duotone treatments to imagery
5. **Uppercase tracking for structure**: Apply Noto Sans uppercase with 2px letter-spacing for any category label, filter chip, or metadata annotation — it signals "annotation" not "headline"
6. **Corner binary**: All interactive element corners use `{rounded.sharp}` (2px) — if an element needs more softness, it becomes pill-shaped (`{rounded.pill}`); there is no in-between
7. **Spacing compression inside, expansion outside**: Keep component internal padding compact (12px vertical) and allocate generous outer section margins (64–104px) so each content section breathes like a gallery bay

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by McLaren. Brand names and trademarks belong to their respective owners.