What is Mercedes-Benz's primary brand color?

Mercedes-Benz's single chromatic voltage is theme blue — `#0260ab`, bound to the `--theme-primary` CSS variable in the brand's `--wb-*` system. The pressed state shifts to `#014880` (`--theme-active`, also `--wb-blue-25`), and the disabled fall-back is `#80c6ff` (`--theme-disabled`, `--wb-blue-75`). The button-theme color `#0078d6` (`--button-theme-color`, `--wb-blue-45`) is a slightly brighter cousin used for specific button fills. The brand never paints CTAs in chromatic voltage over the cinema hero photography — black, white, and the photograph carry the visual weight. The blue scope is button fills, active states, and inline link hovers, not hero CTAs.

What typography does Mercedes-Benz use, and what should I substitute?

Mercedes-Benz runs a licensed pair: **MBCorpo Title** — declared as `"MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif` — carries every display headline. **MBCorpo Text** — declared as `"MBCorpo Text", "DaimlerCS-Regular", "DaimlerCSArab-Regular", sans-serif` — carries body, captions, footnotes at 14px / weight 400 / 22px line-height. The CJK and Arabic fallbacks (DaimlerCAC, DaimlerCACArab, DaimlerCS, DaimlerCSArab) are explicit in the CSS for the global market. Both faces are licensed to Daimler. Substitutes: **Source Serif 4** or **Tinos** at weight 400 approximates MBCorpo Title for the serif display role; **Inter** or **Söhne** at weight 400 with `tracking: normal` approximates MBCorpo Text for the sans body. The serif-on-sans split is the move worth preserving — most luxury-auto systems run sans-only.

Why are Mercedes-Benz's article cards rectangular?

Every editorial article card, model thumbnail, and content tile uses `{rounded.none}` — 0px corner radius. The brand's `--wb-radius-*` scale defines only three values: 2px (`--wb-radius-s`), 4px (`--wb-radius-m`), and 8px (`--wb-radius-l`) — paired with `--wb-radius-full: 50%` for circular avatars. The default radius for every surface is 0px; the named radii surface inside utility chrome only (form chips, mini-toasts). Where Porsche softens every photo tile to 32px and Airbnb rounds to 12px, Mercedes-Benz holds the rectangular magazine geometry — closer to print-editorial than consumer-tech. The binary 0px-or-circle radius vocabulary reads as engineered, archival, German.

What is the 140-year editorial band, and how does it work as a layout pattern?

The page interrupts the white-canvas article-card grid with a single black editorial band reading "140 YEARS. 140 PLACES." — a brand-anniversary callout that punctuates the rhythm without selling a model. Background `{colors.canvas-dark}` (#000000), display headline in MBCorpo Title at large display size, accompanying lifestyle photograph at right. Padding follows the `--wb-grid-content-width` 86vw / `--wb-grid-column-width` `min(calc((86vw - 11 * 2.5rem) / 12), 103.33px)` 12-column grid. The pattern is the brand's magazine signature — light editorial grid, then a single black band carrying typography over photograph, then back to the light grid. It replaces the dark-hero / cta-band-photo / footer cadence that BMW and Porsche use.

Can I use this DESIGN.md to build a React magazine surface or brand-experience site?

Yes — the file is built to feed into Claude, Cursor, or any AI coding tool that reads structured tokens. The agent will reproduce Mercedes's editorial restraint: MBCorpo Title serif headlines, MBCorpo Text 14px body, theme blue scoped to `--theme-primary` only, 0px rectangular cards, and the 140-year black editorial band rhythm — rather than a generic dark-luxury template. The 19 components cover the brand-experience surface: top nav, cinema hero, editorial article card (4 patterns: small-thumb, two-up, single feature, side-by-side), editorial eyebrow, model thumbnail, the 140-year band, and the wordmark footer. Paste the `--wb-*` tokens straight into Tailwind config — they map one-to-one as CSS custom properties.

What's missing from this Mercedes-Benz DESIGN.md spec?

The extractor captured the brand-experience landing page at mercedes-benz.com — a magazine-format surface. 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. 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 but not exercised on the magazine surface. The full `--wb-*` palette holds 80+ near-duplicate hex values across red/green/yellow ladders that surface in semantic charts and validation states elsewhere; this spec captures the structural subset visible on the brand-experience landing page.

Mercedes-Benz Design System

Mercedes-Benz brand experience as a DESIGN.md file.

About Mercedes-Benz DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source mercedes-benz.com

Automotive

Mercedes-Benz's brand-experience site reads as an automotive magazine — not a configurator funnel, not a dealer inventory grid. The page opens on a black cinema band (`#000000`) holding a single CLA render, then drops to a white canvas (`#ffffff`) where two-column editorial article cards stack with small thumbnails and a lowercase "Editorial" eyebrow above each. A black band reading "140 YEARS. 140 PLACES." punctuates the middle. Type runs the brand's licensed pair: MBCorpo Title, a licensed serif declared as `"MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif`, carries every display headline; MBCorpo Text, the sans companion, carries body at 14px / weight 400 / 22px line-height. The serif-on-sans split is the editorial signature — where BMW and Porsche hold a single sans across every text role, Stuttgart's other luxury-automotive icon splits the family at the display/body seam.

This page packages the system into a single DESIGN.md file following the Google Labs open spec. Inside: 19 color tokens drawn from the brand's `--wb-*` palette (an 11-step grey ladder, 18-step blue scale, parallel red/green/yellow accent ladders, and the single theme voltage at `--theme-primary` #0260ab); 9 typography tokens running through MBCorpo Title for display and MBCorpo Text for body; 4 corner-radius values (0px, 2px, 4px, 8px) plus a 50% circle for avatars; the brand's `--wb-spacing-*` scale from 0.25rem (4px) through 6rem (96px); and 19 components covering top nav, hero band, editorial article card, model thumbnail, editorial eyebrow label, footnote paragraph, and the 140-year black editorial band.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes React surfaces that read as Mercedes-Benz brand experience — MBCorpo serif headlines over white canvas, rectangular thumbnail cards, theme blue scoped tight to `--theme-primary`, editorial eyebrow above every article — rather than a generic dark-luxury automotive template. Reference the `{token.refs}` directly in Tailwind config, or use the spec as an audit lens: most luxury-auto sites borrow Mercedes's serif display but miss the strict 14px body weight and the magazine-band rhythm that make it work.

What makes it distinct

Serif-on-sans typographic splitMBCorpo Title licensed serif for display, MBCorpo Text sans for 14px body, where BMW and Porsche stay monospaced-sans across the whole scale
Single voltage scoped to themeMercedes Blue (#0260ab) is bound to `--theme-primary` for buttons and active states only, never as a CTA fill over photography
Editorial magazine band rhythmalternating white article-card grid and a 140-year black editorial band, photography handles the visual weight
Rectangular by defaultevery thumbnail, card, and editorial tile uses 0px corners; only avatar circles break the geometry
Eleven-step grey ladder`--wb-grey-05` through `--wb-grey-95` give the system 11 graded neutrals before any chromatic accent enters

Live at mercedes-benz.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

mercedes-benz.com

Explore Mercedes-Benz

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Mercedes-Benz design system FAQ

Common questions about Mercedes-Benz's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Mercedes-Benz Brand Experience

The live brand-experience site — see the MBCorpo serif headlines, theme-blue active states, and the 140-year black editorial band in production.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Mercedes-Benz in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→