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