CODEXBLAU GmbH

Overview

CODEXBLAU GmbH is a professional media production and communications agency specializing in content creation, influencer management, and strategic communications for emergency services (BOS) and community-driven brands. The design system embodies 'Technical Clarity'—a philosophy that marries industrial precision with approachable warmth. The aesthetic draws from professional broadcast design and emergency services communications, where clarity and immediate visual hierarchy are non-negotiable. The UI evokes confidence and professionalism through a clean white canvas anchored by a vibrant electric blue primary accent (#007aff), supported by secondary teal (#0076c0) and success green (#28a745) for status and affirmation. Every interaction feels intentional and responsive, reflecting the agency's commitment to showing 'what really matters—from the scene for the scene.'

The brand voice is direct, authoritative yet accessible, and never condescending. Tone: precise, action-oriented, community-focused. Vocabulary favors concrete nouns (production, strategy, community) over abstract adjectives. Example sentence in brand voice: 'Wir zeigen, was wirklich zählt—professionelle Medienproduktion für Einsatzkräfte und Marken, die ihre Geschichte authentisch erzählen.'

Colors

The color system is built on a foundation of pure white (#ffffff) surfaces with a sophisticated neutral stack (surface-container-high at #e9ecef, outline at #6c757d) that ensures legibility and professional restraint. Primary (#007aff) is the electric blue accent reserved exclusively for CTAs, active states, and brand-critical interactive elements—it commands attention without overwhelming. Secondary (#0076c0), a deeper navy blue, provides supporting emphasis for secondary actions and highlights. Tertiary (#28a745) is a professional success green used for confirmations, approvals, and positive feedback states. Error (#dc3545) is a clinical red for warnings and destructive actions. The surface stack progresses from bright white (surface-bright: #ffffff) through subtle grays (surface-contain

Typography

The typography system is anchored in Eurostile, a geometric sans-serif with strong technical roots and high legibility—ideal for professional communications and emergency services contexts where clarity is paramount. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand statements; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 700 weight) for subsections; Title-lg (20px, 700 weight) for card titles and form labels. Body-lg (18px, 400 weight, 0.02em letter-spacing) is used for long-form content and descriptions; Body-md (16px, 400 weight) for standard body copy and input placeholders. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, form labels, and navigation items; Label-sm (12px, 600 weight, 0.05em

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1024px, centered on the viewport with symmetric gutters of 24px (md spacing). The grid is fluid below 992px breakpoint, collapsing to 8 columns on tablets and 4 columns on mobile. White-space is semantic: lg spacing (40px) separates major sections (hero, features, testimonials); md spacing (24px) divides subsections and card groups; sm spacing (12px) is used between form fields and list items. The rhythm creates visual breathing room without sacrificing information density. Padding inside containers follows the md (24px) standard for cards and modals, with lg (40px) reserved for page-level sections. Margins between elements use the spacing scale consistently: adjacent buttons are separated by md (24px) horizontally

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reflects the Material Design philosophy adapted for professional contexts. Level 1 (Base/Flat): no shadow; used for body backgrounds and default card states. Level 2 (Raised): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to cards, input fields, and standard interactive elements to signal they are clickable and interactive. Level 3 (Elevated/Modal): box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); used for modals, dropdowns, and floating panels to establish clear visual hierarchy and focus. Hover states elevate by one level: a card at

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons and primary CTAs use lg (1rem / 16px) border-radius for a modern, approachable feel while maintaining professional restraint. Cards and containers use lg (1rem) to echo button styling and create visual cohesion. Input fields and select dropdowns use DEFAULT (0.5rem / 8px) for a tighter, more technical appearance that signals form functionality. Badges and pills use full (9999px) for maximum softness and visual distinction from structural eleme

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Button-primary uses {colors.primary} (#007aff) with {colors.on-primary} (white) text, 48px height, 12px 24px padding, and lg border-radius. On hover, the background shifts to #0052a3 with a 4px 12px shadow at rgba(0, 122, 255, 0.25) and translateY(-2px) transform over 200ms. On active/click, the background darkens to #003d7a with minimal shadow and no transform. Button-secondary uses surface-container-high (#e9ecef) background with primary text and a 1px outline-variant border; hover state shifts to surface-container-highest (#d0d0d0). Button-success and button-error follow the same pattern with tertiary (#28a745) and error (#dc3545) backgrounds respectively. All buttons use label-md typ