---
version: alpha
name: Mercedes-Benz
description: Luxury engineering rendered in restraint — near-black ink on bright white, signature Mercedes silver as the one chromatic gesture, the proprietary MB Corpo type system at calm regular weights, and zero-radius geometry that reads like precision machining.
# NOTE: live mercedes-benz.com is bot-protected (Akamai "Access Denied"), so dembrandt
# returned only the block page. Tokens below are authored from Mercedes-Benz brand
# knowledge (MB Corpo type system, the brand's silver/black/white palette) and grounded
# in the brand's well-documented digital design language. Values marked /* estimated */.

colors:
  # Surface / canvas — predominantly bright white with near-black dark sections
  background: "#ffffff"
  surface: "#ffffff"
  surface-alt: "#f4f4f4"          # /* estimated */ light grey section banding
  background-dark: "#0a0a0a"      # /* estimated */ near-black hero / footer sections
  surface-dark: "#1a1a1a"         # /* estimated */ lifted dark panel

  # Ink / text — near-black, never pure #000 in body
  ink: "#171717"                  # /* estimated */ primary text near-black
  ink-secondary: "#5c5c5c"        # /* estimated */ meta, captions, labels
  ink-muted: "#969696"            # /* estimated */ disabled / placeholder
  ink-inverted: "#ffffff"
  on-background: "#171717"
  on-surface: "#171717"
  on-dark: "#ffffff"

  # Brand accent — Mercedes silver is the heritage signature; interaction uses near-black
  silver: "#b0b0b0"               # /* estimated */ Mercedes silver — heritage accent, dividers, hairlines
  primary: "#171717"              # near-black: filled CTAs read as ink, not a hue
  on-primary: "#ffffff"
  primary-hover: "#000000"        # /* estimated */ deepens to pure black on hover

  # Interaction tints
  hover-tint: "#ebebeb"           # /* estimated */ light hover wash on ghost controls
  focus-ring: "#171717"           # /* estimated */ near-black focus outline

  # Borders — restrained hairlines
  border: "#d4d4d4"               # /* estimated */ light divider
  border-strong: "#171717"        # /* estimated */ outline buttons on light
  border-dark: "#333333"          # /* estimated */ divider on dark sections

  # Shadow tint
  shadow-soft: "#171717"          # /* estimated */ near-black shadow base (used at low opacity)

typography:
  # Mercedes-Benz proprietary MB Corpo type system (sans, 2020). Real fallbacks below.
  display-hero:
    fontFamily: "MB Corpo A Title, MB Corpo S Title, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 72px          # /* estimated */
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "MB Corpo A Title, MB Corpo S Title, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px          # /* estimated */
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "MB Corpo S Title, MB Corpo A Title, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px          # /* estimated */
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "MB Corpo S Title, MB Corpo A Title, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px          # /* estimated */
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "MB Corpo S Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px          # /* estimated */
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "MB Corpo S Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "MB Corpo S Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px          # /* estimated */
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "MB Corpo S Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px          # /* estimated */
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.2px
  caption:
    fontFamily: "MB Corpo S Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px          # /* estimated */
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-upper:
    fontFamily: "MB Corpo S Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px          # /* estimated */
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1px

spacing:
  # dembrandt detected an 8px base on the block page; the brand's real layouts use a
  # generous 8px-derived scale. Values below are the brand-appropriate scale.
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  # Mercedes-Benz digital geometry is essentially square — precision, not softness.
  none: 0px
  sm: 2px           # /* estimated */ barest softening on inputs/chips
  full: 9999px      # circular icon controls only

components:
  # Top navigation — white surface, near-black ink, hairline divider
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.hover-tint}"
    textColor: "{colors.ink}"

  # Primary CTA — near-black fill, white label, square
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  # Outline / secondary — near-black hairline outline on white
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  # Ghost / text button on dark sections
  button-ghost:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-ghost-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"

  # Content card — white surface, hairline border, square
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 32px

  # Vehicle / media tile — image-led, no chrome
  card-vehicle:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.hover-tint}"
    textColor: "{colors.on-surface}"

  # Dark editorial card (on near-black sections)
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 32px

  # Hero full-bleed dark section
  hero-section:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 96px 32px

  # Input — barest 2px radius, hairline border
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Chip / filter
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  # Badge / tag
  badge:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 4px 10px
---

# Mercedes-Benz Design System

## Overview

Mercedes-Benz's digital design language is the visual equivalent of a closing door on an S-Class — engineered weight, no rattle, nothing left to chance. The canvas is overwhelmingly bright white (`{colors.background}`), an honest, gallery-clean field that lets product photography and a near-black wordmark do the talking. Where Porsche commits to a total black stage and BMW alternates dark heroes with white content, Mercedes sits between them: a predominantly white interface punctuated by full-bleed near-black (`{colors.background-dark}`) hero and footer zones, so the experience breathes light and goes dark only when it wants cinematic gravity. The result reads as luxury through clarity rather than luxury through drama.

The type system is the brand's most disciplined asset. Mercedes-Benz commissioned its own family — MB Corpo — a clean humanist-geometric sans that replaced the licensed Corporate A/S typefaces brand-wide. The site runs MB Corpo at calm weights: regular (400) for body, medium (500) for navigation, buttons, and section headings, reserving the more characterful MB Corpo A Title cut for the largest display moments (`{typography.display-hero}`). There is almost no bold and never any black weight — emphasis comes from scale and whitespace, not from ink density. Text is set in a near-black (`{colors.ink}`), never pure `#000`, which keeps long-form copy from vibrating against the white.

The one chromatic gesture is heritage Mercedes silver (`{colors.silver}`) — the colour of the marque's racing past — used sparingly for hairline dividers, subtle accents, and metallic UI moments rather than as a loud brand hue. Interaction itself is rendered in near-black: filled CTAs are ink-on-white rectangles with zero radius (`{rounded.none}`), squared like milled components. The geometry is essentially right-angled throughout, the barest 2px softening (`{rounded.sm}`) appearing only on form fields. Generous spacing on an 8px-derived scale gives every element room, so the interface feels expensive the way an empty showroom does — through space, light, and the absence of clutter.

**Key Characteristics:**
- Bright white canvas (`{colors.background}`) as the dominant surface, with full-bleed near-black (`{colors.background-dark}`) hero and footer zones for cinematic contrast
- Proprietary MB Corpo type system — MB Corpo S Text for body, MB Corpo S/A Title for headings
- Calm weights only: 400 body, 500 for nav/buttons/headings — no bold, no black weight anywhere
- Near-black ink (`{colors.ink}`), deliberately not pure `#000`, for refined long-form legibility
- Heritage Mercedes silver (`{colors.silver}`) as the single accent — hairlines and metallic touches, never a loud fill
- Interaction colour is ink, not hue: filled CTAs (`{components.button-primary}`) are near-black rectangles
- Square geometry — `{rounded.none}` everywhere, with a barest 2px (`{rounded.sm}`) reserved for inputs and chips
- Generous 8px-derived spacing scale (`{spacing.md}` through `{spacing.4xl}`) for showroom-grade breathing room
- Photography-forward layouts where vehicle imagery, not chrome, carries the emotion
- Outline buttons (`{components.button-outline}`) use a near-black hairline that inverts to solid ink on hover
- Hairline borders (`{colors.border}`) and silver dividers instead of shadows for structure
- Letter-spacing reserved for utility labels (`{typography.label-upper}`) — display type tracks tight, not loose

## Colors

### Primary Surfaces
- **White** (`{colors.background}`): The dominant canvas — every standard page and content section rests on it.
- **Light Grey** (`{colors.surface-alt}`): Section banding and media-tile backgrounds, a quiet step down from pure white.
- **Near-Black** (`{colors.background-dark}`): Full-bleed hero and footer zones — the cinematic, high-gravity surface.
- **Dark Panel** (`{colors.surface-dark}`): Lifted dark surface for cards and panels placed on near-black sections.

### Text & Ink
- **Near-Black Ink** (`{colors.ink}`): Primary text colour, deliberately softened from pure black for legibility.
- **Secondary Ink** (`{colors.ink-secondary}`): Metadata, captions, supporting labels.
- **Muted Ink** (`{colors.ink-muted}`): Disabled states and placeholder text.
- **Inverted Ink** (`{colors.ink-inverted}` / `{colors.on-dark}`): White text on near-black sections and filled CTAs.

### Brand Accent
- **Mercedes Silver** (`{colors.silver}`): The heritage signature — used for hairline dividers, subtle metallic accents, and refined detail moments, never as a saturated fill.
- **Primary Ink** (`{colors.primary}`): Near-black fill for primary CTAs — interaction expressed as ink, not as a brand hue.

### Interaction & States
- **Primary Hover** (`{colors.primary-hover}`): Filled CTAs deepen to pure black on hover.
- **Hover Tint** (`{colors.hover-tint}`): Light wash behind ghost/nav controls on white.
- **Focus Ring** (`{colors.focus-ring}`): Near-black keyboard-focus outline.

### Borders
- **Border** (`{colors.border}`): Light structural hairline divider.
- **Border Strong** (`{colors.border-strong}`): Near-black outline for outline buttons on light surfaces.
- **Border Dark** (`{colors.border-dark}`): Divider on near-black sections.

> All values are opaque 6-digit hex. The live site is Akamai bot-protected, so colours are authored from Mercedes-Benz brand knowledge and flagged `/* estimated */` in the YAML where not directly observed.

## Typography

### Font Family
- **Primary**: `MB Corpo S Text` (body) and `MB Corpo S Title` / `MB Corpo A Title` (display), with fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`
- **MB Corpo** is Mercedes-Benz's proprietary corporate type system, replacing the older licensed Corporate A/S families brand-wide — a clean humanist-geometric sans
- **No Google Fonts, no Adobe Fonts** at runtime — the family is self-hosted/proprietary, which is why the closest public substitute is a neutral grotesque

### Hierarchy

The complete type scale is declared in the `typography:` block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | 72px — monumental hero headlines, MB Corpo A Title, tight tracking |
| `display` | 48px — section-level display headings |
| `heading-section` | 32px weight 500 — primary content section titles |
| `heading-sub` | 24px weight 500 — subsection titles |
| `body-large` | 20px — lead paragraphs, feature descriptions |
| `body` | 16px — body copy, default running text |
| `nav-link` | 16px weight 500 — navigation items |
| `button-ui` | 16px weight 500, 0.2px tracking — CTA labels |
| `caption` | 14px — image captions, specifications |
| `label-upper` | 12px weight 500, 1px tracking — chips, tags, utility labels |

### Principles
- **One family, two cuts**: MB Corpo S does the work; MB Corpo A Title appears only at the largest display sizes for character.
- **Medium is the new bold**: Weight 500 carries nav, buttons, and headings — there is no 700/900 in the system.
- **Scale over weight for hierarchy**: The 72px → 12px range, not weight contrast, builds the visual order.
- **Near-black, not black**: Body ink (`{colors.ink}`) is softened to reduce glare against the white canvas.
- **Tracking is rationed**: Display type tracks tight; positive letter-spacing is reserved for `{typography.label-upper}`.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` block above. Base unit: **8px** (dembrandt detected an 8px system even on the blocked page).

Spacing is generous and deliberate. Whitespace is the primary luxury cue — sections are separated with substantial airspace (`{spacing.3xl}`–`{spacing.4xl}`), and components are never crowded. The interface earns its premium feel the way an uncluttered showroom does.

### Grid & Container
- Max content width: ~1440px /* estimated */, with full-bleed photography breaking the container
- Multi-column content grids (typically 2–4 columns) that collapse cleanly to 1 column on mobile
- Hero zones: full-bleed near-black or photographic, edge-to-edge
- Footer: multi-column link grid on the near-black surface

### Whitespace Philosophy
- **Space signals luxury**: Generous `{spacing.2xl}`+ gaps keep every element isolated and considered.
- **Photography needs air**: Media tiles maintain comfortable gaps so each vehicle reads as a distinct object.
- **Low text density**: Mercedes sets larger type at lower density rather than dense paragraphs.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for cards, sections, nav on white |
| Subtle (Level 1) | `1px {colors.border}` hairline | Card and section separation in place of shadow |
| Card (Level 2) | `0 2px 8px {colors.shadow-soft}` at ~8% /* estimated */ | Occasional lifted card / dropdown |
| Photography (Level 3) | Full-bleed imagery + near-black overlay | Hero depth carried by image, not box-shadow |
| Dialog (Level 4) | `0 8px 32px {colors.shadow-soft}` at ~16% /* estimated */ | Modals, flyout menus |
| Focus Ring | `2px {colors.focus-ring}` outline, offset | Keyboard focus on interactive elements |

**Shadow Philosophy**: Mercedes-Benz leans on hairline borders (`{colors.border}`), silver dividers, and full-bleed photography for structure rather than stacked drop-shadows. Depth, when it appears, is whisper-quiet — a soft near-black shadow at low opacity, never a heavy lift. The flat, light-forward system reads as precision-engineered: surfaces meet at clean edges, the way panels meet on a well-built car.

## Shapes

The complete radius scale is in the `rounded:` block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, nav, heroes, sections — the system default |
| `sm` | 2px | Barest softening on inputs and chips only |
| `full` | 9999px | Circular icon controls (play, close, scroll) |

The geometry is essentially square — a deliberate signal of precision and engineering rigour. The only deviation from a true right angle is the 2px (`{rounded.sm}`) breath on form fields, and the fully circular (`{rounded.full}`) icon buttons. There is no mid-range radius; rectangles stay rectangles.

## Components

The complete component spec lives in the `components:` block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants
- **`button-primary`** — Near-black fill, white label, zero radius. The maximum-contrast CTA; deepens to pure black on hover (`{components.button-primary-hover}`).
- **`button-outline`** — White fill with a near-black hairline border. Inverts to solid ink on hover (`{components.button-outline-hover}`) — a clean, confident state change.
- **`button-ghost`** — For near-black sections: transparent-on-dark, lifts to `{colors.surface-dark}` on hover.

### Cards
- **`card`** — White surface, 32px padding, square, structured by a hairline border rather than a shadow.
- **`card-vehicle`** — Image-led media tile, light-grey fallback, no chrome. The photograph is the card.
- **`card-dark`** — Dark editorial card for placement on near-black hero/footer zones.

### Inputs
- **`input`** — White field, hairline border, the system's barest 2px radius (`{rounded.sm}`). Focus (`{components.input-focus}`) holds the surface and strengthens the border to near-black.

### Chips & Badges
- **`chip`** — Light-grey filter control; active state (`{components.chip-active}`) inverts to near-black fill / white label.
- **`badge`** — Squared light-grey tag with `{typography.label-upper}` text for status and category labels.

### Navigation
- **`nav-bar`** — White surface, MB Corpo medium links, hairline divider below. Logo (three-pointed star) left-aligned; the bar sits flush and clean over the white page plane.

### Hero
- **`hero-section`** — Full-bleed near-black, 72px display headline in white, 96px vertical padding — the system's cinematic counterpoint to the white body.

## Do's and Don'ts

### Do
- Keep white (`{colors.background}`) as the dominant canvas; reserve near-black (`{colors.background-dark}`) for full-bleed hero and footer zones
- Set body text in near-black (`{colors.ink}`), never pure `#000`, to keep copy calm against the white
- Use weight 500 (`{typography.nav-link}`, `{typography.button-ui}`) as the strongest weight — let scale, not bold, build hierarchy
- Make primary CTAs near-black rectangles (`{components.button-primary}`) — interaction is ink, not a brand hue
- Apply Mercedes silver (`{colors.silver}`) only for hairlines, dividers, and subtle metallic accents
- Keep corners square (`{rounded.none}`); allow the 2px (`{rounded.sm}`) breath on form fields only
- Use generous `{spacing.2xl}`+ whitespace to signal premium restraint
- Let vehicle photography carry the emotional weight; keep UI chrome neutral

### Don't
- Don't use pure black (`#000`) for body text — the system's ink is the softened near-black (`{colors.ink}`)
- Don't introduce loud accent colours; Mercedes silver is subtle, and interaction reads as ink
- Don't add bold or black font weights — 500 is the ceiling
- Don't round corners beyond the barest 2px (`{rounded.sm}`) — the geometry is square by design
- Don't pile on drop-shadows; structure comes from hairline borders (`{colors.border}`) and silver dividers
- Don't crowd elements — tight, dense layouts contradict the brand's spatial luxury
- Don't apply positive letter-spacing to display type; tracking belongs to `{typography.label-upper}` only
- Don't let chrome compete with photography — the imagery is the hero, not the UI

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, minimal padding, hamburger nav |
| Mobile | 375–600px | Single column, stacked CTAs, full-width media |
| Tablet | 600–1024px | 2-column content grids, condensed nav |
| Desktop | 1024–1440px | Full multi-column layout, horizontal nav |
| Large Desktop | >1440px | Max content width with full-bleed photography breaking the container |

### Touch Targets
- Primary/outline buttons: 14px 28px padding clears the 44px minimum touch height
- Nav links: 16px medium text with 8px 16px padding
- Chips: 8px 16px padding maintains a comfortable tap area

### Collapsing Strategy
- **Navigation**: Horizontal desktop nav → hamburger + slide-in drawer on mobile
- **Content grids**: 4 columns → 2 → 1 as the viewport narrows
- **Hero headlines**: 72px display scales down toward ~36px on mobile, weight unchanged
- **Footer**: Multi-column link grid → stacked accordion on mobile

### Image Behavior
- Hero photography: full-bleed `object-fit: cover` at every breakpoint
- Vehicle tiles: aspect-ratio locked, scaling with column width
- Mobile: imagery stays full-width and uncropped where possible; lazy-loaded below the fold

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — white
- Dark sections: `{colors.background-dark}` — near-black
- Text: `{colors.ink}` — near-black (not pure black)
- Secondary text: `{colors.ink-secondary}` — mid grey
- Accent: `{colors.silver}` — Mercedes silver (hairlines/metallic only)
- CTA fill: `{colors.primary}` — near-black
- CTA text: `{colors.on-primary}` — white
- Border: `{colors.border}` — light hairline

### Example Component Prompts

- "Create a Mercedes-Benz hero on `{colors.background-dark}` (near-black), full-bleed, with a vehicle photograph covering the viewport. Overlay the headline in MB Corpo A Title (fallback Helvetica Neue) at 72px weight 400, line-height 1.1, -0.5px tracking, white (`{colors.on-dark}`), left-aligned with 96px bottom padding (`{components.hero-section}`). Below it, a near-black primary button (`{components.button-primary}`): white label, MB Corpo 16px weight 500, 14px 28px padding, zero radius."

- "Build a content card section on `{colors.background}` (white). Each card (`{components.card}`) is a square white surface with a 1px `{colors.border}` hairline, 32px padding, no shadow. Title in MB Corpo S Title 24px weight 500 (`{typography.heading-sub}`) in `{colors.ink}`; body in MB Corpo S Text 16px weight 400 (`{typography.body}`); a near-black outline button (`{components.button-outline}`) at the bottom that inverts to solid ink on hover."

- "Design a primary CTA: near-black fill (`{colors.primary}`), white text (`{colors.on-primary}`), MB Corpo 16px weight 500 with 0.2px tracking (`{typography.button-ui}`), 14px 28px padding, zero radius (`{rounded.none}`). On hover, deepen the fill to pure black (`{components.button-primary-hover}`). Pair with an outline variant that uses a near-black hairline border on white and inverts to ink-fill on hover."

- "Create a Mercedes-Benz navigation bar on `{colors.background}` (white): three-pointed-star logo left-aligned, nav links in MB Corpo S Text 16px weight 500 (`{typography.nav-link}`) in `{colors.ink}`, 8px 16px padding, light `{colors.hover-tint}` wash on hover. Add a 1px `{colors.border}` hairline divider below the bar — no shadow. Keep the bar flush on the white page plane."

- "Build a vehicle media grid on `{colors.background}` using a 3-column layout of `{components.card-vehicle}` tiles. Each tile is a full-bleed photograph on a `{colors.surface-alt}` (light grey) fallback, zero radius, no padding, no border. Caption below in MB Corpo S Text 14px (`{typography.caption}`) `{colors.ink-secondary}`. On hover, a quiet `{colors.hover-tint}` wash. Above the grid, a row of filter chips (`{components.chip}`) with an active state that inverts to near-black fill (`{components.chip-active}`)."

- "Design a status badge: `{colors.surface-alt}` (light grey) background, `{colors.ink-secondary}` text, MB Corpo 12px weight 500 with 1px tracking (`{typography.label-upper}`), 4px 10px padding, zero radius (`{components.badge}`). Keep it small and quiet — Mercedes badges label, they don't shout."

### Iteration Guide
1. Start on white (`{colors.background}`) — commit to the bright, light-forward canvas before adding anything
2. Reserve near-black (`{colors.background-dark}`) for cinematic full-bleed hero/footer zones only
3. Set everything in MB Corpo; weight 500 is the strongest weight — build hierarchy with scale, not bold
4. Body ink is near-black (`{colors.ink}`), never pure `#000`
5. Interaction colour is ink: CTAs (`{components.button-primary}`) are near-black rectangles, not a brand hue
6. Keep corners square (`{rounded.none}`); allow 2px (`{rounded.sm}`) on inputs/chips only
7. Use Mercedes silver (`{colors.silver}`) sparingly for hairlines and metallic detail — never as a loud fill
8. Lean on whitespace (`{spacing.2xl}`+) and photography for luxury; keep chrome minimal

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Mercedes-Benz. Brand names and trademarks belong to their respective owners.