Mercedes-Benz DESIGN.md

Design System Inspiration of Mercedes-Benz

Overview

Visual Theme & Atmosphere

Mercedes-Benz offers premium and luxury passenger cars and vans. Its German sales site connects model discovery, configuration, vehicle offers and service. The company's design page describes clear forms and sensual surfaces that stage technology while evoking emotion; it connects the 300 SL's heritage with the S-Class and EQS. The official history page frames that continuity as “The future of mobility since 1886.” Company, design philosophy, history.

On the measured German homepage (mercedes-benz.de/, HTML lang="de-DE"), a black header and photographic hero lead into white sections, condensed serif headings, pale activity cards and blue pill-shaped actions. The first-party Workbench variables connect these visual choices to named colour, typography, shape and layout roles. An official job posting dated 16 October 2026 identifies Workbench as the design system behind customer-facing sales websites and reports that its latest Digital Design version launched globally that September. This is a reference to the live sales surface; the posting supplies context for its current evolution. Workbench posting.

The action hierarchy is concrete: the blue “Mehr erfahren” hero link is 53px high with a 9999px radius, #0078d6 fill and #ffffff text. The outlined “Alle Modelle entdecken” link is 45px high; its transparent background becomes #ebebeb on hover and #e0e0e0 on press. Both labels are 16px/700 MBCorpo Text. Mercedes-Benz AG's imprint gives its address as Mercedesstraße 120, 70372 Stuttgart. Imprint.

Brand Narrative

The first-party design page connects established icons with modern vehicles, using clear form and sensual surfaces to express luxury. The live site pairs that story with large imagery and condensed serif display type, then offers concrete model, configuration and service actions. The October 2026 Workbench posting adds a current digital chapter: a global Digital Design release and ongoing work on adoption and documentation. Design philosophy, Workbench.

Principles

The company's stated design ambition joins technology and emotion. For this captured sales interface, the repeatable patterns are a strong image-and-type hierarchy, a blue primary action, an outlined secondary action and distinct card treatments. These implementation patterns are observations of this page. Stated design ambition.

Personas

No persona research was verified.

Colors

The census found 4,005 computed root custom properties: 4,000 --wb-*, four --wbx-* grid aliases and one --aemf-* implementation variable. The palette below uses first-party Workbench values and computed product-control colours. The primary-button hover and active entries are root declarations; the hero link's corresponding states remain unmeasured. The secondary link's surface hover and active colours were measured directly.

The secondary action's own background is rgba(255, 255, 255, 0) over white. Header links use rgba(0, 0, 0, 0) over black. Preserve that relationship when using the rest appearances.

Consent --cmm-* variables and assistant-specific --ft-*, --reveal-order and chat background aliases are excluded from the reference palette. The census also includes those layers, so its frequency ranking is not a clean product-only palette.

Typography

Live-loaded: document.fonts reports MBCorpo Title 400 normal, MBCorpo Text 400 normal and MBCorpo Text 700 normal. These are the two families in the typography tokens. The sampled H1 declares MBCorpo Title first; both measured CTA links declare MBCorpo Text and use 16px/700, normal line-height and 0.2px letter spacing.

Official product-use documentation: no public font guideline was verified that independently names these exact CSS families for the German sales site. Their use here is supported by the live-loaded census, CSS declarations and control identities.

Official distributed assets: the census records @font-face sources on assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.5.0/. The loaded faces correspond to WOFF2/MBCorpoATitleCond-Regular-Web.woff2, WOFF2/MBCorpoSText-Regular-Web.woff2 and WOFF2/MBCorpoSText-Bold-Web.woff2. These are observed source references; no font file was downloaded separately and no reuse licence was verified.

Declared-only: the same census lists MBCorpo S Title at 400/700/800, MB Corpo A Screen1 Cond WEB and MB Corpo A Screen2 Cond WEB at declared weight 700, DaimlerCAC-Regular, DaimlerCS-Regular, DaimlerCACArab-Regular, DaimlerCSArab-Regular, Hanyi and Hanyi-Ext. None appears in the loaded-face list. They receive no specimen or family token. The body declaration reports Apple SD Gothic Neo and the first sampled button reports Arial; those environmental declarations also do not establish a product face.

Unresolved: font reuse rights and coverage beyond the captured German page. Substitute: none chosen.

Additional measured label metrics are 34px/400 for the Limousinen model-range card and 18px/700 for the Mercedes-Benz Store card title. Their anchor wrappers report 16px/400; use the child label's measurement for the visible title. The hero heading's size was not measured.

Layout

Build the desktop composition around the captured sequence: centred star in a black header, photographic hero with copy and action aligned left, promotional tiles, model-range discovery, a three-column activity-card grid, service/editorial sections and a black footer. The header's declared height is 84px.

The root grid declares 12 columns, --wb-grid-content-width: 86%, --wb-grid-width: min(86%, 105rem) and --wb-grid-gutter-width: 2.5rem. The measured hero and first card begin at x=100px in the 1440 × 1000 capture. These are desktop observations.

Static spacing declarations include .25rem tiniest, .5rem tiny, .75rem smallest, 1rem smaller, 1.5rem small, 2rem medium, 2.5rem large, 3rem larger, 4rem largest, 4.5rem huge, 5rem huger, 5.5rem hugest and 6rem jumbo. Preserve the measured CTA paddings separately from this named spacing scale.

Responsive Behavior

Mobile layouts and breakpoint behaviour were not measured; the capture was desktop 1440 × 1000 only.

Elevation & Depth

The Mercedes-Benz Store activity card has this computed rest shadow:

box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;

Both action links, both header links and the Limousinen anchor report box-shadow: none at rest. The photographed hero and the pale activity-card surface carry much of the visible separation.

Motion & Easing

The hero and secondary actions declare colour/background transitions of 0.2s with cubic-bezier(0, 0, 0.3, 1). Header Services and Suchen links declare padding, colour, background and shadow transitions of 0.2s using ease-in-out. The Store card declares a 0.3s background transition with cubic-bezier(0, 0, 0.3, 1). The Limousinen anchor itself declares all 0s ease 0s.

These are raw computed transition declarations from the control identities. The valid secondary and header samples settled after 900ms, beyond their 200ms longest reported transition; the Store samples settled after 900ms, beyond 300ms. The Limousinen sample reported a 400ms longest transition, but no descendant transition string or isolated interaction animation was verified. Reduced-motion behaviour was not measured.

Components

Use the measured rest appearances below with the pointer states in §14. Four controls have direct hover and pressed styling measurements. The capture temporarily hid fixed overlays for the pointer pass; consent remained open and trapped keyboard focus. No keyboard-focus or disabled token is supplied.

There was no product search input in the survey. Suchen is an action link; the only enumerated input belongs to the assistant widget and is excluded.

Workbench's radius variables are sharp: 0px, softer: 1px, subtle: 4px, main: 12px, soft: 24px, and round: 9999px. The latter produces the measured CTA pills. The square Limousinen anchor does not establish the radius of its child artwork.

States

The resumed capture measured pointer states with hideOverlays: true, hiding fixed layers inside open shadow roots. The necessary-only consent button reads “Nur technisch notwendige”; consent was not rejected. All six keyboard-focus states are UNMEASURED: the Tab walk stopped after 13 presses in the consent dialog. Pressed snapshots below have both :active and pointer focus, with :focus-visible false; they do not establish keyboard-focus behaviour.

The Store card's ::after stays at matrix(1, 0, 0, 1, -383.828, 0) in these snapshots. Its colour change alone does not establish a visible stripe moving into the card. The hero's hover and press remain UNMEASURED because :hover did not match even though the hit test named the intended link; its primary hover/active variables remain declaration evidence only.

The Limousinen anchor's own paint did not change in the compared snapshots, but its image subtree grew from five to ten descendants and the original image became hidden. Press added no delta over hover. This capture does not isolate interaction styling from image loading, so the card remains a prose observation without a component token. No post-blur pointer snapshot is present to resolve that question. Disabled and validation states were not measured.

Do's and Don'ts

• Use the loaded MBCorpo Title and MBCorpo Text evidence for typography; keep unavailable faces without specimens.
• Pair the blue primary pill with a transparent, outlined secondary pill on white.
• Give activity cards the measured 12px corners and subtle two-layer shadow; retain the separate model-range card structure.
• Use child label measurements when they differ from an anchor wrapper.
• Use the secondary action's measured grey hover and pressed fills, with its border and inset-shadow changes.
• Keep the hero's named hover/active declarations separate from measured interactions; its pointer states remain unmeasured.

Voice & Tone

The German surface addresses visitors with formal “Sie” and direct action labels such as “Mehr erfahren” and “Alle Modelle entdecken.” Its design page uses aspirational language around luxury, technology and emotional appeal. These are observations of the opened copy, rather than a verified editorial style guide. Design page.

Agent Prompt Guide

“Create a Mercedes-Benz-inspired desktop automotive sales page with a black header, photographic hero, loaded MBCorpo Title display type and MBCorpo Text copy. Use white content sections and pale #f8f8f8 activity cards with 12px corners. Match the measured hero action's rest appearance: #0078d6 fill and border, #ffffff 16px/700 label, 15px 31px padding and a 9999px radius. Use the transparent outlined secondary action on white, with #ebebeb hover and #e0e0e0 pressed fill. Follow the measured border, shadow and card states in this reference.”