The Marcom Engine

Overview

The Marcom Engine is a premium B2B marketing and sales platform engineered for the automotive industry, delivering data-driven insights through a meticulously crafted interface. The design system embodies Architectural Minimalism—a philosophy that prioritizes structural clarity, high-contrast legibility, and purposeful restraint. The aesthetic combines a monochromatic foundation (pure white #ffffff surfaces against near-black #0e0e0e text) with strategic accent colors: a vibrant coral-red secondary (#f0523d) for call-to-action urgency, and a bright cyan tertiary (#00b2ff) for secondary interactions. This palette evokes precision, trust, and professional authority—the visual language of engineering blueprints translated into digital form.

The brand voice is direct, data-centric, and unapologetically German in its efficiency. Copy avoids marketing hyperbole; instead, it speaks in concrete business outcomes: "Eine Marketing- und Sales-Plattform, die sich auf Daten und Erkenntnisse stützt, kundenorientiert ist und echte Geschäftseffekte schafft." (A platform grounded in data and insights, customer-focused, delivering real business results.) The tone is authoritative yet approachable, technical yet accessible. Example sentence: "Unsere Plattform transformiert Kundendaten in messbare Vertriebserfolge—ohne Umschweife." (Our platform transforms customer data into measurable sales success—without detours.)

Colors

The color system operates on a principle of maximum contrast and functional clarity. The primary surface is pure white (#ffffff) with a near-black on-surface text color (#0e0e0e, RGB 14, 14, 14), creating a 19:1 WCAG AAA contrast ratio for accessibility and visual authority. The surface container stack ranges from the brightest (#ffffff) through mid-tones (#e7e7e7) to the dimmest (#fafafa), enabling subtle depth without abandoning the monochromatic foundation. The secondary color, a warm coral-red (#f0523d), is reserved exclusively for primary CTAs, form submissions, and high-priority alerts—it appears sparingly but commands immediate attention. The tertiary cyan (#00b2ff) supports secondary interactions, informational badges, and link states. Neutral grays (#a9a9a9 for outline, #3e3e3e fo

Typography

The type system pairs Aktiv Grotesk—a geometric sans-serif with distinctive letterforms and generous spacing—for headlines and display text, with Source Sans Pro for body copy and UI labels. Aktiv Grotesk's 400 weight at 62px (display) and 48px (headline-lg) creates commanding presence without heaviness; its open counters and slightly condensed proportions evoke technical precision. Source Sans Pro, set at 400 weight for body text (16px, 24px line-height) and 700 weight for labels, provides warm legibility and professional restraint. Letter-spacing is conservative across all sizes (−0.02em on display, −0.015em on headlines, 0.01em on body) to maintain the architectural tightness of the brand. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on dark backgrounds (hero

Layout

The layout operates on a 12-column grid with a maximum container width of 1200px, ensuring content remains scannable on desktop while adapting fluidly to tablet and mobile viewports. The gutter spacing is consistently 24px (md spacing token), creating breathing room between sections without excessive whitespace. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for grouped elements within cards. The hero section spans full-width with 80px vertical padding and a subtle gradient overlay (rgba(26, 42, 58, 0.95) to rgba(14, 14, 14, 0.9)) to ensure text legibility over background imagery. Cards and containers use the DEFAULT rounded value (0.5rem / 8px) for subtle definition without softness, maintaining the architectura

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the soft, diffused aesthetic of Material Design 3's default shadows. The elevation scale comprises three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card borders and input focus states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdown menus, and lg (0 4px 33px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04)) for modals and floating panels. The lg shadow includes a 1px outline at 4% opacity to define edge boundaries without introducing a visible border. Shadows are applied sparingly—primarily to card

Shapes

The shape philosophy is termed Architectural Sharpness: rounded corners are minimal and purposeful, never organic or playful. The rounded scale uses 0.5rem (8px) as the DEFAULT for most components (buttons, cards, inputs), creating a subtle softening that prevents harsh right angles without introducing curvature. Larger components like modals and hero sections use 1rem (16px) for slightly more breathing room. The full value (9999px) is reserved exclusively for badges and pill-shaped elements, where the circular form serves a semantic function (indicating a tag or status). Border-radius is neve

Components

Action Elements Buttons are the primary interaction mechanism and must be visually distinct. The button-primary component uses {colors.primary} (white #ffffff) background with {colors.on-primary} (near-black #0e0e0e) text, a 1px border at {colors.on-surface}, and padding of 17px 29px to accommodate the label-md typography (14px, 400 weight). On hover, the background transitions to {colors.surface-container-low} (#f0f0f0) over 200ms ease-out, maintaining the border. The button-accent variant uses {colors.secondary} (#f0523d) background with white text, reserved for high-priority CTAs like "Kontakt" or form submissions. Button-secondary is transparent with a 1px border, used for tertiary actions like "Über Uns" or "Leistungen." All buttons enforce a minimum height of 48px for touch acces

Do's and Don'ts

**Do**

• Do use the secondary coral-red (#f0523d) exclusively for primary CTAs and high-priority alerts—never for decorative elements or secondary UI.
• Do maintain the 19:1 contrast ratio between white surfaces and near-black text; avoid mid-tone grays for body copy.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns; use lg shadow only for modals and floating panels.
• Do set button heights to a minimum of 48px and padding to 17px 29px for comfortable touch targets and visual balance.
• Do use Aktiv Grotesk for all headlines and display text; reserve Source Sans Pro for body copy and labels only.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for smooth, professional feedback.

**Don't**

• Don't use the tertiary cyan (#00b2ff) for primary CTAs; it is reserved for secondary interactions and informational elements.
• Don't apply border-radius greater than 1rem (16px) to standard UI components; the brand aesthetic demands architectural sharpness.
• Don't use soft, diffused shadows (blur > 20px); maintain the crisp, technical elevation system with shadows at 3–33px blur.
• Don't mix Aktiv Grotesk and Source Sans Pro within a single headline; establish clear typographic hierarchy through size and weight alone.
• Don't apply color overlays or tints to the monochromatic surface palette; preserve the high-contrast foundation for accessibility and authority.
• Don't use the inverse palette (#1a1a1a background) for body content sections; reserve it for headers, footers, and dramatic visual breaks.