McLaren Design System

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.