DMEXCO

Overview

DMEXCO is Europe's premier digital marketing and technology conference, positioned as the nexus where industry leaders, agencies, commerce innovators, and tech pioneers converge to shape the future of the digital economy. The brand embodies a "Bold Precision" aesthetic—a movement that marries vibrant, high-saturation accent colors (electric blue #0000ff, vivid orange #ff6900, golden amber #fcb900) with clean, minimalist typography and architectural white space. The visual language conveys urgency, forward momentum, and intellectual rigor: every color choice signals actionability, every layout decision prioritizes clarity over decoration. The emotional response is one of energized focus—users feel they are entering a space where serious business meets cutting-edge innovation, where networking is purposeful and content is curated for decision-makers.

The brand voice is direct, authoritative, and conversational without being casual. DMEXCO speaks to C-suite marketers, agency leaders, and tech strategists in language that respects their intelligence: precise, jargon-aware, and outcome-focused. Vocabulary patterns emphasize leadership ("Top-Entscheider"), momentum ("Zukunft der digitalen Wirtschaft"), and community ("Triff", "Sei dabei"). The tone avoids breathless hype; instead, it positions DMEXCO as the inevitable gathering place for professionals who refuse to fall behind. Example sentence in brand voice: "Am 23. & 24. September 2026 in Köln treffen sich die Entscheider, die den digitalen Markt morgen prägen."

Colors

The DMEXCO color system is built on a foundation of pure white (surface: #ffffff) paired with three high-saturation accent colors that function as the brand's signature energy. Primary (#0000ff, electric blue) is the dominant call-to-action color, deployed on buttons, links, and interactive elements to signal immediate engagement—its purity and intensity demand attention without feeling corporate or sterile. Secondary (#ff6900, vivid orange) and Tertiary (#fcb900, golden amber) serve as supporting accents for highlights, badges, and secondary information hierarchies, creating visual rhythm across content sections. The neutral palette—black (#000000) for text and dark surfaces, grays (#cccccc, #abb8c3) for dividers and disabled states—ensures legibility and prevents color fatigue. On-surfac

Typography

The type system centers on New Rail Alphabet (300 weight, light) as the primary typeface, chosen for its geometric precision and contemporary neutrality—it communicates modernity without sacrificing readability. Display (88px, 300 weight, -0.02em letter-spacing) is reserved for hero headlines and major section titles, commanding attention through scale rather than weight. Headline-lg (48px) and Headline-md (32px) establish clear visual hierarchy for section breaks and card titles, maintaining the 300 weight to preserve the brand's refined, non-aggressive aesthetic. Body-lg (18px) and Body-md (16px) at 300 weight ensure comfortable reading for long-form content and descriptions; the light weight is offset by generous line-height (28px for body-lg, 24px for body-md) to prevent visual strain.

Layout

The page grid follows a 12-column fluid layout with a max-width container of 1280px, ensuring content remains scannable on desktop while adapting gracefully to tablet and mobile viewports. The spacing scale is semantic: unit (8px) serves as the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) used for progressive separation of content blocks. Section separation uses lg spacing (40px) to create breathing room between hero, feature sections, and footer—this rhythm prevents visual congestion and guides the eye through the narrative flow. Gutter spacing (24px) is applied consistently to left/right margins on all containers, creating a safe zone that prevents text from touching viewport edges. The hero section occupies 100% viewport height with a gradient background (linear-g

Elevation & Depth

Depth in the DMEXCO system is achieved through subtle shadows and layered backgrounds rather than dramatic depth effects. Level 1 (Base): The white surface (#ffffff) with no shadow, establishing the neutral foundation. Level 2 (Standard Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, input fields, and floating elements—this soft, close shadow (3px blur, 8px spread) creates gentle separation from the background without visual heaviness. Level 3 (Modals/Elevated Surfaces): box-shadow: 0 10px 10px rgba(0, 0, 0, 0.27) for modals, dropdowns, and overlays—the larger bl

Shapes

The DMEXCO shape language follows "Geometric Pragmatism"—a philosophy that balances sharp architectural edges with selective softness to convey both precision and approachability. Buttons and primary CTAs use full border-radius (rounded: 9999px, or border-radius: 21.33px in computed values) to create pill-shaped forms that feel modern and clickable; this softness signals invitation and reduces visual aggression. Cards and containers use md border-radius (0.75rem / 12px) to introduce subtle rounding that prevents the harsh corners of sharp rectangles while maintaining a structured, professional

Components

Action Elements Buttons are the primary interaction pattern and come in two variants: primary (blue #0000ff background, white text, 44px height, padding 10.67px 32.89px, border-radius 21.33px) and secondary (black #000000 background, white text, identical dimensions). Both use New Rail Alphabet 16px 300 weight for consistency with body text. On hover, primary buttons darken to #0000cc with a 0.2s ease-in-out transition; secondary buttons darken to #1a1a1a. Focus states add a 3px outline in rgba(0, 0, 255, 0.3) for keyboard accessibility. Links use primary blue (#0000ff) with no underline by default; on hover, underline appears (text-decoration: underline) with the same 0.2s transition. The CTA "Zum Programm" (primary button) is the most prominent interactive element on the hero, positi

Do's and Don'ts

**Do**

• Do use primary blue (#0000ff) exclusively for CTAs and primary interactive elements—its saturation and purity make it unmistakable and clickable.
• Do maintain the 300 weight of New Rail Alphabet across all body and headline text to preserve the refined, contemporary brand voice.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create subtle depth without visual heaviness.
• Do use full border-radius (9999px) on buttons and badges to signal interactivity and reduce cognitive friction.
• Do respect the lg spacing (40px) between major content sections to create visual rhythm and prevent information overload.
• Do apply 0.2s ease-in-out transitions on all interactive state changes (hover, focus, active) for smooth, predictable feedback.

**Don't**

• Don't use secondary colors (orange #ff6900, amber #fcb900) for primary CTAs—reserve them for badges, highlights, and supporting information only.
• Don't apply heavy font weights (600+) to body text; the 300 weight is core to the brand's refined aesthetic and should not be overridden for emphasis.
• Don't use sharp border-radius (0px) on buttons or interactive elements; full rounding (9999px) is the brand standard for all primary actions.
• Don't introduce new accent colors outside the defined palette (primary blue, secondary orange, tertiary amber, error red); this dilutes brand recognition and creates visual chaos.
• Don't reduce spacing below sm (12px) for section separation; the lg (40px) rhythm is essential to the brand's breathing room and clarity.
• Don't apply box-shadow values larger than lg (0 10px 10px rgba(0, 0, 0, 0.27)) to standard elements; reserve lg shadows for modals and top-level overlays only.