A high-performance machine where every component is optimized and every surface is purposeful.
02
Color
#FF8000Accent
#FFFFFFInk
#53565AInk soft
#000000BG
#282828BG quiet
#787878Muted
rgba(229, 231, 235, 1)Line
Monochromatic foundation (black/white) punctuated by a single, aggressive brand orange.
03
Typography
geometric-sans
display56px · 500
heading25px · 400
body16px · 400
caption12px · 400
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).
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 8px grid with generous padding (12px-26px) for interactive elements.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid rgb(229, 231, 235) used for subtle division and focus states.
rgba(0, 0, 0, 0.08) 0px 4px 12px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-viewport hero images with content overlaid at the bottom.
07
Motion & Interaction
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle transform transitions on hover for interactive elements. · Smooth color and background-color transitions for state changes.
Subtle visual feedback via color transitions or transforms. · Immediate response with standard cursor pointer indication.
08
Components
buttonFlat, rectangular blocks with solid brand orange background and uppercase black text.
cardMinimal or absent, favoring full-width photographic compositions.
chipSimple text-based navigation links with underline indicators.
inputNot prominently visible in these hero-focused sections.
heroCinematic, edge-to-edge photography with a dark-to-light gradient overlay at the bottom.
09
Voice & Don'ts
ToneAuthoritative, sophisticated, and performance-driven.
HeadlinesBold, uppercase, and concise, often using high contrast against dark backgrounds.
CTAsDirect and functional, using solid blocks of brand color with uppercase text.
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.
Captured from the live site · real computed styles
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
