# McLaren · Design system migration spec

> Source: https://www.mclaren.com  ·  Curated by OpenDesign  ·  en

> This site is a premier example of how a brand can communicate immense power and luxury through extreme visual restraint and high-quality photography.

## 1. Identity DNA

The digital presence of McLaren operates with the logic of a high-performance machine, where every component is optimized and every surface is purposeful. This is a system defined not by embellishment, but by dramatic photography and surgical precision.

**One-liner:** The digital presence of a Formula 1 team and supercar manufacturer, defined by dramatic photography and surgical precision.
**Keywords:** Performance · Engineering · Luxury · Speed · Precision
**Analogy:** A high-performance machine where every component is optimized and every surface is purposeful.

## 2. Color

The palette is a high-contrast, monochromatic foundation of deep blacks and crisp whites, electrified by a singular, high-chroma McLaren orange accent. This strict discipline ensures the brand color is never diluted, acting as a focused signal of performance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-quiet` | `#282828` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#53565A` | secondary text |
| `--muted` | `#787878` | placeholder |
| `--muted-soft` | `#F1F1F1` | weak hint |
| `--accent` | `#FF8000` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

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

The principle is one of extreme visual restraint, allowing the monochrome to frame the content and the single accent to command attention.

## 3. Typography

Typography is set in a clean, geometric sans-serif, with navigation and section headings consistently rendered in uppercase. This typographic voice is authoritative and performance-driven, using increased letter spacing to reinforce a sense of engineered clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headlines and section titles |
| heading | 25px | 1.5 | 400 | 2px | Subheadings and navigation links |
| body | 16px | 1.5 | 400 | 0px | Primary body text and UI elements |
| caption | 12px | 1.33 | 400 | 0px | Small labels and auxiliary text |

**Type rules:**
- 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).

## 4. Spacing

A consistent 8px grid establishes the underlying rhythm, providing a measurable foundation for the system's structured generosity in interactive padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 8px grid with generous padding (12px-26px) for interactive elements.

## 5. Surfaces

Depth is articulated with deliberate subtlety, using a single, faint shadow specification and thin, light borders. These elements provide quiet division and focus states without disrupting the dominant flat, graphic quality of the surfaces.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - rgba(0, 0, 0, 0.08) 0px 4px 12px 0px
- **Borders:** 1px solid rgb(229, 231, 235) used for subtle division and focus states.

## 6. Layout

The layout skeleton is built around full-viewport, image-first compositions. Content and navigation are surgically overlaid, typically at the bottom of the frame, ensuring they do not distract from the visual narrative.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is minimal and functional, reflecting engineering precision over decorative effect. Subtle transform and color transitions, governed by a standard easing curve, provide a sense of refined responsiveness.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle transform transitions on hover for interactive elements.
  - Smooth color and background-color transitions for state changes.

- **Hover:** Subtle visual feedback via color transitions or transforms.
- **Click:** Immediate response with standard cursor pointer indication.
- **Transition:** 0.2s to 0.3s cubic-bezier(0.4, 0, 0.2, 1) for all interactive state changes.
- **Keyboard:** Standard focus management with visible focus indicators implied by border styles.

## 8. Voice & Don'ts

The editorial voice is concise and direct, with bold, uppercase headlines that assert authority against dark backgrounds. Calls-to-action are functional, using solid blocks of brand color to direct the user with purpose.

- **Tone:** Authoritative, sophisticated, and performance-driven.
- **Headline style:** Bold, uppercase, and concise, often using high contrast against dark backgrounds.
- **CTA style:** Direct and functional, using solid blocks of brand color with uppercase text.
- **Avoid:** Playful or whimsical language / Rounded corners or soft shapes / Busy or cluttered layouts

### Don'ts
- ❌ 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.

The system deliberately rejects rounded corners, multiple accent colors, and cluttered layouts, understanding that its power comes from discipline.

## System Prompt (paste into AI tool)

```
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.
```
