Mercedes-Benz
MIT
Luxe, minimalist design system with sharp black-and-white contrast and serif typography, crafted for premium automotive and lifestyle brands
Layout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install mercedes-benz# layout.md — Mercedes-Benz Design System
> **Token source:** reconstructed-from-computed | **Confidence:** low | **CSS custom properties found:** 0
> All tokens are synthesised from computed styles and annotated accordingly.
---
## 0. Quick Reference
**Stack:** HTML/CSS · Token source: reconstructed-from-computed · Styling approach: semantic CSS custom properties synthesised from computed styles.
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── Mercedes-Benz Core Tokens ── */
/* Typography */
--mercedes-benz-font-size-xs: 16px; /* Body/base text size */
--mercedes-benz-font-size-sm: 32px; /* H1 heading size */
--mercedes-benz-font-weight-regular: 400; /* Body weight */
--mercedes-benz-font-weight-medium: 700; /* Heading weight */
--mercedes-benz-font-family-base: "Times New Roman", Times, serif; /* Brand serif */
/* Colour (reconstructed) */
--mercedes-benz-color-text: #000000; /* Primary text */
--mercedes-benz-color-bg: #ffffff; /* Page background */
--mercedes-benz-color-surface: #f4f4f4; /* Subtle surface/card */
--mercedes-benz-color-border: #cccccc; /* Dividers, outlines */
--mercedes-benz-color-action: #000000; /* Primary CTA/button */
--mercedes-benz-color-action-fg: #ffffff; /* Text on primary CTA */
/* Spacing (8px grid, reconstructed) */
--mercedes-benz-space-xs: 8px;
--mercedes-benz-space-sm: 16px;
--mercedes-benz-space-md: 24px;
--mercedes-benz-space-lg: 32px;
--mercedes-benz-space-xl: 48px;
--mercedes-benz-space-2xl: 64px;
```
```tsx
// Primary Button — correct token usage
const PrimaryButton = ({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) => (
<button
style={{
backgroundColor: disabled ? 'var(--mercedes-benz-color-border)' : 'var(--mercedes-benz-color-action)',
color: 'var(--mercedes-benz-color-action-fg)',
fontFamily: 'var(--mercedes-benz-font-family-base)',
fontSize: 'var(--mercedes-benz-font-size-xs)',
fontWeight: 'var(--mercedes-benz-font-weight-medium)',
padding: 'var(--mercedes-benz-space-xs) var(--mercedes-benz-space-md)',
border: 'none',
borderRadius: '0px',
cursor: disabled ? 'not-allowed' : 'pointer',
letterSpacing: '0.08em',
textTransform: 'uppercase',
}}
disabled={disabled}
>
{children}
</button>
);
```
**NEVER rules:**
- NEVER use `border-radius > 0px` on primary buttons — Mercedes-Benz uses sharp, rectilinear geometry
- NEVER substitute `Inter`, `Roboto`, or `Arial` — the brand serif is `"Times New Roman"`
- NEVER hardcode `#000000` directly — always use `var(--mercedes-benz-color-text)` or `var(--mercedes-benz-color-action)`
- NEVER use spacing values outside the 8px grid (e.g. 10px, 15px, 22px)
- NEVER use `font-weight: 300` or lighter — minimum weight is `400`
- NEVER use warm accent colours (orange, red) — the palette is monochromatic black/white
> Full design system → see **layout.md**
---
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
Mercedes-Benz embodies **precision, restraint, and authoritative luxury**. The visual language is monochromatic — high-contrast black on white — with a classical serif typographic foundation that signals heritage and craftsmanship. Every design decision leans toward reduction: remove decoration, retain structure.
### Mood
- **Cool, confident, minimal.** Nothing competes for attention that shouldn't.
- **Typographic-led.** The serif face (`Times New Roman`) carries the brand voice; it is not a fallback — it is the statement.
- **Rectilinear.** Sharp corners on all interactive elements reinforce precision engineering.
### What This Design Explicitly Rejects
- ❌ Rounded or pill-shaped buttons
- ❌ Warm colour palettes (no orange, yellow, terracotta)
- ❌ Sans-serif body text (the brand uses serif at all sizes)
- ❌ Drop shadows or heavy elevation cues
- ❌ Gradient backgrounds or fills
- ❌ Decorative illustration or playful iconography
- ❌ Dense, cluttered layouts — whitespace is a primary design element
### Design Philosophy Summary
> **Less surface, more presence.** The Mercedes-Benz aesthetic is built on restraint — monochrome, serif, angular. Any deviation toward softness, warmth, or decoration violates brand intent.
---
## 2. Colour System
> **Token source:** reconstructed-from-computed | All tokens marked `/* reconstructed */`
### Tier 1 — Primitive Values
```css
/* ── Primitive colour palette ── */
--primitive-black: #000000; /* Pure black — extracted from computed color: rgb(0,0,0) */ /* reconstructed */
--primitive-white: #ffffff; /* Pure white — page background */ /* reconstructed */
--primitive-grey-100: #f4f4f4; /* Near-white surface — inferred from luxury brand conventions */ /* reconstructed: low confidence */
--primitive-grey-300: #cccccc; /* Mid-grey — borders, dividers */ /* reconstructed: low confidence */
--primitive-grey-600: #666666; /* Subdued text — secondary/caption level */ /* reconstructed: low confidence */
--primitive-grey-800: #333333; /* Dark grey — alternative dark surface */ /* reconstructed: low confidence */
```
### Tier 2 — Semantic Aliases
```css
/* ── Semantic colour tokens ── */
--mercedes-benz-color-text: var(--primitive-black); /* Primary body & heading text */ /* reconstructed */
--mercedes-benz-color-text-secondary: var(--primitive-grey-600); /* Captions, metadata, secondary labels */ /* reconstructed: low confidence */
--mercedes-benz-color-bg: var(--primitive-white); /* Page/document background */ /* reconstructed */
--mercedes-benz-color-surface: var(--primitive-grey-100); /* Card, panel, subtle section backgrounds */ /* reconstructed: low confidence */
--mercedes-benz-color-border: var(--primitive-grey-300); /* Dividers, input outlines, rule lines */ /* reconstructed: low confidence */
--mercedes-benz-color-action: var(--primitive-black); /* Primary CTA background */ /* reconstructed */
--mercedes-benz-color-action-fg: var(--primitive-white); /* Text/icon colour on dark CTA */ /* reconstructed */
--mercedes-benz-color-action-hover: var(--primitive-grey-800); /* CTA hover state — darkened surface */ /* reconstructed: low confidence */
--mercedes-benz-color-disabled: var(--primitive-grey-300); /* Disabled interactive element fill */ /* reconstructed: low confidence */
--mercedes-benz-color-disabled-fg: var(--primitive-grey-600); /* Disabled text */ /* reconstructed: low confidence */
```
### Tier 3 — Component Tokens
```css
/* ── Component-level colour applications ── */
--mercedes-benz-button-bg: var(--mercedes-benz-color-action); /* Primary button background */
--mercedes-benz-button-fg: var(--mercedes-benz-color-action-fg); /* Primary button label */
--mercedes-benz-button-bg-hover: var(--mercedes-benz-color-action-hover); /* Primary button hover */
--mercedes-benz-button-bg-disabled: var(--mercedes-benz-color-disabled); /* Primary button disabled */
--mercedes-benz-button-fg-disabled: var(--mercedes-benz-color-disabled-fg); /* Primary button disabled label */
--mercedes-benz-input-border: var(--mercedes-benz-color-border); /* Form input border */
--mercedes-benz-input-border-focus: var(--mercedes-benz-color-action); /* Input focused border */
--mercedes-benz-nav-bg: var(--mercedes-benz-color-bg); /* Navigation background */
--mercedes-benz-nav-text: var(--mercedes-benz-color-text); /* Navigation link colour */
```
### Colour Palette Table
| Token | Value | Usage |
|---|---|---|
| `--primitive-black` | `#000000` | Text, CTA, borders |
| `--primitive-white` | `#ffffff` | Background, CTA label |
| `--primitive-grey-100` | `#f4f4f4` | Surface / subtle bg |
| `--primitive-grey-300` | `#cccccc` | Dividers, disabled |
| `--primitive-grey-600` | `#666666` | Secondary text |
| `--primitive-grey-800` | `#333333` | Hover states |
> **No accent colours.** This palette is strictly monochromatic. Never introduce colour outside this greyscale range.
---
## 3. Typography System
> **Font declared:** `"Times New Roman"` (weight 400, style normal, display swap)
> All composite groups reconstructed from computed styles.
```css
/* ── Font stack ── */
--mercedes-benz-font-family-base: "Times New Roman", Times, serif; /* Primary brand typeface — extracted: high confidence */
/* ── Weight scale ── */
--mercedes-benz-font-weight-regular: 400; /* Body, captions, secondary — extracted: high confidence */
--mercedes-benz-font-weight-medium: 700; /* Headings, CTAs, emphasis — extracted: high confidence */
/* NOTE: No light (300) or extra-bold (900) weights observed */
```
### Composite Typography Groups
```css
/* ── Text Style: Heading / H1 ── */
/* Usage: Page titles, section hero headings */
.type-heading-h1 {
font-family: var(--mercedes-benz-font-family-base); /* "Times New Roman", Times, serif */
font-size: var(--mercedes-benz-font-size-sm); /* 32px — extracted: high confidence */
font-weight: var(--mercedes-benz-font-weight-medium); /* 700 — extracted: high confidence */
line-height: 1.2; /* reconstructed: moderate confidence, inferred from serif heading norms */
letter-spacing: 0.02em; /* reconstructed: low confidence */
text-transform: none;
color: var(--mercedes-benz-color-text);
}
/* ── Text Style: Body / Base ── */
/* Usage: Paragraphs, descriptions, UI labels */
.type-body {
font-family: var(--mercedes-benz-font-family-base); /* "Times New Roman", Times, serif */
font-size: var(--mercedes-benz-font-size-xs); /* 16px — extracted: high confidence */
font-weight: var(--mercedes-benz-font-weight-regular); /* 400 — extracted: high confidence */
line-height: 1.6; /* reconstructed: moderate confidence, standard for serif body */
letter-spacing: normal;
text-transform: none;
color: var(--mercedes-benz-color-text);
}
/* ── Text Style: Label / CTA ── */
/* Usage: Button text, navigation items, form labels */
.type-label {
font-family: var(--mercedes-benz-font-family-base); /* "Times New Roman", Times, serif */
font-size: var(--mercedes-benz-font-size-xs); /* 16px — reconstructed: moderate confidence */
font-weight: var(--mercedes-benz-font-weight-medium); /* 700 — reconstructed: moderate confidence */
line-height: 1.2; /* reconstructed: moderate confidence */
letter-spacing: 0.08em; /* reconstructed: moderate confidence — luxury brands use tracked uppercase labels */
text-transform: uppercase; /* reconstructed: moderate confidence */
color: var(--mercedes-benz-color-text);
}
/* ── Text Style: Caption / Secondary ── */
/* Usage: Metadata, footnotes, image captions */
.type-caption {
font-family: var(--mercedes-benz-font-family-base); /* "Times New Roman", Times, serif */
font-size: 12px; /* reconstructed: low confidence — below xs, inferred */
font-weight: var(--mercedes-benz-font-weight-regular); /* 400 */
line-height: 1.4; /* reconstructed: low confidence */
letter-spacing: normal;
text-transform: none;
color: var(--mercedes-benz-color-text-secondary);
}
```
### Typography Pairing Rules
- **H1 always pairs with body copy** — never use H1 in isolation without a supporting paragraph or subheading
- **Labels are always uppercase + tracked** (`letter-spacing: 0.08em`) — this is non-negotiable for CTAs and nav items
- **NEVER mix font families** — `"Times New Roman"` is the sole typeface at all levels
- **Weight contrast is binary**: 400 for reading, 700 for emphasis — no intermediate weights
---
## 4. Spacing & Layout
> **Base unit:** 8px grid (reconstructed from body `margin: 16px 0px` and H1 `margin: 21.44px 0px`)
> All spacing tokens are reconstructed.
```css
/* ── Spacing scale (8px base grid) ── */
--mercedes-benz-space-2xs: 4px; /* Micro gaps — icon padding, tight list spacing */ /* reconstructed */
--mercedes-benz-space-xs: 8px; /* Compact padding — badge, tag, inline elements */ /* reconstructed */
--mercedes-benz-space-sm: 16px; /* Body margin rhythm — matches body margin: 16px */ /* reconstructed: high confidence */
--mercedes-benz-space-md: 24px; /* Component internal padding — cards, inputs */ /* reconstructed */
--mercedes-benz-space-lg: 32px; /* Section internal spacing — matches H1 margin ~21px, rounds to 32 */ /* reconstructed: moderate confidence */
--mercedes-benz-space-xl: 48px; /* Between components in a section */ /* reconstructed */
--mercedes-benz-space-2xl: 64px; /* Between major sections */ /* reconstructed */
--mercedes-benz-space-3xl: 96px; /* Full-bleed section vertical padding */ /* reconstructed: low confidence */
/* ── Layout grid ── */
--mercedes-benz-grid-columns: 12; /* Standard 12-col grid */ /* reconstructed: low confidence */
--mercedes-benz-grid-gutter: 24px; /* Column gutter */ /* reconstructed: low confidence */
--mercedes-benz-container-max: 1440px; /* Maximum content container width */ /* reconstructed: low confidence */
--mercedes-benz-container-padding: 48px; /* Horizontal page margin at desktop */ /* reconstructed: low confidence */
/* ── Breakpoints ── */
--mercedes-benz-bp-sm: 640px; /* Small mobile threshold */ /* reconstructed: low confidence */
--mercedes-benz-bp-md: 768px; /* Tablet threshold */ /* reconstructed: low confidence */
--mercedes-benz-bp-lg: 1024px; /* Desktop threshold */ /* reconstructed: low confidence */
--mercedes-benz-bp-xl: 1280px; /* Wide desktop */ /* reconstructed: low confidence */
--mercedes-benz-bp-2xl: 1440px; /* Ultra-wide / max container */ /* reconstructed: low confidence */
```
### Layout Decision Rules
| Scenario | Use |
|---|---|
| Navigation items in a row | `display: flex; flex-direction: row; gap: var(--mercedes-benz-space-lg)` |
| Card grid (3–4 columns) | `display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--mercedes-benz-space-md)` |
| Hero section centred text | `display: flex; flex-direction: column; align-items: center; text-align: center` |
| Two-column content + image | `display: grid; grid-template-columns: 1fr 1fr; gap: var(--mercedes-benz-space-2xl)` |
| Full-bleed section | `width: 100%; padding: var(--mercedes-benz-space-3xl) var(--mercedes-benz-container-padding)` |
---
## 5. Page Structure & Layout Patterns
> **Data source:** Layout digest only. No screenshots available.
> Rows marked **(inferred)** are not visually confirmed — they are inferred from component inventory, typographic hierarchy (`h1: 32px 700, body: 16px 400`), and luxury automotive brand conventions.
> **Note:** The extraction captured an "Access Denied" error page, not the live mercedes-benz.com homepage. The section map below reflects the *intended* brand site structure.
### 5.1 Section Map
| # | Section Name | Layout Type | Approx. Height | Key Elements | Source |
|---|---|---|---|---|---|
| 1 | Global Navigation | Flex row, sticky | 60–80px | Logo (left), nav links (centre), icons/CTA (right) | inferred |
| 2 | Hero / Brand Statement | Full-bleed, flex column centred | 80–100vh | Large image/video, H1 overlay, single CTA button | inferred |
| 3 | Model Configurator Entry | Grid 2–3 col | 500–700px | Model cards with image + label + CTA | inferred |
| 4 | Feature / Innovation Highlight | Alternating 2-col (text + image) | 400–600px | Body copy, subheading, supporting image | inferred |
| 5 | News / Editorial Grid | Grid 3 col | 400–600px | Article card: image + caption + date | inferred |
| 6 | Dealer / Ownership CTA | Full-width dark section | 200–300px | H1 heading, body text, 1–2 CTA buttons | inferred |
| 7 | Footer | Multi-column grid | 300–400px | Link columns, legal copy, social icons | inferred |
### 5.2 Layout Patterns
**Navigation:**
```
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 var(--mercedes-benz-container-padding);
background: var(--mercedes-benz-nav-bg); /* #ffffff */
border-bottom: 1px solid var(--mercedes-benz-color-border);
```
**Hero Section:**
```
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end; /* text sits over bottom of image */
padding: var(--mercedes-benz-space-3xl) var(--mercedes-benz-container-padding);
background-color: var(--mercedes-benz-color-text); /* dark fallback */
```
**Model Card Grid (3 columns):**
```
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--mercedes-benz-space-md); /* 24px */
max-width: var(--mercedes-benz-container-max);
margin: 0 auto;
padding: var(--mercedes-benz-space-2xl) var(--mercedes-benz-container-padding);
```
**Alternating Feature Row (text + image, 1:1):**
```
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mercedes-benz-space-2xl); /* 64px */
align-items: center;
padding: var(--mercedes-benz-space-2xl) var(--mercedes-benz-container-padding);
```
*(Reverse column order on alternate instances for visual rhythm.)*
### 5.3 Visual Hierarchy
- **Primary CTA** sits inside hero section, using `var(--mercedes-benz-color-action)` (`#000000`) background with white label text
- **H1 headings** (32px, weight 700) dominate section introductions — never competes with decorative elements
- **Whitespace is load-bearing** — section padding at `var(--mercedes-benz-space-3xl)` (96px) gives the brand its "room to breathe" character
- **Images are full-bleed** or occupy exactly 50% of a two-column layout — no constrained thumbnails at small sizes
- **Secondary CTAs** use ghost/outline style: transparent background, `1px solid var(--mercedes-benz-color-text)`, black label
### 5.4 Content Patterns
**Model Card (repeating unit):**
- Full-width image (aspect ratio ~16:9 or 4:3)
- Model name in `.type-label` (uppercase, tracked)
- Short descriptor in `.type-body`
- "Configure" or "Discover" CTA button (full-width at card level)
**Editorial / News Card:**
- Image top
- Category label (`.type-caption`, uppercase)
- Headline (`.type-heading-h1` scaled to 20–24px)
- Date in `.type-caption`
**Section Header Pattern:**
- Centred or left-aligned H1
- Supporting body paragraph max 60ch width
- CTA below, with `margin-top: var(--mercedes-benz-space-lg)`
---
## 6. Component Patterns
### 6.1 Primary Button
**Anatomy:** `<button>` → `[label text]`
**State table:**
| State | Background | Text | Border | Cursor |
|---|---|---|---|---|
| Default | `#000000` | `#ffffff` | none | pointer |
| Hover | `#333333` | `#ffffff` | none | pointer |
| Focus | `#000000` | `#ffffff` | `2px offset #000000` | pointer |
| Active | `#000000` | `#cccccc` | none | pointer |
| Disabled | `#cccccc` | `#666666` | none | not-allowed |
```tsx
import React from 'react';
type ButtonProps = {
children: React.ReactNode;
disabled?: boolean;
onClick?: () => void;
type?: 'button' | 'submit' | 'reset';
};
export const PrimaryButton: React.FC<ButtonProps> = ({
children,
disabled = false,
onClick,
type = 'button',
}) => {
const [isHovered, setIsHovered] = React.useState(false);
const [isActive, setIsActive] = React.useState(false);
return (
<button
type={type}
disabled={disabled}
onClick={onClick}
onMouseEnter={() => !disabled && setIsHovered(true)}
onMouseLeave={() => { setIsHovered(false); setIsActive(false); }}
onMouseDown={() => !disabled && setIsActive(true)}
onMouseUp={() => setIsActive(false)}
style={{
display: 'inline-block',
backgroundColor: disabled
? 'var(--mercedes-benz-color-disabled)' /* #cccccc */
: isActive
? 'var(--mercedes-benz-color-action)' /* #000000 */
: isHovered
? 'var(--mercedes-benz-color-action-hover)' /* #333333 */
: 'var(--mercedes-benz-color-action)', /* #000000 */
color: disabled
? 'var(--mercedes-benz-color-disabled-fg)' /* #666666 */
: isActive
? 'var(--mercedes-benz-color-border)' /* #cccccc */
: 'var(--mercedes-benz-color-action-fg)', /* #ffffff */
fontFamily: 'var(--mercedes-benz-font-family-base)',
fontSize: 'var(--mercedes-benz-font-size-xs)', /* 16px */
fontWeight: 'var(--mercedes-benz-font-weight-medium)', /* 700 */
letterSpacing: '0.08em',
textTransform: 'uppercase' as const,
padding: 'var(--mercedes-benz-space-xs) var(--mercedes-benz-space-md)', /* 8px 24px */
border: 'none',
borderRadius: '0px', /* NEVER rounded */
cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'background-color 0.2s ease, color 0.2s ease',
outline: 'none',
}}
onFocus={(e) => {
e.currentTarget.style.outline = '2px solid var(--mercedes-benz-color-action)';
e.currentTarget.style.outlineOffset = '2px';
}}
onBlur={(e) => {
e.currentTarget.style.outline = 'none';
}}
>
{children}
</button>
);
};
```
---
### 6.2 Ghost / Outline Button
**Anatomy:** `<button>` → `[label text]` — transparent fill, solid border
**State table:**
| State | Background | Text | Border |
|---|---|---|---|
| Default | transparent | `#000000` | `1px solid #000000` |
| Hover | `#000000` | `#ffffff` | `1px solid #000000` |
| Focus | transparent | `#000000` | `2px solid #000000` + 2px offset |
| Disabled | transparent | `#cccccc` | `1px solid #cccccc` |
```tsx
export const GhostButton: React.FC<ButtonProps> = ({ children, disabled = false, onClick, type = 'button' }) => {
const [isHovered, setIsHovered] = React.useState(false);
return (
<button
type={type}
disabled={disabled}
onClick={onClick}
onMouseEnter={() => !disabled && setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{
display: 'inline-block',
backgroundColor: isHovered && !disabled ? 'var(--mercedes-benz-color-action)' : 'transparent',
color: disabled
? 'var(--mercedes-benz-color-disabled-fg)'
: isHovered
? 'var(--mercedes-benz-color-action-fg)'
: 'var(--mercedes-benz-color-text)',
fontFamily: 'var(--mercedes-benz-font-family-base)',
fontSize: 'var(--mercedes-benz-font-size-xs)',
fontWeight: 'var(--mercedes-benz-font-weight-medium)',
letterSpacing: '0.08em',
textTransform: 'uppercase' as const,
padding: 'var(--mercedes-benz-space-xs) var(--mercedes-benz-space-md)',
border: `1px solid ${disabled ? 'var(--mercedes-benz-color-disabled)' : 'var(--mercedes-benz-color-text)'}`,
borderRadius: '0px',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'background-color 0.2s ease, color 0.2s ease',
}}
>
{children}
</button>
);
};
```
---
### 6.3 Text Input
**Anatomy:** `<div.field>` → `<label>` + `<input>` (+ optional `<span.error>`)
**State table:**
| State | Border | Background | Label colour |
|---|---|---|---|
| Default | `1px solid #cccccc` | `#ffffff` | `#000000` |
| Focus | `1px solid #000000` | `#ffffff` | `#000000` |
| Error | `1px solid #000000` | `#ffffff` | `#000000` |
| Disabled | `1px solid #cccccc` | `#f4f4f4` | `#666666` |
```tsx
type InputProps = {
id: string;
label: string;
value: string;
onChange: (v: string) => void;
error?: string;
disabled?: boolean;
};
export const TextInput: React.FC<InputProps> = ({ id, label, value, onChange, error, disabled }) => (
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--mercedes-benz-space-2xs)' }}>
<label
htmlFor={id}
style={{
fontFamily: 'var(--mercedes-benz-font-family-base)',
fontSize: 'var(--mercedes-benz-font-size-xs)',
fontWeight: 'var(--mercedes-benz-font-weight-medium)',
letterSpacing: '0.08em',
textTransform: 'uppercase',
color: disabled ? 'var(--mercedes-benz-color-disabled-fg)' : 'var(--mercedes-benz-color-text)',
}}
>
{label}
</label>
<input
id={id}
value={value}
disabled={disabled}
onChange={(e) => onChange(e.target.value)}
style={{
fontFamily: 'var(--mercedes-benz-font-family-base)',
fontSize: 'var(--mercedes-benz-font-size-xs)',
fontWeight: 'var(--mercedes-benz-font-weight-regular)',
color: 'var(--mercedes-benz-color-text)',
backgroundColor: disabled ? 'var(--mercedes-benz-color-surface)' : 'var(--mercedes-benz-color-bg)',
border: `1px solid ${error ? 'var(--mercedes-benz-color-text)' : 'var(--mercedes-benz-color-border)'}`,
borderRadius: '0px',
padding: 'var(--mercedes-benz-space-xs) var(--mercedes-benz-space-sm)',
outline: 'none',
width: '100%',
boxSizing: 'border-box' as const,
}}
onFocus={(e) => { e.currentTarget.style.borderColor = 'var(--mercedes-benz-color-action)'; }}
onBlur={(e) => { e.currentTarget.style.borderColor = error ? 'var(--mercedes-benz-color-text)' : 'var(--mercedes-benz-color-border)'; }}
/>
{error && (
<span style={{
fontFamily: 'var(--mercedes-benz-font-family-base)',
fontSize: '12px',
color: 'var(--mercedes-benz-color-text)',
marginTop: 'var(--mercedes-benz-space-2xs)',
}}>
{error}
</span>
)}
</div>
);
```
---
### 6.4 Navigation Bar
**Anatomy:** `<nav>` → `<a.logo>` + `<ul.links>` + `<div.actions>`
```tsx
export const NavBar: React.FC = () => (
<nav
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: `0 var(--mercedes-benz-container-padding)`,
height: '72px',
backgroundColor: 'var(--mercedes-benz-nav-bg)',
borderBottom: '1px solid var(--mercedes-benz-color-border)',
position: 'sticky',
top: 0,
zIndex: 100,
}}
>
<a href="/" style={{ fontFamily: 'var(--mercedes-benz-font-family-base)', fontWeight: 'var(--mercedes-benz-font-weight-medium)', fontSize: 'var(--mercedes-benz-font-size-xs)', textDecoration: 'none', color: 'var(--mercedes-benz-color-text)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
Mercedes-Benz
</a>
<ul style={{ display: 'flex', gap: 'var(--mercedes-benz-space-lg)', listStyle: 'none', margin: 0, padding: 0 }}>
{['Vehicles', 'Services', 'Innovation'].map((item) => (
<li key={item}>
<a href="#" style={{ fontFamily: 'var(--mercedes-benz-font-family-base)', fontSize: 'var(--mercedes-benz-font-size-xs)', fontWeight: 'var(--mercedes-benz-font-weight-regular)', color: 'var(--mercedes-benz-color-text)', textDecoration: 'none', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
{item}
</a>
</li>
))}
</ul>
<PrimaryButton>Find a Dealer</PrimaryButton>
</nav>
);
```
---
### 6.5 Model Card
**Anatomy:** `<article>` → `<img>` + `<div.content>` → `[label]` + `[title]` + `[CTA]`
```tsx
type ModelCardProps = { image: string; label: string; title: string; href: string; };
export const ModelCard: React.FC<ModelCardProps> = ({ image, label, title, href }) => (
<article style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
<img
src={image}
alt={title}
style={{ width: '100%', aspectRatio: '16/9', objectFit: 'cover', display: 'block' }}
/>
<div style={{ padding: 'var(--mercedes-benz-space-sm)', backgroundColor: 'var(--mercedes-benz-color-bg)' }}>
<span style={{ fontFamily: 'var(--mercedes-benz-font-family-base)', fontSize: '12px', fontWeight: 'var(--mercedes-benz-font-weight-medium)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mercedes-benz-color-text-secondary)', display: 'block', marginBottom: 'var(--mercedes-benz-space-2xs)' }}>
{label}
</span>
<h2 style={{ fontFamily: 'var(--mercedes-benz-font-family-base)', fontSize: 'var(--mercedes-benz-font-size-xs)', fontWeight: 'var(--mercedes-benz-font-weight-medium)', color: 'var(--mercedes-benz-color-text)', margin: `0 0 var(--mercedes-benz-space-sm)` }}>
{title}
</h2>
<a href={href}>
<GhostButton>Configure</GhostButton>
</a>
</div>
</article>
);
```
---
## 7. Elevation & Depth
> **Observed:** No `box-shadow` values detected on any computed elements (`box-shadow: none` on both `h1` and `body`).
> Mercedes-Benz uses **flat design** — depth is communicated via contrast, whitespace, and edge/border lines, not shadows.
```css
/* ── Shadow tokens ── */
--mercedes-benz-shadow-none: none; /* Default — all primary surfaces */ /* extracted: high confidence */
--mercedes-benz-shadow-subtle: 0 1px 0 0 var(--mercedes-benz-color-border); /* Bottom border line as divider — reconstructed */ /* reconstructed: low confidence */
--mercedes-benz-shadow-card: none; /* Cards use border, not shadow */ /* reconstructed */
/* ── Border tokens ── */
--mercedes-benz-border-default: 1px solid var(--mercedes-benz-color-border); /* #cccccc — section dividers, inputs */ /* reconstructed */
--mercedes-benz-border-strong: 1px solid var(--mercedes-benz-color-text); /* #000000 — focus states, ghost buttons */ /* reconstructed */
--mercedes-benz-border-radius: 0px; /* All interactive elements — extracted: high confidence */
/* ── Z-index scale ── */
--mercedes-benz-z-base: 0; /* Static content */
--mercedes-benz-z-raised: 10; /* Cards on hover (if applicable) */
--mercedes-benz-z-nav: 100; /* Sticky navigation */
--mercedes-benz-z-modal: 200; /* Overlays, drawers */
--mercedes-benz-z-toast: 300; /* Notification banners */
```
### Layering Principles
- **No drop shadows** on cards, buttons, or containers — this is a strict brand rule
- **Depth is achieved through contrast**: dark text on white surface vs. dark surface with white text
- **Borders as dividers**: `1px solid #cccccc` separates nav from content, sections from sections
- **Hover state uses fill change**, never a shadow lift
---
## 8. Motion
> **Observed:** `transition: all` on both `h1` and `body` — suggests a global transition is applied.
> Duration and easing are reconstructed; no explicit animation tokens were captured.
```css
/* ── Transition tokens ── */
--mercedes-benz-transition-duration-fast: 150ms; /* Micro-interactions: hover colour changes */ /* reconstructed: moderate confidence */
--mercedes-benz-transition-duration-base: 200ms; /* Standard UI transitions: button hover, input focus */ /* reconstructed: moderate confidence */
--mercedes-benz-transition-duration-slow: 350ms; /* Panel reveals, menu open/close */ /* reconstructed: low confidence */
--mercedes-benz-transition-duration-slower: 500ms; /* Hero image fade, page transitions */ /* reconstructed: low confidence */
--mercedes-benz-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard — smooth in/out */ /* reconstructed: low confidence */
--mercedes-benz-easing-enter: cubic-bezier(0, 0, 0.2, 1); /* Elements entering the screen */ /* reconstructed: low confidence */
--mercedes-benz-easing-exit: cubic-bezier(0.4, 0, 1, 1); /* Elements leaving the screen */ /* reconstructed: low confidence */
--mercedes-benz-easing-linear: linear; /* Progress bars, video scrubbers */ /* reconstructed: low confidence */
```
### Motion Rules
| Scenario | Duration | Easing |
|---|---|---|
| Button hover background | `150ms` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| Input border focus | `150ms` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| Navigation drawer | `350ms` | `cubic-bezier(0, 0, 0.2, 1)` |
| Hero image crossfade | `500ms` | `cubic-bezier(0.4, 0, 0.2, 1)` |
- **NEVER animate layout properties** (`width`, `height`, `padding`) — only `color`, `background-color`, `opacity`, `transform`
- **Respect `prefers-reduced-motion`** — disable all transitions when set
- **No bounce, spring, or overshoot easings** — motion must be as restrained as the visual design
---
## 9. Anti-Patterns & Constraints
1. **Hardcoded colour values → AI substitutes literal `#000` or `black` when token names aren't reinforced → Why it fails:** The model defaults to shorthand literals when unsure of intent, breaking the token layer entirely — future theme changes won't propagate. **What to do instead:** Always use `var(--mercedes-benz-color-text)` for black text and `var(--mercedes-benz-color-action)` for black CTA backgrounds, even though they resolve to the same hex.
2. **Substituting `Inter` or `system-ui` for the brand font → AI defaults to its most common training font when a serif is specified ambiguously → Why it fails:** `Inter` is sans-serif and completely contradicts the classical, heritage character of the Mercedes brand. Once set in a base style, it propagates everywhere. **What to do instead:** Declare `font-family: "Times New Roman", Times, serif` in the `body` reset and every composite type token explicitly.
3. **Adding `border-radius` to buttons → AI assumes `4px` or `8px` is a "safe default" for buttons → Why it fails:** Even slight rounding contradicts the precision-engineering aesthetic. A `4px` radius on a Mercedes CTA looks approachable and friendly — the opposite of brand intent. **What to do instead:** Explicitly set `border-radius: 0px` — the value `0` is not the absence of a token, it *is* the token value.
4. **Arbitrary spacing values (10px, 15px, 22px) → AI fills gaps in spacing scales with round-number guesses → Why it fails:** Values like `10px` break the 8px grid rhythm, creating misaligned vertical spacing that feels "off" without a clear cause. **What to do instead:** Only use multiples from the spacing scale: `4, 8, 16, 24, 32, 48, 64, 96px` via the `--mercedes-benz-space-*` tokens.
5. **Dynamic Tailwind class construction → AI generates `bg-[${color}]` or `` `text-${size}` `` strings → Why it fails:** Tailwind purges classes that aren't statically detectable at build time. Conditional dynamic classes silently disappear in production. **What to do instead:** Use full static class names (`bg-black`, `text-white`) or use CSS custom properties via inline styles / CSS modules.
6. **Missing interaction states → AI generates only `default` state styling → Why it fails:** A button without `hover`, `focus`, `active`, and `disabled` states is inaccessible (fails WCAG 2.4.7) and feels unpolished — especially critical in a luxury brand context where interaction quality signals craftsmanship. **What to do instead:** Every interactive element must implement all five states before considered complete.
7. **Inline `style` for static values → AI inlines `style={{ fontFamily: 'Times New Roman' }}` everywhere → Why it fails:** Static visual properties duplicated per-element create drift — one element gets updated, another doesn't. Tokens lose meaning when bypassed. **What to do instead:** Set base typography on the `body` tag; override with `var()` tokens only where a component intentionally diverges.
8. **Using `!important` to override styles → AI uses `!important` to "fix" conflicts it created → Why it fails:** `!important` signals a specificity war caused by poorly structured selectors. In a token system, it prevents theme overrides and makes the cascade undebuggable. **What to do instead:** Fix the root selector conflict; use CSS Modules or scoped component styles to avoid specificity collisions.
9. **Absolute positioning for layout → AI positions cards or columns with `position: absolute; left: X` → Why it fails:** Absolute-positioned elements exit the document flow, breaking responsive reflow. The computed styles show `display: block` and `flex` — the layout is flow-based. **What to do instead:** Use `display: grid` for multi-column layouts and `display: flex` for row/column alignment.
10. **Introducing colour outside the monochrome palette → AI adds a "hover accent" in blue or a "success" state in green → Why it fails:** Any hue outside the black/white/grey range is a brand violation. Mercedes-Benz's luxury identity depends on chromatic restraint. **What to do instead:** Use `var(--mercedes-benz-color-action-hover)` (`#333333`) for hover states; use `var(--mercedes-benz-color-border)` for muted states — never introduce hue.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (24) */
--mercedes-benz-color-text: #000000;
--mercedes-benz-color-bg: #ffffff;
--mercedes-benz-color-surface: #f4f4f4;
--mercedes-benz-color-border: #cccccc;
--mercedes-benz-color-action: #000000;
--mercedes-benz-color-action-fg: #ffffff;
--primitive-black: #000000;
--primitive-white: #ffffff;
--primitive-grey-100: #f4f4f4;
--primitive-grey-300: #cccccc;
--primitive-grey-600: #666666;
--primitive-grey-800: #333333;
--mercedes-benz-color-text-secondary: #666666;
--mercedes-benz-color-action-hover: #333333;
--mercedes-benz-color-disabled: #cccccc;
--mercedes-benz-color-disabled-fg: #666666;
--mercedes-benz-button-bg: var(--mercedes-benz-color-action);
--mercedes-benz-button-bg-hover: var(--mercedes-benz-color-action-hover);
--mercedes-benz-button-bg-disabled: var(--mercedes-benz-color-disabled);
--mercedes-benz-input-border: var(--mercedes-benz-color-border);
--mercedes-benz-input-border-focus: var(--mercedes-benz-color-action);
--mercedes-benz-nav-bg: var(--mercedes-benz-color-bg);
--mercedes-benz-border-default: 1px solid #cccccc;
--mercedes-benz-border-strong: 1px solid #000000;
/* Typography (10) */
--font-size-xs: 16px; /* 2 elements — e.g. p "Reference #18.87a024", p "https://errors.edges" /* mined from computed styles */ */
--font-size-sm: 32px; /* 1 element — e.g. h1 "Access Denied" /* mined from computed styles */ */
--font-weight-regular: 400; /* 2 elements — e.g. p "Reference #18.87a024", p "https://errors.edges" /* mined from computed styles */ */
--font-weight-medium: 700; /* 1 element — e.g. h1 "Access Denied" /* mined from computed styles */ */
--mercedes-benz-font-size-xs: 16px;
--mercedes-benz-font-size-sm: 32px;
--mercedes-benz-font-weight-regular: 400;
--mercedes-benz-font-weight-medium: 700;
--mercedes-benz-font-family-base: "Times New Roman", Times, serif;
--mercedes-benz-nav-text: var(--mercedes-benz-color-text);
/* Spacing (16) */
--mercedes-benz-space-xs: 8px;
--mercedes-benz-space-sm: 16px;
--mercedes-benz-space-md: 24px;
--mercedes-benz-space-lg: 32px;
--mercedes-benz-space-xl: 48px;
--mercedes-benz-space-2xl: 64px;
--mercedes-benz-space-2xs: 4px;
--mercedes-benz-space-3xl: 96px;
--mercedes-benz-grid-gutter: 24px;
--mercedes-benz-container-max: 1440px;
--mercedes-benz-container-padding: 48px;
--mercedes-benz-bp-sm: 640px;
--mercedes-benz-bp-md: 768px;
--mercedes-benz-bp-lg: 1024px;
--mercedes-benz-bp-xl: 1280px;
--mercedes-benz-bp-2xl: 1440px;
/* Radius (1) */
--mercedes-benz-border-radius: 0px;
/* Effects (3) */
--mercedes-benz-shadow-none: none;
--mercedes-benz-shadow-subtle: 0 1px 0 0 var(--mercedes-benz-color-border);
--mercedes-benz-shadow-card: none;
```
## Appendix B: Token Source Metadata
```yaml
tokenSource: reconstructed-from-computed
extractedFrom: mercedes-benz.com
extractionDate: "[TBD - extract manually for exact date]"
confidence: low
cssCustomPropertiesFound: 0
reconstructionMethod: >
All tokens synthesised from computed styles of two elements (h1, body).
Colour clustering: single hue family (black/white). No accent hues detected.
Spacing clustering: 8px grid inferred from body margin (16px) and h1 margin (21.44px ~= 21px, rounded
to nearest 8px grid step = 24px; body text-level margin = 16px confirming 8px base).
Grey scale (grey-100, grey-300, grey-600, grey-800) inferred from luxury monochrome brand conventions
— NOT extracted from computed styles.
Border-radius: 0px confirmed on both sampled elements; classified as brand rectilinear rule.
Motion tokens: transition: 'all' detected, no duration/easing values — durations and curves
are low-confidence reconstructions from industry norms.
Layout/breakpoint tokens: no layout container or grid data captured — all low confidence.
caveats:
- The extraction hit an "Access Denied" / error page, not the live homepage.
Computed styles reflect the error page's minimal styles only.
- The live mercedes-benz.com site uses a custom font stack (MBCorpo, etc.) and
extensive CSS custom properties. This layout.md reflects error-page fallback
styles (Times New Roman) NOT the brand's production design system.
- Section 5 (Page Structure) is fully inferred — no layout digest data was captured
due to the access denial.
- All tokens beyond font-size-xs, font-size-sm, font-weight-regular, and font-weight-medium
should be treated as [TBD - extract manually] until verified against the live site.
authoritative_manual_check:
- Open mercedes-benz.com in DevTools → Computed panel on nav, hero, buttons
- Check for CSS custom properties in :root or [data-theme] selectors
- Extract MBCorpo font declaration from @font-face rules
- Capture button background-color, border-radius, padding from .cta or .button selectors
- Measure spacing rhythm from section padding in the hero and feature grid sections
```More from the gallery
Browse all kits →You may also like

Contra
MITPlayful yet professional design system with teal and purple accents, bold typography, and vibrant accent surfaces—built for modern SaaS platforms and landing pages
03
lightboldsaaslanding-page

DoorDash
MITClean, accessible food-delivery system with DoorDash's signature red accent, light neutral palette, and system-font typography—built for rapid product development
03
lightecommsaasmobile

Wise
MITClean, accessible financial design system with lime-green accents and Swiss typography, built for fintech products that prioritise clarity and trust
05
lightfintechminimalsaas