A luxury automotive showroom showcasing high-performance vehicles through dramatic photography.
02
Color
#1C69D4Accent
#414141Ink
#ffffffBG
#727171Muted
rgba(65, 65, 65, 0.2)Line
Minimalist palette anchored by deep charcoal and crisp white, punctuated by a singular BMW blue accent for actions.
03
Typography
grotesque-sans
display56px · 300
headline35px · 300
body18px · 300
small15px · 300
caption12px · 300
Headlines use light weight (300) for an elegant, premium feel. · Button text uses medium weight (500) for clear call-to-action emphasis. · Tight negative letter-spacing on large display type for visual density. · Body text maintains generous line-height (1.5-1.6) for comfortable reading.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
8px grid system with generous horizontal padding (96px on desktop hero sections) for breathing room.
05
Surfaces
sm · 0px
md · 2px
lg · 5px
pill · 999px
Thin 1px borders in muted charcoal (#414141) for subtle separation, no heavy outlines.
Full-bleed hero imagery with left-aligned text overlays, transitioning to centered white content sections below.
07
Motion & Interaction
100msmicro
200mssmall
500msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
Quick 0.1s color transitions on interactive elements for responsive feedback. · Smooth 0.5s opacity fade-ins for content reveals. · Subtle width and position transitions for expandable navigation elements.
Immediate color change on text links and buttons, subtle opacity shifts on imagery. · Clean state transitions without heavy scale or transform effects.
08
Components
buttonSolid blue (#1C69D4) filled buttons with white text and sharp corners; ghost/outline variants for secondary actions.
cardImage-heavy editorial cards with minimal chrome, focusing on high-quality automotive photography.
chipSimple text-based navigation chips with underline indicators, no pill-shaped containers.
inputClean minimal inputs with thin bottom borders, consistent with the restrained design language.
heroFull-viewport photographic backgrounds with gradient overlays ensuring text legibility on dark imagery.
09
Voice & Don'ts
ToneConfident, premium, and informative without being pushy.
HeadlinesAll-caps display type with periods for declarative statements (e.g., 'LEASE THE 2026 BMW X5 xDRIVE40i.')
CTAsDirect action verbs ('Learn more', 'Offer details', 'See all offers') in sentence case on blue buttons.
don't use rounded corners on primary buttons — screenshot shows sharp 0-2px radius instead
don't add decorative gradients or patterns — screenshot shows flat photographic heroes with subtle dark overlays
Captured from the live site · real computed styles
11
System prompt
BMW.com is a premium automotive brand website featuring dramatic full-viewport photography paired with restrained, elegant typography. The design uses a light grotesque-sans typeface (bmwTypeNextWeb) at predominantly light weight (300) for headlines, creating a luxurious feel. The color palette is minimal: white (#FFFFFF) backgrounds, charcoal ink (#414141), and a single BMW blue accent (#1C69D4) for calls-to-action. Key hex colors include the blue accent, white backgrounds, and charcoal (#262626) for dark overlays. Hero sections use full-bleed automotive photography with gradient overlays for text legibility. Critical donts: never use rounded button corners (keep sharp/square), never add multiple accent colors (blue is the only chromatic element), and never use heavy font weights for headlines (always light/300). The layout transitions from dramatic dark photographic heroes to clean white content sections. Navigation is minimal with clean horizontal links and dropdown chevrons.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
