Crossmediaworld

Overview

Crossmediaworld is a B2B dialogmarketing and data services provider that transforms complex address management and cross-media campaign orchestration into a confident, direct visual experience. The brand serves mid-market and enterprise clients seeking precision-driven marketing infrastructure. The aesthetic is 'Technical Confidence'—a fusion of bold, saturated accent colors (vivid magenta #FF396E and electric teal #14E0C8) against a clean, minimalist white canvas, paired with geometric sans-serif typography (Unbounded for headlines, Roboto Condensed for body). The emotional response is energetic yet trustworthy: the brand feels like a partner that moves fast, speaks clearly, and delivers results without pretense.

The voice is direct, data-literate, and solution-oriented. Crossmediaworld avoids jargon bloat; instead, it names problems plainly ('Adressdatenmanagement', 'Lettershop-Service') and positions solutions as straightforward capabilities. Tone: professional but not stiff, confident without arrogance. Example sentence in brand voice: 'Wir produzieren integrierte Dialoge—online und offline, datenbasiert und skalierbar.'

Colors

The color system is built on a high-contrast, data-forward palette. Primary (#FF396E, a vivid magenta-pink) is the signature accent—used exclusively on call-to-action buttons, interactive states, and brand-critical UI elements. It commands attention without aggression, signaling action and urgency. Secondary (#192171, a deep navy) provides a cooler, more corporate anchor for headings and secondary navigation, grounding the energy of the primary. Tertiary (#14E0C8, electric cyan) is a supporting accent for highlights, badges, and accent text—it creates visual rhythm and draws the eye to secondary information without competing with primary.

Surface colors follow a clean, light-mode-first philosophy: surface (#FFFFFF) is the default canvas, with a stepped container stack (surface-container-l

Typography

The type system pairs two distinct typefaces to create visual hierarchy and brand personality. Unbounded (a geometric, angular sans-serif) is reserved for display, headline-lg, headline-md, and title-lg—it conveys confidence and modernity, with weights ranging from 700 to 800 for maximum impact. Letter-spacing is tightened (-0.04em on display, -0.02em on headline-lg) to enhance the geometric precision. Roboto Condensed (a compact, utilitarian sans-serif) handles all body, label, and UI text at weights 400–600, maintaining readability at smaller sizes and reinforcing the technical, data-driven personality. Body text is set at 16px / 24px (body-md) with 400 weight for comfortable reading; labels are 14px / 20px at 600 weight for UI clarity. On small labels over busy backgrounds, apply text-s

Layout

The layout system uses a 12-column grid with a max-width of 1140px, centered on the viewport. The design favors a fluid, mobile-first approach: at breakpoints below 768px, the grid collapses to 1–2 columns with 10px side padding; at 992px and above, it expands to full 12-column capability. Spacing is semantic and hierarchical: lg (40px) separates major sections; md (24px) groups related content; sm (12px) provides breathing room within components. The gutter (24px) is applied consistently to card padding and container margins. White-space is generous—sections are not cramped—to emphasize clarity and reduce cognitive load. Container max-width (1140px) ensures text lines remain readable (typically 50–75 characters per line at body-md). Hero sections and full-width backgrounds extend edge-to-

Elevation & Depth

Depth is conveyed through a restrained shadow and layering system. The base level (surface, #FFFFFF) has no shadow. Level 1 (cards, input fields) uses elevation.md: 0 4px 12px rgba(0,0,0,0.08)—a soft, diffuse shadow that lifts content subtly from the background. Level 2 (modals, popovers, hover states) uses elevation.lg: 2px 8px 23px 3px rgba(0,0,0,0.2)—a more pronounced shadow with increased blur and spread, creating clear visual separation. Shadows are never harsh or pure black; they use rgba(0,0,0,X) to maintain the clean aesthetic. Interactive elements (buttons, list items) transition betw

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and purposefully, never organically. Border-radius follows a strict scale: sm (3px) for minimal rounding on inputs and small UI elements; DEFAULT (4px) for buttons and standard components; md (12px) for cards and larger containers; lg (15px) for modals and prominent surfaces; xl (23px) for hero sections and full-width containers; full (9999px) for badges and pill-shaped elements. The rationale: small radii (3–4px) maintain a technical, data-forward feel; medium radii (12–15px) soften the interface without sacrific

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#FF396E), textColor: {colors.on-primary} (#FFFFFF), padding: 12px 20px, height: 44px, rounded: {rounded.DEFAULT} (4px), and typography: {typography.label-md} (14px, 600 weight). On hover, button-primary transitions to button-primary-hover (backgroundColor: {colors.primary-container} #FF5281) with a 0.3s ease curve. Button-secondary is transparent with a 1px border in primary color, allowing secondary actions to coexist without visual dominance. All buttons use font-family: Roboto Condensed and disable user-select to prevent accidental text selection during rapid clicking.

Containers & Surfaces Cards (card component) use backgroundColor: {colors.surface-container-lo

Do's and Don'ts

**Do**

• Do use primary (#FF396E) exclusively on CTAs, focus states, and brand-critical interactions—never on backgrounds or body text.
• Do pair Unbounded headlines with Roboto Condensed body text to maintain the technical-confident aesthetic across all scales.
• Do apply elevation.lg (2px 8px 23px 3px rgba(0,0,0,0.2)) to modals and hover states to create clear visual hierarchy.
• Do use the spacing scale semantically: lg (40px) for section breaks, md (24px) for card padding, sm (12px) for component internals.
• Do include a 0.3s ease transition on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do respect the 1140px container max-width to maintain readability and prevent line-length bloat on large screens.

**Don't**

• Don't use primary color on non-interactive elements (backgrounds, borders, body text)—it dilutes the signal and exhausts the accent.
• Don't mix Unbounded and Roboto Condensed at the same size/weight level; reserve Unbounded for headlines (28px and above) only.
• Don't apply shadows heavier than elevation.lg (2px 8px 23px 3px rgba(0,0,0,0.2))—the aesthetic is clean and minimal, not layered or dark.
• Don't use rounded corners larger than lg (15px) on small components; full (9999px) is reserved for badges and pill-shaped elements only.
• Don't omit focus states or transitions on interactive elements—they are essential for accessibility and perceived responsiveness.
• Don't exceed 1140px container width; wider layouts break the reading rhythm and dilute the brand's precision-focused identity.