---
version: alpha
name: "McLaren"
website: "https://www.mclaren.com"
description: >-
  A British motorsport-and-supercar group whose marketing site treats woven carbon fibre as the hero canvas and papaya orange as the only sanctioned voltage — the above-fold plate is a full-bleed photograph of carbon weave with the chrome McLaren swoosh embedded in the material, and the only two CTAs are flat papaya-orange rectangles labelled "Racing" and "Automotive" with black sans-serif text and zero corner radius. The chrome runs custom mclStandardRegular for nav and headlines, Noto Sans for button labels at 12px / 500 with 2px tracking, and a 329-occurrence hairline border in cool grey. The site never asks you to choose what to buy first; it asks you to choose which McLaren you came for — the track team or the road car.

seo:
  title: "McLaren Design System for React — papaya orange #ff8000, mclStandardRegular, 14 components"
  metaDescription: "McLaren's marketing site as a DESIGN.md file — carbon-fibre hero, papaya-orange Racing/Automotive CTAs, mclStandardRegular display, chamfered geometry. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Carbon fibre as hero canvas — the above-fold plate is a photograph of woven carbon with the McLaren swoosh embedded in the weave, not a flat brand colour"
    - "Two-button homepage — the only primary actions are flat papaya-orange rectangles labelled Racing and Automotive, side-by-side, zero-radius"
    - "Three orange grades — papaya #ff8000 fills CTAs, splash-yellow #ff9e1b carries supporting accents, fuzzy peach #ffbe8c warms hover states"
    - "Chamfer scale, not radius — the CSS exposes chamfer-xs 3px through chamfer-xl 46px as cut corners, never bent corners"
    - "Anniversary-ring footer — McLaren Racing's logo sits inside an orbit of championship years (1974, 1984, 1985, 1988…2024, 2025) replacing a conventional sitemap"
  tags:
    - "Automotive"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    McLaren's homepage opens on a single photograph of woven carbon fibre, lit so the herringbone twill catches a cool blue rim-light along the diagonal, with the silver chrome McLaren swoosh embedded in the weave as if pressed into the laminate. The wordmark sits flush top-right, and the only two primary actions on the entire above-fold view are two flat papaya-orange rectangles — "Racing" on the left, "Automotive" on the right — with hard zero-radius corners and black Noto Sans labels at 12px / 500 with 2px letter-spacing. There is no headline, no sub-paragraph, no third CTA. The site does not pitch you a vehicle; it asks you to choose which side of the brand you came for. Where Ferrari uses its red as a saturated background brand band, and where Pagani refuses brand colour entirely, McLaren reserves papaya for exactly two chips and lets the carbon-fibre material do every other visual job.

    The DESIGN.md packages the system into a machine-readable spec. Inside: 11 colour tokens including the brand papaya orange (#ff8000, wired as `--papaya`), the splash-yellow secondary (#ff9e1b, wired as `--splash-yellow`), the fuzzy-peach hover tint (#ffbe8c, `--fuzzy-peach`), pure-black canvas for the carbon plate, pure-white ink for the wordmark, and a 329-occurrence cool-grey hairline border tone. 15 typography tokens span the custom mclStandardRegular / mclStandardMedium / mclStandardBold family for nav and headlines, Noto Sans at 12px / 500 with 2px tracking for buttons, and Space Grotesk at 15px / 700 for a single category-strip label. The radius scale isn't a radius scale at all — the system exposes a `chamfer` family (xs 3px through xl 46px) as CSS variables, but the captured surfaces all render at 0px corners. 14 components cover the wordmark, the carbon-fibre hero, the dual papaya-orange CTAs, the under-bar nav links, and the anniversary-ring footer.

    Feed this file to Claude or Cursor and it reproduces McLaren's specific moves: woven-carbon hero photograph as the brand surface, two papaya-orange flat rectangles as the entire homepage CTA cluster, mclStandardRegular at 16px / 400 for chrome and Noto Sans at 12px / 500 / 2px-tracked for buttons, and the chamfer-not-radius geometry language. Borrow the spec when you have a brand material (carbon fibre, brushed aluminium, leather grain) that can carry a hero in its own right — without the material the two-button homepage reads as missing content rather than as restraint.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.mclaren.com"
      title: "McLaren — official site"
      description: "McLaren's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is McLaren's primary brand color?"
      answer: "McLaren's brand voltage is papaya orange (#ff8000) — a saturated, warm orange wired into the CSS as --papaya and as --color-papaya across the marketing chrome. The captured page uses it on exactly four background fills: the two homepage CTAs (Racing and Automotive), the active-state nav underline indicator, and a single category-strip accent. Beside the primary papaya, McLaren runs a splash-yellow #ff9e1b (--splash-yellow) for secondary accents like the small footer marker beside the McLaren Racing line, and a fuzzy-peach #ffbe8c (--fuzzy-peach) for hover and focus tints. The three orange grades together carry the entire brand voltage; everything else on the page is black, white, or hairline grey."
    - id: "typography"
      title: "What typeface does McLaren use, and what should I use as a substitute?"
      answer: "McLaren runs a custom proprietary family called mclStandard across nav links, headlines, and body copy, in three weights — Regular, Medium, and Bold. Nav links sit at 16px / 400 / 24px line-height. The CTAs use Noto Sans (open-source) at 12px / 500 with 2px letter-spacing and uppercase casing — the small-caps button treatment is the most identifiable type moment on the page. A single category-strip span runs Space Grotesk at 15px / 700 for a data-style label. The closest open-source substitute for mclStandardRegular is Inter at the same weights, or Söhne if you have a licence; Noto Sans is already on Google Fonts so the button face transfers verbatim. The 2px tracking on uppercase button labels is the move to preserve, not the family."
    - id: "papaya-history"
      title: "Why is McLaren's orange so specific?"
      answer: "Papaya orange has been McLaren's racing livery colour since the 1968 Can-Am season, when founder Bruce McLaren chose it specifically because it was the most visible colour against a typical race track and against grainy black-and-white television broadcasts. The hex #ff8000 captured on the marketing site is the present-day digital translation; CSS also exposes an external paint-match value #f96800 wired as --papaya-external for partner co-branding. The colour appears on the F1 car, the road cars, and the homepage CTAs in the same tone — Racing and Automotive sit beside each other on the page as the two halves of the same papaya-orange brand voltage."
    - id: "chamfer-vs-radius"
      title: "Why does McLaren use chamfer values instead of border-radius?"
      answer: "The CSS exposes a chamfer family rather than a conventional border-radius scale — values run --chamfer-xs 3px, --chamfer-sm 6px, --chamfer-md 12px, --chamfer-lg 18px, --chamfer-xl 46px. Chamfer in this context is a clip-path treatment that cuts the corner at a 45-degree angle rather than bending it on a curve, mirroring the geometry of carbon-fibre composite panel edges and racing-car aero surfaces. On the captured homepage every visible surface uses 0px corners — the cut-corner chamfer treatment lives in deeper category pages and product configurators that this extraction does not reach. The two homepage CTAs sit at zero radius and zero chamfer, presenting as hard rectangles."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own automotive marketing site?"
      answer: "Yes — the tokens resolve cleanly for Claude, Cursor, or any AI tool that reads structured design specs. The agent will reproduce McLaren's specific moves: woven-carbon hero plate, two-button homepage with hard papaya-orange rectangles, mclStandardRegular at 16px / 400 for chrome, Noto Sans at 12px / 500 with 2px tracking for buttons, and the chamfer-not-radius geometry vocabulary. The token references all resolve to declared values. Caveat: McLaren can hold an empty above-fold canvas with just two buttons because the carbon-fibre material is doing the entire visual job. On a product that lacks a hero material this strong, the layout reads as missing content rather than as restraint — borrow the two-button discipline only when your medium can carry the page on its own."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#ff8000"
  secondary: "#ff9e1b"
  tertiary: "#ffbe8c"
  canvas: "#000000"
  surface-1: "#282828"
  ink: "#ffffff"
  ink-muted: "#53565a"
  ink-soft: "#787878"
  ink-fade: "#c9c9c9"
  surface-2: "#f1f1f1"
  hairline: "#e5e7eb"

typography:
  display-md:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 37.5px
    letterSpacing: 0
  heading-md:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  heading-sm:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27.9px
    letterSpacing: 2px
  body-lg:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  body-sm:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0
  body-medium:
    fontFamily: "mclStandardMedium, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  body-bold:
    fontFamily: "mclStandardBold, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-emphasis:
    fontFamily: "mclStandardRegular, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"Noto Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Noto Sans\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15.96px
    letterSpacing: 2px
  button-active:
    fontFamily: "\"Noto Sans\", sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: 2px
  caption:
    fontFamily: "\"Noto Sans\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  data-label:
    fontFamily: "\"Space Grotesk\", sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: 0
  body-data:
    fontFamily: "\"Noto Sans\", sans-serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 37.5px
    letterSpacing: 0

rounded:
  none: "0px"
  chamfer-xs: "3px"
  chamfer-sm: "6px"
  chamfer-md: "12px"
  chamfer-lg: "18px"
  chamfer-xl: "46px"

spacing:
  xs: "4px"
  sm: "8px"
  base: "12px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "26px"
  3xl: "28px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "20px 0px"
    height: "53px"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-active}"
    rounded: "{rounded.none}"
    padding: "20px 0px"
    height: "53px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "20px 24px"
    height: "53px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.none}"
    padding: "24px 26px"
    height: "78px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "12px"
    height: "44px"
  nav-link-active:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.none}"
    padding: "12px"
    height: "44px"
    borderColor: "{colors.primary}"
  wordmark:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: "0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  data-chip:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.canvas}"
    typography: "{typography.data-label}"
    rounded: "{rounded.none}"
    padding: "8px 12px"
  text-input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "12px 0px"
    height: "44px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "24px 26px"
---

## Overview

McLaren's marketing site treats woven carbon fibre as the hero canvas. **Material as voltage.** The above-fold plate is a full-bleed photograph of carbon herringbone twill, lit so the diagonal weave catches a cool blue rim-light, with the silver chrome McLaren swoosh embedded in the laminate as if it had been pressed into the composite. The wordmark sits flush top-right, the uppercase nav (Home, Racing, Automotive, Golf, Corporate, Careers, Store) sits dead-centre with a 2px under-bar marking the active item, and the only two primary CTAs are flat papaya-orange rectangles labelled "Racing" and "Automotive." Where Ferrari fills its hero with brand red as a colour wash, and where Pagani refuses brand colour entirely, McLaren puts the brand material under the camera and reserves the brand colour for exactly two clickable chips.

The orange voltage is **three-grade**, not single. The captured palette holds papaya `{colors.primary}` (#ff8000, the CTA fill), splash-yellow `{colors.secondary}` (#ff9e1b, the active-state and footer marker), and fuzzy-peach `{colors.tertiary}` (#ffbe8c, the hover and focus tint). The grades sit close enough on the warm-orange axis to read as a family rather than as separate accents — a continuous voltage band rather than three competing chips. Around them, the chrome stays pure: pure-black canvas (`{colors.canvas}` — #000000) at the hero, pure-white ink (`{colors.ink}` — #ffffff) on the wordmark and nav-active, a 12-occurrence ink-muted (`{colors.ink-muted}` — #53565a) for inactive nav, and a 329-occurrence cool-grey hairline (`{colors.hairline}` — #e5e7eb) carrying every border the page declares. Two near-black gradient stops (#282828) handle subtle metallic shading where the carbon plate transitions into the page floor.

**Chamfer, not radius.** The CSS exposes a `chamfer` family (xs 3px, sm 6px, md 12px, lg 18px, xl 46px) instead of a conventional `border-radius` scale. Chamfer in this vocabulary is a clip-path cut — a 45-degree angled corner rather than a bent curve — and it mirrors the geometry of carbon-fibre composite panel edges and aero surfaces on the F1 cars. On the captured homepage every surface renders at 0px corners; the chamfer treatment lives deeper in the product configurators and Racing-team pages this extraction does not reach. The two papaya CTAs sit as hard rectangles with no rounding and no chamfer — the most uncompromising button geometry in the directory.

**Key Characteristics:**
- Three-grade papaya voltage — `{colors.primary}` (#ff8000) on CTAs, `{colors.secondary}` (#ff9e1b) on active-states, `{colors.tertiary}` (#ffbe8c) on hover tints.
- Woven-carbon hero photograph instead of a flat brand canvas — the material does what brand colour does on every peer site in the category.
- Two-button homepage — the only primary actions above the fold are "Racing" and "Automotive," side-by-side, zero radius, identical dimensions.
- Custom mclStandardRegular family across nav and chrome, with mclStandardMedium and mclStandardBold available; fallbacks declared explicitly as `mclStandardRegular Fallback`.
- Noto Sans at 12px / 500 with 2px tracking carries every button label — the small-caps button is the most repeatable type moment in the system.
- Chamfer-vocabulary CSS variables (3 / 6 / 12 / 18 / 46px) instead of radius — declared as a corner-cutting clip-path rather than as a soft bend.
- Hairline-dominant border budget — `{colors.hairline}` (#e5e7eb) carries 329 of the captured 329 border occurrences. The system is mono-hairline.
- 12px is the dominant spacing module — appearing 20 times in the captured page, with 8px as the secondary grid step.
- Anniversary-ring footer — the McLaren Racing logo sits at the centre of an orbit of championship years rather than inside a conventional sitemap grid.

## Colors

### Brand

- **Papaya** (`{colors.primary}` — #ff8000): frequency 4 — used as background (4), text (0), border (0). The brand voltage. The CTA-fill colour on the two homepage rectangles and a single category-strip emphasis chip. Wired in CSS as `--papaya` (with a paint-match external value `--papaya-external` at #f96800 for partner co-branding). Used as fill only — never as text or border, never as outline.
- **Splash Yellow** (`{colors.secondary}` — #ff9e1b): frequency 2 — used as background (2). The secondary orange grade, wired as `--splash-yellow`. Sits on the small marker chip beside the "McLaren Racing @2026" footer line and on the active-state of the Racing CTA after press.
- **Fuzzy Peach** (`{colors.tertiary}` — #ffbe8c): frequency 2 — used as background (2). The lightest orange grade, wired as `--fuzzy-peach`. Reserved for hover and focus tints on chrome that needs to read warm without committing to the full papaya voltage.

### Surface

- **Canvas** (`{colors.canvas}` — #000000): frequency 270 — used as text (250), background (7), shadow (1), gradient (12). The dominant ink for body text below the fold and the hero floor for the carbon-fibre plate above. Pure pixel-black; the carbon photograph needs maximum contrast for the silver chrome swoosh to read as embedded in the weave rather than as floating on top of it.
- **Surface-1** (`{colors.surface-1}` — #282828): frequency 2, both inside gradients. A near-black tone used as a gradient end-stop where the carbon plate transitions to the page floor; never used as a flat fill.
- **Surface-2** (`{colors.surface-2}` — #f1f1f1): frequency 2 — used as text (1), gradient (1). The off-white footer canvas, wired as `--mono-light-grey`. The only place below the fold that the page breaks from the dark above-fold treatment.

### Text

- **Ink** (`{colors.ink}` — #ffffff): frequency 57 — used as text (49), background (8). The wordmark, nav-active labels, hero overlays, and small inverse-button text. Wired as `--mono-white` and `--tw-ring-offset-color`.
- **Ink Muted** (`{colors.ink-muted}` — #53565a): frequency 12 — used as text (12). The inactive nav-link tone, wired as `--anthracite`. Reads as a quiet grey on the dark canvas without going invisible.
- **Ink Soft** (`{colors.ink-soft}` — #787878): frequency 8 — used as text (8). A secondary muted grey for sub-labels and tertiary text, wired as `--dark-grey`.
- **Ink Fade** (`{colors.ink-fade}` — #c9c9c9): frequency 1. The lightest of the grey-text tones, wired as `--mono-grey`. Used for very low-priority labels (placeholder text, disabled affordances).

### Hairlines

- **Hairline** (`{colors.hairline}` — #e5e7eb): frequency 329 — used as border (329). The dominant border tone, carrying every captured border occurrence. Tailwind's default cool-grey 200. Outlines cards, dividers below the nav, footer-link separators, and form-field rules.

## Typography

### Font Families

The system runs three voices: **mclStandard** (custom proprietary, three weights — Regular, Medium, Bold) for the chrome and headlines, **Noto Sans** (open-source) for buttons, captions, and the categorical strip, and **Space Grotesk** for a single data-label moment. Fallbacks are declared explicitly as `"mclStandardRegular Fallback"`, `"Noto Sans Fallback"`, `"Space Grotesk Fallback"`, then walk to `ui-sans-serif, system-ui, sans-serif`.

The pairing — proprietary sans for chrome, Noto Sans for actionable labels — divides labour by mechanic: mclStandard speaks brand voice, Noto Sans speaks function. The 2px letter-spacing on Noto Sans button labels is the system's most identifiable type signature; it appears on every CTA across the site.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-md}` | 25px | 400 | 37.5px | 0 | Section display below the fold (mclStandardRegular) |
| `{typography.heading-md}` | 20px | 400 | 24px | 0 | h2 / section headlines |
| `{typography.heading-sm}` | 18px | 400 | 27.9px | 2px | Active nav link / uppercase chrome accent |
| `{typography.body-lg}` | 16px | 400 | 24px | 0 | Default running text |
| `{typography.body-md}` | 16px | 400 | 20px | 0 | Compact body block |
| `{typography.body-sm}` | 14px | 400 | 14px | 0 | Small label rows |
| `{typography.body-medium}` | 16px | 500 | 20px | 0 | Emphasis weight (mclStandardMedium) |
| `{typography.body-bold}` | 16px | 400 | 24px | 0 | Heavy emphasis (mclStandardBold) |
| `{typography.body-emphasis}` | 16px | 500 | 24px | 0 | Inline emphasis spans |
| `{typography.nav-link}` | 14px | 400 | 24px | 0 | Top-nav inactive labels (Noto Sans) |
| `{typography.button-md}` | 12px | 400 | 15.96px | 2px | CTA labels — the signature small-caps button |
| `{typography.button-active}` | 12px | 500 | 18px | 2px | CTA label, active / pressed state |
| `{typography.caption}` | 12px | 400 | 16px | 0 | Footer attribution, fine-print captions |
| `{typography.data-label}` | 15px | 700 | 16px | 0 | Category-strip data-label (Space Grotesk) |
| `{typography.body-data}` | 25px | 400 | 37.5px | 0 | Numerical readouts (Noto Sans) |

### Principles

Chrome stays at weight 400 across mclStandardRegular. Emphasis comes from switching family (Medium / Bold variants) rather than from bumping the weight value on the Regular face — `{typography.body-medium}` and `{typography.body-bold}` resolve to separate `@font-face` declarations rather than to numerical weight steps. The single 700-weight moment in the system is the Space Grotesk data-label, which is mechanically scoped to numerical readouts on category strips and never appears in chrome.

Uppercase casing appears on exactly two surfaces: `{typography.heading-sm}` (the active-nav label) and `{typography.button-md}` (the CTA label). Both run at 2px letter-spacing — the small-caps signature that ties chrome and action together. Body and headline tiers stay mixed-case at 0 tracking.

### Note on Font Substitutes

mclStandard is a licensed proprietary family. The closest open-source substitute is **Inter** at matching weights — adjust line-height to 1.5 on body sizes to match mclStandardRegular's slightly looser leading. **Söhne** (Klim Type Foundry, licensed) is closer in feel but not free. Noto Sans is already a Google Font so the button face transfers verbatim. Space Grotesk is also free on Google Fonts. The 2px tracking on Noto Sans uppercase button labels is the move to preserve, not the family.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px and 12px as the dominant working modules.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 26px · `{spacing.3xl}` 28px.
- **Dominant gap:** 12px — appearing 20 times in the captured page, with 0×12 directional padding the second most-common token (19 occurrences).
- **Top-nav padding:** 12px vertical inside the link area, 24×26 padding on the nav block.
- **CTA padding:** 20×0 — the orange rectangles take their full width from the parent container and pad only vertically, producing the flush edge-to-edge feel.
- **Footer padding:** 24×26 inside the footer block, with the anniversary ring orbiting at constant 100px radius around the McLaren Racing logo.

### Grid & Container

- **Max content width:** ~1440px at the viewport, with chrome content centred inside a ~1080px column.
- **Hero:** full-bleed carbon-fibre photograph, no max-width — the image stretches edge-to-edge of the browser.
- **CTA pair:** two equal-width papaya rectangles, ~218px each, centred horizontally beneath the McLaren swoosh embedded in the carbon plate.
- **Nav strip:** centred 7-item link cluster (Home, Racing, Automotive, Golf, Corporate, Careers, Store) with the wordmark flush right.
- **Footer:** 3-column layout — anniversary ring on the left, primary product links centre-left (Racing Careers, Sustainability, McLaren Golf, Wallpapers), policy links on the right.

### Rhythm

The page reads as **single full-bleed plate over flat utility footer**. There is no above-fold scroll narrative, no 3-up feature grid, no logo wall, no pricing strip. The carbon-fibre hero occupies the entire viewport; the footer drops cleanly to off-white below. The two-band structure (dark carbon over light grey) is the entire page architecture above the fold.

## Elevation

The system has **almost no shadow tier**. The captured page has 1 occurrence of `#000000` used as shadow ink, sitting on the small papaya marker chip beside the McLaren Racing footer line. Everywhere else, depth comes from the carbon-fibre photograph's own studio lighting, from the 12-stop black-to-dark-grey gradient inside the hero plate, and from the 329 hairline borders defining cards and dividers. There is no consistent drop-shadow tier on cards, buttons, or modals.

- **Flat (no shadow):** hero, nav, CTA pair, footer — 99% of surfaces.
- **Photographic depth:** the carbon-fibre weave catches a cool blue rim-light along the diagonal, simulating depth inside the image without any UI shadow being drawn.
- **Hairline outlines:** `{colors.hairline}` (#e5e7eb) at 329 occurrences carries the work that elevation shadows carry on a typical dashboard product.

## Shapes

The captured radius scale is **all-zero in render, chamfer-vocabulary in CSS**. Every surface in the captured page renders at 0px corners — the two CTAs, the nav block, the footer canvas, the data chip. The CSS, however, exposes a chamfer family:

- `{rounded.none}` 0px — every captured surface above the fold and in the footer.
- `{rounded.chamfer-xs}` 3px — declared as `--chamfer-xs`. Reserved for the finest cut-corner clip-path on small chips.
- `{rounded.chamfer-sm}` 6px — declared as `--chamfer-sm`. Used inside the configurator product cards (not exposed in homepage extraction).
- `{rounded.chamfer-md}` 12px — declared as `--chamfer-md`. Used on larger product cards.
- `{rounded.chamfer-lg}` 18px — declared as `--chamfer-lg`. Used on hero-tier images inside Racing pages.
- `{rounded.chamfer-xl}` 46px — declared as `--chamfer-xl`. Used as the largest chamfered surface, generally a full-bleed panel cut at the corner.

The chamfer treatment in McLaren's CSS is a clip-path angled cut rather than a `border-radius` bend — it mirrors the geometry of carbon-fibre composite panels and aero surfaces. The captured homepage uses none of them; it sits at 0px to keep the carbon-fibre photograph as the visual statement.

## Components

**`button-primary`** — Papaya `{colors.primary}` fill, black `{colors.canvas}` text, 0px corners, Noto Sans `{typography.button-md}` (12px / 400 with 2px tracking, uppercase), 20×0 padding, 53px height. "Racing" and "Automotive" are the canonical instances — both at 218px width, side-by-side, flush rectangles.

**`button-primary-hover`** — Flips fill to splash-yellow `{colors.secondary}` (#ff9e1b) with weight-500 active label. The hover/press flips the orange grade rather than darkening the existing fill.

**`button-secondary`** — Transparent fill, white text, 1px white border, 0px corners, 20×24 padding, 53px height. Used inside the Racing and Automotive pages for tertiary actions.

**`top-nav`** — Pure-black `{colors.canvas}` surface, 24×26 padding, 78px total height. The hamburger menu sits flush left; the 7-item link cluster centres in the middle; the McLaren wordmark sits flush right.

**`nav-link`** — Transparent background, ink-muted `{colors.ink-muted}` text in `{typography.body-lg}` (16px / 400), 12px padding. The inactive nav state.

**`nav-link-active`** — Transparent background, white text in `{typography.heading-sm}` (18px / 400 with 2px tracking), 12px padding, 2px papaya `{colors.primary}` bottom border as the indicator bar. The active page in the nav strip.

**`wordmark`** — White text on the transparent nav, `{typography.heading-md}` (20px / 400). Flush right at 0×24 padding. The brand mark; consistent across every page in the system.

**`hero-section`** — Pure-black `{colors.canvas}` floor with a 12-stop gradient under the carbon-fibre photograph, 0px padding, 0px corners. Holds the full-bleed weave image, the embedded chrome swoosh, and the CTA pair beneath.

**`hero-heading`** — White text on the transparent hero, `{typography.display-md}` (25px / 400). The homepage hero is image-only with no headline; on inner pages this token carries the section-display tier.

**`body-paragraph`** — Ink-muted `{colors.ink-muted}` text at `{typography.body-lg}` (16px / 400). The default running-text tier on dark surfaces.

**`card`** — Pure-black `{colors.canvas}` fill, white text, 16px padding, 0px corners, 1px hairline `{colors.hairline}` border. The default content card on inner pages.

**`data-chip`** — Off-white `{colors.surface-2}` fill, black text, `{typography.data-label}` (15px / 700 Space Grotesk), 8×12 padding, 0px corners. The category-strip data label — the only Space Grotesk surface in the system.

**`text-input`** — Transparent fill, white text, hairline `{colors.hairline}` bottom border, 12×0 padding, 44px height. Used on the contact and newsletter strips on inner pages — a single underlined line, not a boxed field.

**`footer`** — Off-white `{colors.surface-2}` (#f1f1f1) surface, ink-muted text at `{typography.body-lg}`, 24×26 padding. Three-column layout with the McLaren Racing anniversary ring on the left (championship years 1974, 1984, 1985, 1988, 1989, 1990, 1991, 1998, 2024, 2025 orbiting the logo at constant radius), the primary product link column centre-left, and the policy column on the right.

## Do's and Don'ts

**Do** treat papaya `{colors.primary}` (#ff8000) as a CTA-fill colour, not as a background wash. The brand voltage on this system is reserved for exactly two clickable rectangles on the homepage; converting it into a hero background colour collapses the carbon-fibre material into a chromatic wash and loses the brand-as-material premise.

**Do** use Noto Sans at 12px / 500 with 2px letter-spacing on every button label. The small-caps treatment is the most identifiable type moment on the page; swapping to mixed-case or dropping the tracking removes the racing-livery typographic feel.

**Do** carry the active nav state with a 2px papaya bottom border (`{component.nav-link-active}`), never with a filled pill or rounded badge. The under-bar indicator is the page's only persistent papaya accent inside the chrome — replacing it with a pill or chip dilutes the rectangle discipline.

**Do** keep the homepage above-fold to two CTAs maximum. The "Racing or Automotive" choice is the entire homepage architecture — adding a third button (Store, Golf, Careers) breaks the binary brand split and makes the page read as a navigation menu rather than as a brand statement.

**Don't** apply chamfer-xs through chamfer-xl values on the homepage CTAs or nav surfaces. The captured homepage renders every surface at 0px corners — the chamfer treatment lives on inner product configurators and category strips where the cut-corner geometry has a contextual reason. Hard rectangles on the homepage are intentional.

**Don't** use papaya `{colors.primary}` and splash-yellow `{colors.secondary}` together as a gradient or a multi-stop band. The two grades sit in the same warm-orange family on purpose, with splash-yellow as the active-state evolution of papaya — gradient-mixing them flattens the state hierarchy.

**Don't** drop the carbon-fibre photograph in favour of a flat brand-coloured hero. The system's central move is "material as voltage" — replacing the carbon plate with a flat papaya or black background fill removes the only thing carrying the brand identity above the fold.

**Don't** introduce a brand-coloured shadow tier on cards. The captured page has 1 shadow occurrence and it sits on a 12×12px marker chip — adding `0 4px 12px rgba(255,128,0,0.2)` to cards reads as decorative drop-shadow rather than as the page's actual photographic-depth language.

## Known Gaps

- **Chamfer rendering:** the CSS exposes chamfer-xs through chamfer-xl (3 / 6 / 12 / 18 / 46px) as a corner-cut clip-path vocabulary, but no captured homepage surface uses them. The chamfer treatment lives inside the Racing and Automotive product pages and configurators that this extraction does not reach.
- **Hover and focus states:** documented for `{component.button-primary-hover}` only — the full state matrix (focus rings, disabled tints, pressed states on nav and CTAs) is not exposed on the captured homepage.
- **Form input states:** `{component.text-input}` carries only the resting underlined state. Error, focus-ring, disabled, password, and select variants are not represented.
- **Dark / light variants:** the captured homepage runs dark above the fold and light in the footer. A consistent light-mode variant exists on inner Racing and Automotive pages but is not exposed in this homepage extraction.
- **Motion:** the carbon-fibre photograph carries a subtle parallax on scroll and the CTAs animate on hover, but the spec captures static end-state values only. Easing curves, duration, and parallax depth live in the live runtime.
- **Configurator and product surfaces:** this DESIGN.md captures the homepage only. The Automotive product configurators (`cars.mclaren.com`), the Racing-team microsite (`mclaren.com/racing`), and the Store (`store.mclaren.com`) carry richer token sets and component libraries that are not represented.
- **Anniversary-ring footer mechanism:** the orbit of championship years (1974, 1984, 1985, 1988, 1989, 1990, 1991, 1998, 2024, 2025) around the McLaren Racing logo renders as static text in the captured page; whether it animates or rotates in the live site is not exposed in the static extraction.