---
name: McLaren
description: "This site is a premier example of how a brand can communicate immense power and luxury through extreme visual restraint and high-quality photography."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#53565A"
  tertiary: "#FF8000"
  neutral: "#787878"
  bg-quiet: "#282828"
  muted-soft: "#F1F1F1"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: geometric-sans
    fontSize: 25px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "2px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The digital presence of a Formula 1 team and supercar manufacturer, defined by dramatic photography and surgical precision.

*A high-performance machine where every component is optimized and every surface is purposeful.*

## Colors

Monochromatic foundation (black/white) punctuated by a single, aggressive brand orange.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#53565A`)** — uses `ink-soft` token
- **Accent (`#FF8000`)** — uses `accent` token
- **Muted (`#787878`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- All navigation and section headings are set in uppercase.
- Letter spacing is increased (2px) for uppercase text elements.
- Base font size is 16px with a consistent line height of 1.5 (24px).

## Layout

Full-viewport hero images with content overlaid at the bottom.

*Rhythm:* Consistent 8px grid with generous padding (12px-26px) for interactive elements.

## Elevation & Depth

- rgba(0, 0, 0, 0.08) 0px 4px 12px 0px
- Borders: 1px solid rgb(229, 231, 235) used for subtle division and focus states.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Flat, rectangular blocks with solid brand orange background and uppercase black text.
- **card:** Minimal or absent, favoring full-width photographic compositions.
- **chip:** Simple text-based navigation links with underline indicators.
- **input:** Not prominently visible in these hero-focused sections.
- **hero:** Cinematic, edge-to-edge photography with a dark-to-light gradient overlay at the bottom.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — screenshot shows sharp, rectangular buttons and UI elements.
- Don't use multiple accent colors — screenshot shows a strict monochromatic palette with a single orange accent.
- Don't use lowercase for navigation — screenshot shows all menu items are set in uppercase.
- Don't use decorative or script fonts — screenshot shows clean, geometric sans-serif typography.
- Don't clutter the hero area with text — screenshot shows large photographic areas with minimal, well-placed text.
- Don't use drop shadows on primary elements — screenshot shows flat design with only one subtle shadow in the data.

---

## System Prompt (paste into AI agent)

```
McLaren's digital identity is a masterclass in restraint and performance aesthetics. It positions the brand at the intersection of high-end engineering and luxury lifestyle. The color palette is strictly monochromatic (black #000000, white #FFFFFF, grays #53565A, #787878) punctuated by a single, aggressive brand orange (#FF8000). Typography utilizes geometric sans-serif categories, with a strong emphasis on uppercase, letter-spaced navigation and headlines. Layouts are dominated by cinematic, full-viewport photography. Critical design constraints: NEVER use rounded corners or soft shapes. NEVER use multiple accent colors. NEVER clutter the hero with excessive text or UI components.
```