# Mercedes-Benz — DESIGN.md

## Overview
Mercedes-Benz is the Stuttgart luxury automotive house whose brand language has been the engineering-to-art template for a century. Canvas is graphite-cool dark (`#1a1d24`) on flagship product pages, or warm cream-white on heritage and editorial pages. Type runs Corporate A — the proprietary Mercedes grotesk — at every text tier, paired with the iconic three-pointed-star mark. The signature is the three-pointed star itself, treated with absolute discipline: chrome silver on dark backgrounds, ink on light. Photography is studio-grade luxury: S-Class sedans under dramatic side-light, EQ-line electric vehicles in architectural settings, AMG performance cars on race tracks. The voice is 'Das Beste oder nichts' — the best or nothing — translated as quiet engineering confidence, never bombast.

## Color
- **Primary (EQ blue):** `#00adef` — Electric-line accent, EQ sub-brand only
- **Canvas:** `#1a1d24` — Graphite-cool dark (flagship product pages)
- **Canvas light:** `#ffffff` — Warm cream-white (heritage and editorial pages)
- **Ink (light mode):** `#1a1d24`
- **Ink (dark mode):** `#ffffff`
- **Accent (chrome silver):** `#c0c0c0` — Three-pointed-star mark on dark
- **Body (dark mode):** `#c8ccd1`
- **Muted:** `#7d8390`
- **Hairlines:** `rgba(255,255,255,0.10)` on dark; `rgba(26,29,36,0.10)` on light

## Typography
- **Display:** Corporate A, weight 700, 48–80px hero
- **Sub-display:** Corporate A, weight 600, 24–32px section heads
- **Body:** Corporate A, weight 400, 16–17px, 1.6 line-height
- **Caption:** weight 500, 13–14px metadata
- **Mono:** none

## Spacing & rhythm
8-base (8/16/24/32/48/64/96/128). Section padding 96–128px. Configurator pages widen to full viewport with the vehicle rendered at center. Heritage pages use ~720px essay column for long-form copy.

## Motion signature
Cinematic luxury. Hero videos auto-play silent with slow tracking shots — S-Class sedans gliding past architecture, EQ-line vehicles in showroom-light. Cross-fades 1.5s. The three-pointed-star mark spins slowly (~6s loop) on configurator pages as a brand-affirmation motif. Hover transitions are subtle — opacity changes, never scale lift.

## Components observed
- `cinematic-vehicle-hero` — full-bleed product video on graphite canvas
- `three-pointed-star-mark` — chrome silver star, slow rotation on configurator
- `configurator-3d-rotate` — vehicle 3D viewer with 360 rotation
- `model-class-tier-card` — S-Class / E-Class / C-Class hierarchy card
- `amg-performance-callout` — AMG sub-brand red-trim hero
- `eq-electric-sub-brand-page` — EQ-blue accent for electric line
- `button-primary-thin-rule-dark` — hairline-outlined CTA on dark
- `footer-stuttgart-corporate` — multi-language corporate footer

## Trademark signals
- Three-pointed star mark — the most-recognized automotive logo on the planet — chrome silver on dark, ink-on-light, never tinted, never restyled
- Mercedes blue (`#00adef`) — electric-line accent reserved for EQ sub-brand pages and EV configurator highlights
- Dual canvas — graphite-cool dark for flagship product, warm cream-white for heritage and corporate editorial — the brand chooses canvas by content type, never mixes within a page
- Cinematic studio photography — S-Class sedans under dramatic side-light, EQ vehicles in architectural settings, AMG cars on race tracks — never lifestyle staging with families
- Corporate A grotesk at every tier — refusing the serif-luxury convention of Rolls-Royce or Bentley

## What they DON'T do
- No tinting the three-pointed star — chrome silver on dark, ink on light
- No painting AMG pages in EQ blue — the Mercedes blue is reserved for EQ sub-brand only
- No fashion-serif substitution for Corporate A — the grotesk IS the engineering voice
- No vehicles with people inside — Mercedes hero photography is product-led with empty cabins
- No stripping the chrome on the wordmark — the 'Mercedes-Benz' wordmark with dotted-rule between words is the recognized lockup
- No emoji, no playful illustration, no warm-pastel palette

## Exemplar pages
- https://mercedes-benz.com/
- https://mercedes-benz.com/en
- https://mercedes-benz.com/eq
- https://mercedes-amg.com

## When to reference
Reach for Mercedes-Benz when the user wants German-engineering luxury with restrained grotesk discipline — premium automotive, industrial design retail, B2B enterprise brands that need to project century-old institution. The "graphite canvas + chrome three-pointed star + Corporate A at every tier + cinematic studio photography" combination is the most-copyable Mercedes move. Pairs well with brands that want engineering credibility without Ferrari/Rolls-Royce romanticism.
