Mercedes-Benz Design System

Overview

Mercedes-Benz's brand-experience site reads as a luxury automotive magazine — not a configurator funnel, not a dealer inventory grid. Where BMW corporate stages dark-navy hero bands and rectangular Corporate Blue CTAs across an engineered card grid, and where Porsche softens every photo tile to 32px on a white canvas, Stuttgart's other automotive icon runs an editorial magazine layout: a single black cinema hero ({colors.canvas-dark} — #000000) at the top, a white canvas ({colors.canvas} — #ffffff) holding two-column article cards with small thumbnails and a lowercase "Editorial" eyebrow, then a single black anniversary band ("140 YEARS. 140 PLACES.") punctuating the middle, then back to the white grid.

Serif as signature: where most luxury-auto brands stay sans-only across every text role — BMW's BMW Type Next Latin, Porsche's Porsche Next, Ferrari's Ferrari Sans — Mercedes-Benz splits the family at the display/body seam. MBCorpo Title carries every display headline as a licensed serif (declared "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif); MBCorpo Text carries every body and caption role at 14px / 400 / 22px line-height. The serif-on-sans contrast is the editorial voice — it reads as automotive magazine, not configurator.

Theme blue scoped tight: the brand holds a single saturated voltage at {colors.primary} (#0260ab — --theme-primary), with {colors.primary-active} (#014880 — --theme-active) for press and {colors.primary-disabled} (#80c6ff — --theme-disabled) for the inactive state. Theme blue surfaces only on button fills, active link states, and inline anchor hovers — never as a CTA fill over the cinema hero photography. The hero CTAs are transparent-with-white-outline; the photograph carries the chromatic moment.

Rectangular magazine geometry: every article card, thumbnail, and editorial tile uses {rounded.none} (0px). The brand's --wb-radius-* scale declares only s (2px), m (4px), l (8px), and full (50% for avatars) — the named radii surface inside utility chrome only. The default is rectangular.

Key Characteristics:

• Black cinema hero band over the model render, then white canvas magazine grid below.
• MBCorpo Title licensed serif for display, MBCorpo Text sans for body — the editorial signature.
• Body locked at 14px / 400 / 22px line-height across span, paragraph, footnote, anchor.
• Theme blue ({colors.primary} — #0260ab) bound to --theme-primary, scoped to buttons and active states only.
• Rectangular 0px corners on every card; circles only for avatars.
• Eleven-step grey ladder (--wb-grey-05 through --wb-grey-95) before any chromatic accent enters.
• Editorial "Editorial" eyebrow above every article card — lowercase, body-muted #9f9f9f.
• 140-year black editorial band punctuates the white-canvas rhythm — magazine pattern, not CTA band.

Colors

Brand & Accent

• Theme Primary (Mercedes Blue) ({colors.primary} — #0260ab) — bound to --theme-primary and --wb-blue-35. Used as bg on button-primary-active, as text on inline anchor hovers, and as the focus border on text-input-focus. The brand's single saturated voltage. Layer: brand.
• Theme Active ({colors.primary-active} — #014880) — bound to --theme-active and --wb-blue-25. Used as bg on pressed primary button.
• Theme Disabled ({colors.primary-disabled} — #80c6ff) — bound to --theme-disabled and --wb-blue-75. Used as bg on inactive primary CTA.
• Button Theme ({colors.primary-button} — #0078d6) — frequency 0 raw, bound to --button-theme-color and --wb-blue-45. Used as bg on default primary button — a slightly brighter cousin of theme primary. Layer: brand.
• Hover on Theme Primary ({colors.primary-hover} — #bbbbbb) — bound to --hover-on-theme-primary and --wb-grey-70. Used as text on theme-primary surfaces during hover.

Surface

• Canvas ({colors.canvas} — #ffffff) — frequency 522. Used as text (261), border (261). The dominant page floor under the article-card grid. Bound to seven CSS variables including --text-on-base-color, --wb-white, --campaign-text, --campaign-light.
• Canvas Dark ({colors.canvas-dark} — #000000) — frequency 5. Used as bg (3), text (1), border (1). The cinema hero band and the 140-year anniversary editorial band backdrop. Bound to --base-color, --wb-black, --campaign-gradient, --campaign-primary.
• Surface Dark Elevated ({colors.surface-dark-elevated} — #141414) — bound to --bg-on-base-color and --wb-grey-10. Used as bg on dark-mode elevated cards (top-nav overlays, modals over the cinema hero).

Ink & Text

• Ink ({colors.ink} — #000000) — frequency 5 (same cluster as canvas-dark). Display headline color over the white canvas — MBCorpo Title sits as deep black ink.
• Ink Soft ({colors.ink-soft} — #1a1a1a) — bound to --wb-grey-10. Used on emphasized body paragraphs and eyebrow-strong contexts.
• Ink Muted ({colors.ink-muted} — #262626) — bound to --wb-grey-15. Used on footer links and tertiary copy.
• Body Muted ({colors.body-muted} — #9f9f9f) — frequency 42. Used as text (21), border (21). Bound to --wb-grey-60, --hover-on-base-color, --link-on-base-color. The lowercase "Editorial" eyebrow and most secondary anchor copy ride this color — the magazine eyebrow tone.
• Body Fine ({colors.body-fine} — #919191) — frequency 10. Used as text (5), border (5). Bound to --wb-grey-55. The fine-print body color — WLTP-disclosure paragraphs render at this tone.

Hairlines

• Hairline ({colors.hairline} — #e8e8e8) — bound to --wb-grey-85. 1px dividers below editorial eyebrows, thumbnail bottom edge.
• Hairline Strong ({colors.hairline-strong} — #dbdbdb) — bound to --wb-grey-80. Text-input 1px border, configurator option border.

Photo-overlay

• On Dark ({colors.on-dark} — #ffffff) — same cluster as canvas. Display text and CTA outline color over the cinema hero photograph.

Semantic (from CSS variables)

• Error ({colors.error} — #c31e1e): Bound to --wb-red-40. Form validation errors.
• Success ({colors.success} — #21a330): Bound to --wb-green-50. Confirmation, "available" indicators.
• Warning ({colors.warning} — #d1aa00): Bound to --wb-yellow-40. Validation warnings.

Typography

Font Family

The system runs a licensed pair: MBCorpo Title for display, MBCorpo Text for body. Declared in CSS as:

• --wb-font-title: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif
• --wb-font-text: "MBCorpo Text", "DaimlerCS-Regular", "DaimlerCSArab-Regular", sans-serif
• --wb-font-text-bold: same stack as text — bold cuts of MBCorpo Text

The CJK fallbacks (DaimlerCAC-Regular, DaimlerCACArab-Regular, DaimlerCS-Regular, DaimlerCSArab-Regular) ship the typography to the Chinese and Arabic markets without family swaps. Both faces are licensed to Daimler.

Hierarchy

Principles

• Serif-on-sans display/body split. MBCorpo Title for display, MBCorpo Text for body — non-negotiable. The split is the editorial voice.
• Body locked at 14px. The most-captured signature was 14px / weight 400 / 22px line-height — 92 occurrences across <span> and <a> on the captured surface. Body never promotes to 16px on this page.
• Weight 400 everywhere. Display does not promote to 500 or 700; emphasis comes from family swap (serif Title) and size, not weight.
• Letter-spacing is normal everywhere. The MBCorpo pair works on a natural body — no tracking on display, no uppercase tracking on nav.
• Lowercase eyebrow. Article eyebrows render lowercase "Editorial" rather than UPPERCASE TRACKED — counter to the BMW corporate "LEARN MORE" inline-link convention.

Note on Font Substitutes

MBCorpo Title and MBCorpo Text are licensed to Daimler. Documented fallbacks (DaimlerCAC-Regular, DaimlerCS-Regular) are also licensed. Open-source approximations:

• Display (serif): Source Serif 4 or Tinos at weight 400 — closest free serif with similar x-height.
• Body (sans): Inter at weight 400 with tracking: normal — closest open-source humanist.
• Paid alternative: Söhne for closer body proportions on paid licenses.

Layout

Spacing System

The brand declares a --wb-spacing-* scale on root:

• --wb-spacing-3xs: 0.25rem (4px)
• --wb-spacing-xxs: 0.5rem (8px)
• --wb-spacing-xs: 1.5rem (24px)
• --wb-spacing-s: 2rem (32px)
• --wb-spacing-m: 3rem (48px)
• --wb-spacing-l: 4.5rem (72px)
• --wb-spacing-xl: 5.5rem (88px)
• --wb-spacing-xxl: 6rem (96px)

Section padding on the editorial band lands at 96px 140px (captured). Article-card row padding lands at 0px 116px 64px (captured). The brand uses the bigger tokens (l 72px, xl 88px, xxl 96px) for section rhythm rather than a tight 80px corporate cadence.

Grid & Container

The brand declares a fluid 12-column grid:

• --wb-grid-content-width: 86vw
• --wb-grid-width: min(86vw, 1680px) — content caps at 1680px wide
• --wb-grid-column-width: min(calc((86vw - 11 * 2.5rem) / 12), 103.33px)
• --wb-grid-gutter-width: 2.5rem (40px)

Article cards run as 2-up at desktop with small-thumb and side-photo variants alternating. The cinema hero and the 140-year editorial band run full-bleed.

Whitespace Philosophy

The page is editorial-paced: dense article rows separated by 64px vertical gaps, then a 96-tall padded black band, then back to the white grid. Cards breathe; the eye reads across rows. Whitespace is the editorial signature — not the dense dealership grid BMW corporate uses.

Elevation & Depth

The system uses photographic depth + color-block contrast elevation. The brand declares three shadow tokens but uses them rarely on the brand-experience surface:

• --wb-shadow-s: 0 0 2px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .1)
• --wb-shadow-m: 0 0 2px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1)
• --wb-shadow-l: 0 0 4px 0 rgba(0, 0, 0, .1), 0 16px 24px 0 rgba(0, 0, 0, .1)

Decorative Depth

• Full-bleed model photography is the brand's primary depth treatment — the cinema hero renders the CLA as a photograph filling the band edge-to-edge.
• Editorial article thumbnail sits flush against the white canvas — no shadow, no border ring, edge-to-edge photograph with the headline below.

Shapes

Border Radius Scale

The brand declares a sparse radius scale on root:

• --wb-radius-s: 2px
• --wb-radius-m: 4px
• --wb-radius-l: 8px
• --wb-radius-full: 50% (circle, not pill)

The default radius is rectangular 0px. Buttons sit at 4px ({rounded.md}); inputs sit at 4px; only avatars take the full circle. Note: the brand declares --wb-radius-full: 50% rather than the 9999px pill — circular geometry only, never a pilled button. This is the divergence from Porsche (which pills every CTA at 9999px) and from BMW corporate (which holds 0px on every CTA).

Components

Top Navigation

top-nav — Dark cinema bar pinned to the top of the page. Background {colors.canvas-dark} (#000000 — sits flush against the hero photograph), text {colors.on-dark} (#ffffff), height 56px, padding 0px × 32px. Left: Mercedes star wordmark; center-right: primary menu (Brand, Innovation, Magazine, Cars, Sustainability); far right: search + utilities. Menu items render in {typography.body-md} (14px / 400 / 22px line-height).

top-nav-link — Background transparent, text {colors.on-dark}, {typography.body-md}, padding 0 × 16px horizontal.

Hero Bands

hero-band-cinema — Full-bleed black cinema band. Background {colors.canvas-dark}, holds the CLA model photograph; display h1 in {typography.display-xl} (MBCorpo Title 64px / 400) renders white over the photograph. Zero padding — photograph fills edge-to-edge.

hero-overlay-headline — Transparent overlay headline on the cinema photograph. Text {colors.on-dark}, typography {typography.display-lg} (MBCorpo Title 48px / 400). "The all-new electric CLA" reads in serif over the dark band.

Editorial Bands

editorial-band-anniversary — The brand's magazine signature. Background {colors.canvas-dark} (#000000), text {colors.on-dark}, typography {typography.display-xl} (MBCorpo Title 64px / 400). Padding 96px × 140px. Reads "140 YEARS. 140 PLACES." with an accompanying lifestyle photograph at right. Punctuates the white-canvas article grid without selling a model. Where BMW corporate uses a cta-band-photo and Porsche uses a locator-card, Mercedes uses an editorial anniversary band.

Article Cards

article-card-small-thumb — The dominant magazine pattern. Background {colors.canvas} (#ffffff), text {colors.ink}, {rounded.none} 0px corners, zero padding. Composition: small thumbnail at left (~160px wide), eyebrow + headline at right. Eyebrow in {typography.eyebrow} (12px / 400 / lowercase "Editorial") tinted {colors.body-muted} (#9f9f9f); headline in {typography.display-sm} (MBCorpo Title 24px / 400) in {colors.ink} (#000000).

article-card-feature — A larger feature variant for primary editorial content. Background {colors.canvas}, text {colors.ink}, {typography.display-md} (32px / 400) headline. Larger thumbnail (~50% of card width), feature image takes top, headline below.

article-card-side-photo — Side-by-side article card — photograph on one side, eyebrow + headline + 1-line dek on the other. Same {rounded.none}, same {typography.display-sm} headline, same eyebrow treatment.

article-thumbnail — The card's photo plate. Background {colors.hairline} (#e8e8e8 — soft grey before the image renders), {rounded.none} 0px corners. Holds the photograph edge-to-edge.

eyebrow-editorial — The lowercase "Editorial" label above every article card. Background transparent, text {colors.body-muted} (#9f9f9f), typography {typography.eyebrow} (12px / 400 / no tracking). The magazine signature — lowercase, not UPPERCASE TRACKED.

Buttons

button-primary — Standard primary CTA. Background {colors.primary-button} (#0078d6 — --button-theme-color), text {colors.on-dark} (#ffffff), typography {typography.body-md} (14px / 400 / no tracking), padding 12px × 24px, height 48px, rounded {rounded.md} (4px — --wb-radius-m). Where BMW corporate's button is a sharp 0px rectangle and Porsche's is a fully pilled white slug, Mercedes-Benz's CTA holds a soft 4px radius — closer to magazine-pull-quote than racing-precision.

button-primary-active — Press state. Background shifts to {colors.primary-active} (#014880 — --theme-active).

button-primary-disabled — Inactive state. Background {colors.primary-disabled} (#80c6ff — --theme-disabled), opacity 0.6.

button-secondary-on-dark — Transparent pill with 1px white outline over the cinema photograph. Background transparent, text {colors.on-dark}, 1px white border, {rounded.md} 4px radius. The hero CTA pattern.

Forms

text-input — Background {colors.canvas}, text {colors.ink}, {typography.body-md}, rounded {rounded.md} (4px), padding 13px × 16px, height 48px, 1px {colors.hairline-strong} border (#dbdbdb).

text-input-focus — Focus state. 1px {colors.primary} (#0260ab — Mercedes Blue) border. The only place chromatic voltage surfaces in the form chrome.

Misc

footnote-block — WLTP-disclosure paragraph. Background transparent, text {colors.body-fine} (#919191), typography {typography.body-footnote} (14px / 400 / 21px line-height). 63px tall captured.

wordmark-footer — Closing white footer with the Mercedes-Benz wordmark. Background {colors.canvas}, text {colors.ink}, body-md typography, padding 72px × 32px. Multi-column link list below.

footer-link — Background transparent, text {colors.ink-muted} (#262626), body-md typography.

Do's and Don'ts

Do

• Split typography at the display/body seam: MBCorpo Title serif for headlines, MBCorpo Text sans for body. The serif-on-sans contrast is the editorial voice.
• Lock body at 14px / weight 400 / 22px line-height — the captured signature (92 occurrences). Body never promotes to 16px on this surface.
• Render eyebrow labels lowercase ("Editorial") tinted {colors.body-muted} (#9f9f9f), not UPPERCASE TRACKED.
• Hold article cards at {rounded.none} (0px) — rectangular magazine geometry is the default.
• Use a 4px {rounded.md} (--wb-radius-m) on every button and text input — never 0px on buttons, never pill.
• Reserve {colors.primary} (#0260ab Mercedes Blue) for --theme-primary button fills and active states only.
• Use the 140-year black editorial band pattern to punctuate the white-canvas grid — it replaces the cta-band-photo convention.

Don't

• Don't paint the cinema hero CTA in {colors.primary} (#0260ab Mercedes Blue). Theme blue is bound to --theme-primary for button fills against light surfaces and active states — the hero CTA is transparent-with-white-outline over the photograph.
• Don't promote body to 16px on the magazine surface. The captured body signature is 14px / 400 / 22px line-height — 16px belongs to lead paragraphs only and breaks the editorial-row rhythm.
• Don't bold the eyebrow or uppercase-track it. The lowercase "Editorial" tinted {colors.body-muted} is the brand's magazine signature; UPPERCASE TRACKED reads as BMW corporate "LEARN MORE", not Mercedes editorial.
• Don't add a brand color other than theme blue. The brand's --wb-* palette holds 80+ red/green/yellow tokens scoped to semantic chart states only — never as decorative accents on the magazine surface.
• Don't promote any display token to weight 500 or 700. MBCorpo Title sits at 400 across every display tier; the family swap (Title vs Text) carries the emphasis, not weight.
• Don't pill the primary button at 9999px. The brand's --wb-radius-full is 50% (circle for avatars), not pill — and --wb-radius-m (4px) is the canonical button radius. A pill reads as Porsche, not Mercedes.
• Don't use the article-thumbnail grey ({colors.hairline} — #e8e8e8) as a body text or bg fill. It's the placeholder-before-image color for thumbnails, not a surface token.
• Don't dump every --wb-grey-* value into the spec. The brand declares 11 grey steps, but the brand-experience surface uses 5 of them — promote the captured set, not the full palette.

Known Gaps

• The extractor captured the mercedes-benz.com brand-experience landing page (magazine format). The configurator (paint pickers, interior swatches, wheel options, EQ-class electric-range simulator), the dealer locator, the inventory grids, and the Mercedes me account surface live on separate sub-domains and hold many more model-specific tokens.
• MBCorpo Title and MBCorpo Text are licensed to Daimler; documented fallbacks (DaimlerCAC-Regular, DaimlerCS-Regular) are also licensed and not publicly available.
• Animation easing tokens (--wb-move cubic-bezier(.3, 0, 0, 1), --wb-fade cubic-bezier(0, 0, .3, 1), --wb-open cubic-bezier(.25, .1, .25, 1)) are captured on root but not exercised on the magazine landing surface.
• The full --wb-* palette holds 80+ red/green/yellow ladders that surface in semantic charts and validation states elsewhere; this spec captures the structural subset visible on the landing page.
• Form validation states beyond text-input-focus, the Mercedes me account surface, and the in-product configurator are out of scope.
• A cookie-consent overlay can occlude part of the hero band on first visit; the lead band content may not be fully represented in the captured screenshot.
• Drop shadow tokens (--wb-shadow-s, --wb-shadow-m, --wb-shadow-l) are declared on root but rarely surface on the captured magazine surface — photography and color-block contrast carry the depth.