mobile.de

Overview

mobile.de is Germany's largest vehicle marketplace, serving millions of buyers and sellers across automotive, motorcycle, RV, and e-bike categories. The design system embodies "Functional Warmth"—a philosophy that combines clean, accessible interfaces with energetic accent colors that signal action and trust. The brand personality is direct, pragmatic, and customer-centric: the UI removes friction from complex vehicle searches and transactions through clear information hierarchy, intuitive form patterns, and decisive call-to-action elements. The visual language prioritizes clarity over decoration, using a light neutral canvas (rgb(230, 234, 240)) paired with a bold, warm primary orange-red (#db3000) that commands attention on CTAs and key interactions. Voice: straightforward, helpful, never condescending. Example: "Find your next car in seconds—compare prices, specs, and dealer ratings all in one place."

Colors

The color system is anchored by a warm, high-saturation primary (#db3000)—a vibrant orange-red that appears on all primary action buttons, links, and focus states. This color was chosen for its psychological association with urgency and trust in automotive commerce, and it maintains strong contrast (ratio 4.5:1) against white text. The surface stack uses a cool, neutral light gray (#e6eaf0) as the default background, with a white (#ffffff) surface-bright for cards and elevated containers. Secondary (#923ac1, a deep purple) and tertiary (#ff6600, a warm orange) provide supporting accent roles for badges, status indicators, and secondary actions. The on-surface text color is a near-black (#1b1b21) at 400–600 weight for body copy, ensuring legibility at 14–16px sizes. Error states use a muted

Typography

The type system uses two custom typefaces—YouthHero for display and headline scales (weights 600–700), and YouthBase for body and label scales (weights 400–600). Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptions, while body-md (16px, 400 weight, 24px line-height) serves as the default for form labels, list items, and standard content. Label-md (14px, 500 weight, 20px line-height) is applied to button text, input placeholders, and metadata; label-sm (12px, 500 weight, 16px line-height) for badges, helper text, and secondary information. All body text uses a lin

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px and a gutter of 24px (12px padding on each side of columns). The page rhythm is built on a semantic spacing scale: xs (4px) for micro-spacing within components, sm (12px) for internal padding in form fields and list items, md (24px) for section margins and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The design favors a fluid, responsive approach: on mobile (< 576px), the gutter reduces to 16px and single-column layouts dominate; on tablet (576–1008px), a 2–3 column grid emerges; on desktop (> 1008px), the full 12-column grid is active. White-space is used generously—no element should have less than 12px of breathing room from its neighbors. Cards and con

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle background color shifts. Level 1 (Base): the default surface (#e6eaf0) with no shadow, used for the page background and neutral containers. Level 2 (Standard Card): white background (#ffffff) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, dropdowns, and modals. Level 3 (Elevated/Hover): the same white background with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used when cards are hovered or when modals are stacked. Interactive elements (buttons, inputs) on hover receive the Level 2 shadow to signal lift. Disabl

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but conservatively, avoiding both harsh 90° angles and excessive organic curves. Buttons use rounded.lg (1rem / 16px) for a friendly, approachable feel while maintaining professional clarity. Input fields and form controls use rounded.md (0.75rem / 12px) to signal interactivity without overwhelming the interface. Cards and containers use rounded.xl (1.5rem / 24px) for a softer, more inviting appearance. Badges and pills use rounded.full (9999px) to create a distinct visual category. Dropdowns and modals use rounded.

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#db3000) background with white text, {typography.label-md} (14px, 500 weight), {rounded.lg} (16px), and 8px vertical / 24px horizontal padding for a 48px total height. On hover, the background shifts to #ad2300 (a darker shade) and receives {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to signal lift. On active/pressed, the background becomes #8a1a00 with no shadow. The button-secondary variant uses a transparent background with a 1px border in {colors.outline-variant} (#c4c7cb), text in {colors.primary}, and the same padding and typography. On hover, the background becomes {colors.surface-container-high} (#dfe3eb) and the border shifts to {colors.outline} (#79747e). All bu

Do's and Don'ts

**Do**

• Do use {colors.primary} (#db3000) exclusively for primary CTAs, focus states, and critical interactive elements—it is the brand's signature and must remain distinctive.
• Do maintain at least 12px of white-space (via {spacing.sm} or larger) between all interactive elements to prevent accidental clicks and improve scannability.
• Do apply {typography.label-md} (14px, 500 weight) to all button text and form labels—consistency in labeling creates predictability and reduces cognitive load.
• Do use {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) as the default shadow for cards and dropdowns; reserve {elevation.lg} for hover and modal states only.
• Do pair YouthHero headlines with YouthBase body text—the contrast between the geometric headline font and the friendly body font creates visual hierarchy without jarring shifts.

**Don't**

• Don't use secondary (#923ac1) or tertiary (#ff6600) colors on primary CTAs—they lack the urgency and trust associations of the primary orange-red and will dilute brand recognition.
• Don't apply rounded.full (9999px) to buttons or input fields—it is reserved for badges and pills to maintain a clear visual distinction between action elements and status indicators.
• Don't exceed {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) shadow depth on any component; deeper shadows create visual clutter and reduce the perceived lightness of the interface.
• Don't use {colors.on-surface} (#1b1b21) text on {colors.primary} (#db3000) backgrounds—the contrast ratio falls below 4.5:1. Always use {colors.on-primary} (#ffffff) on primary backgrounds.
• Don't mix YouthHero and YouthBase in the same heading or label—use YouthHero for all display/headline scales and YouthBase for all body/label scales to maintain typographic coherence.