Mercedes-Benz

Overview

Mercedes-Benz embodies **Architectural Minimalism with Digital Precision**—a design philosophy that treats the interface as a refined exhibition space where luxury and technology converge. The brand serves aspirational audiences seeking innovation, sustainability, and timeless craftsmanship; the UI evokes a sense of controlled elegance through deep blacks (#000000), strategic accent blues (#0078d6), and generous whitespace that mirrors the spatial clarity of a high-end showroom. Every interaction feels deliberate, never rushed—a digital manifestation of German engineering precision.

The voice is authoritative yet approachable: confident without arrogance, technical without jargon. Mercedes-Benz speaks in declarative statements about capability and vision, using active verbs and concrete outcomes. Tone vocabulary includes "innovation," "sustainability," "collaboration," and "heritage." Example sentence in brand voice: "The all-new electric C-Class redefines what a luxury sedan can be—seamless performance, zero compromise."

Colors

The color system is anchored in a **dark-first, accent-driven** palette that reflects Mercedes-Benz's commitment to modern luxury and environmental consciousness. Primary (#0078d6) is the signature accent—a vibrant, confident blue used exclusively on CTAs, interactive states, and brand-critical moments. This blue appears on the "Accept All" button in the cookie consent modal and all primary navigation interactions, commanding attention without aggression. Secondary (#0ca597) provides a sustainable-forward accent for status indicators and supporting actions. Tertiary (#dabb2f) is reserved for premium highlights and badge elements, evoking the brand's heritage of gold-trimmed luxury.

The surface stack is built on pure black (#000000) as the base, with carefully calibrated grays (surface-con

Typography

The typography system pairs **MBCorpo Title** (serif, authoritative) with **MBCorpo Text** (sans-serif, readable) to create a hierarchy that balances prestige with clarity. Display (60px, 700 weight, -0.04em letter-spacing) commands attention on hero sections; Headline-lg (40px, 600 weight) anchors major content blocks; Body-md (16px, 400 weight, 0.01em letter-spacing) ensures legibility at small sizes. The serif/sans pairing reflects Mercedes-Benz's dual identity: heritage craftsmanship (serif) meets cutting-edge technology (sans). Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm, 12px) overlaid on photographic backgrounds to maintain contrast. All body text uses 24px line-height (1.5 unitless) to support readability on dark backgrounds; headlines use tighter 1.2

Layout

The layout operates on a **12-column fluid grid** with a fixed container max-width of 1280px, ensuring content remains scannable on ultra-wide displays while maintaining intimacy on mobile. The gutter spacing is 24px (md spacing token), applied consistently between columns and sections. White-space is treated as a design element, not a void—sections are separated by lg spacing (40px) to create breathing room and guide the eye through content narratives. The hero section spans full-width with a 40px top/bottom padding buffer, while card-based content uses md spacing (24px) internally. Mobile breakpoints compress gutter to sm spacing (12px) and reduce container padding to maintain the minimalist aesthetic on smaller screens. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px)

Elevation & Depth

Depth is conveyed through **controlled shadow and surface stratification** rather than bright highlights or gradients. Level 1 (Base): pure black background (#000000) with no shadow. Level 2 (Standard Cards): surface-container (#171717) with a 1px border at outline-variant (#505050) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to separate from the base. Level 3 (Elevated/Modals): surface-container-high (#242424) with a 1px border at outline (#666666) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) to create pronounced separation. Interactive hover states apply box-shadow: 0 3px 8px rgba(0, 0

Shapes

The shape philosophy is **Architectural Precision with Soft Approachability**—sharp enough to feel contemporary, rounded enough to feel human. Buttons and primary interactive elements use rounded.DEFAULT (0.5rem / 8px) for a modern, slightly softened edge that avoids the sterility of sharp corners while maintaining visual clarity. Cards and containers use rounded.lg (1rem / 16px) to create a sense of enclosure and focus. Input fields use rounded.DEFAULT (8px) to align with button language and reduce cognitive load. The full radius (9999px) is reserved for badges and avatar elements, signaling

Components

Action Elements Buttons are the primary interface for user intent. **button-primary** uses background: {colors.primary} (#0078d6), text-color: white, padding: 12px 24px, height: 48px, rounded: 8px, with transition: all 0.3s ease-out. On hover, the background shifts to {colors.primary-container} (#036dc1) and applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift. Focus states add outline: 3px solid rgba(0, 120, 214, 0.8) with outlineOffset: 2px. **button-secondary** mirrors the primary structure but uses transparent background, 1px border at {colors.outline}, and text-color: {colors.primary}. On hover, the background becomes {colors.surface-container-high} (#242424) and the border shifts to primary blue, maintaining visual continuity. All buttons use label-md typogra

Do's and Don'ts

**Do**

• Do use primary blue (#0078d6) exclusively on CTAs and interactive states—it is the brand's signature accent and must never be diluted or overused.
• Do maintain the 0.3s ease-out transition timing across all interactive elements to create a cohesive, predictable motion language.
• Do apply the full M3 color stack (surface-container-lowest through surface-container-highest) to create depth through luminosity, not color saturation.
• Do use MBCorpo Title for headlines and MBCorpo Text for body copy to maintain the serif/sans pairing that reflects heritage and innovation.
• Do reserve lg spacing (40px) for section separation and md spacing (24px) for internal card padding to create visual rhythm and breathing room.
• Do apply focus outlines at 3px solid rgba(0, 120, 214, 0.8) with 2px outlineOffset on all interactive elements for keyboard accessibility.
• Do use rounded.DEFAULT (8px) for buttons and inputs, rounded.lg (1rem) for cards, and rounded.full (9999px) only for badges and avatars.

**Don't**

• Don't use primary blue (#0078d6) on non-interactive elements or backgrounds—it must remain reserved for CTAs and active states to maintain visual hierarchy.
• Don't apply shadows stronger than box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)—excessive shadows break the minimalist aesthetic and feel theatrical.
• Don't mix serif and sans fonts within a single text block; use MBCorpo Title for headlines and MBCorpo Text for body, never the reverse.
• Don't reduce spacing below sm (12px) for gutter or md (24px) for section separation—white-space is a design element, not a constraint.
• Don't use tertiary gold (#dabb2f) on interactive elements; reserve it for badges, highlights, and premium indicators only.
• Don't apply border-radius to full-width sections or the body element—preserve the architectural grid and prevent visual softness from overwhelming the layout.
• Don't omit focus outlines on interactive elements; keyboard accessibility is non-negotiable and must use rgba(0, 120, 214, 0.8) at 3px width.