Design System
Analysis of Mercedes-Benz

A disciplined monochrome system — white, black and a cool grey ramp — where colour comes only from photography and the brand voice lives in the proprietary MBCorpo typefaces and a single white pill CTA.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Two proprietary faces: MBCorpo Title for airy weight-400 headlines, MBCorpo Text for everything else. Shown here with their nearest Google substitutes — Archivo (Title) and Inter (Text).

03 — Components

Button Variants

button-primary
Black 16 px pill — the brand's signature CTA on light surfaces.
button-inverse
The live hero button: a white pill with black text, set over photography.
button-dark
Cool near-black (#15181E) for inverted bands and emphasis.
button-secondary
Ghost pill: 1 px ink outline on a transparent fill for lower-priority actions.
04 — Components

Cards & Surfaces

Cards are sharp-cornered and flat — a full-bleed image with the caption set beneath it. Depth is reserved; a subtle shadow appears only on hover.

05 — Components

Form Elements

The homepage carries no forms; these inputs are an on-brand inference — quiet hairline borders, a 4 px radius, MBCorpo Text.

text-input
textarea
06 — Foundations

Spacing Scale

A roughly 8 px base unit drives a generous vertical rhythm that lets full-bleed photography breathe.

07 — Foundations

Border Radius

Almost everything is sharp (0 px). The one expressive move is the 16 px pill button; circular controls go fully round.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: the interface is overwhelmingly flat, with no resting card shadow.
Level 1 — a soft lift for hovered cards and dialogs (normalized for the showcase).
Level 2 — deeper shadow for overlays and menus. On the live site, the only real shadow is a heavy 0 3px 7px rgba(0,0,0,.8) used to lift white text off photography.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxTeaser tiles stack to one column; headline scale drops to the 48px tier; nav collapses behind a menu trigger.
Tablet768–1023pxTwo-column teaser grid; hero stage keeps full-bleed image with the pill CTA pinned bottom-left.
Laptop1024–1279pxFull multi-column teaser tiles return; editorial bands run edge to edge.
Desktop≥ 1280pxDisplay headlines reach 64–72px; content centres within a ~1200px reading measure.

The page is a stack of full-width editorial and teaser bands rather than a boxed grid, so it reads like a magazine. The translucent header scrim and the white pill CTA persist unchanged across every breakpoint.

Model Line-up

Sample tier pattern — demonstrating the component only; figures are illustrative and not actual Mercedes-Benz pricing.

C 300
$599/mo lease*
The benchmark sports sedan.
  • 255 hp turbocharged
  • 9G-TRONIC automatic
  • MBUX 11.9" touchscreen
  • Heated front seats
C 400e● Most popular
$749/mo lease*
Plug-in hybrid, no compromise.
  • 313 hp PHEV powertrain
  • Up to 68 mi electric range
  • AIRMATIC suspension
  • Burmester® 3D surround
AMG C 63 S E
$1,199/mo lease*
Hand-built performance.
  • 671 hp AMG E PERFORMANCE
  • 0–60 mph in 3.3s
  • AMG RIDE CONTROL
  • AMG TRACK PACE

Inventory Table

A data-dense pattern in the brand's quiet, monochrome treatment — pill status chips, uppercase column labels.

IDModelPowertrainStatusWhen
#MB-001EQS 580 4MATICAll-electricAvailable2d ago
#MB-002GLC 300 4MATICMild hybridAvailable5d ago
#MB-003S 580 4MATICV8 biturboIn transit1w ago
#MB-004AMG GT 63V8 biturboAvailable1w ago
#MB-005EQB 350 4MATICAll-electricIn transit2w ago
1–5 of 412
123

Mercedes me ID

Auth pattern shown with the brand's pill buttons and ghost SSO. Sample only — not a real sign-in.

Sign in

Welcome back

OR
Create account

Create your Mercedes me ID

OR