Klüh Security

Overview

Klüh Security is a professional enterprise security services brand serving Germany's largest corporations, financial institutions, and critical infrastructure operators. The design system embodies 'Corporate Clarity'—a philosophy that combines authoritative institutional trust with modern, accessible visual language. The aesthetic is deliberately restrained: clean white surfaces, structured typography, and strategic use of a vivid red accent (#e32118) that signals urgency and action without aggression. The brand personality is precise, competent, and forward-thinking—security experts who speak plainly about complex risks. The UI evokes confidence through order: aligned grids, consistent spacing, and predictable interaction patterns. Voice example: 'Our 24/7 monitoring detects threats in real time. Your facility stays secure, your team stays focused.'

Colors

The color system prioritizes clarity and trust through a three-tier hierarchy. Primary (#e32118, a vivid red-orange) is reserved exclusively for high-priority CTAs ('Jobs bei Klüh', 'Alle Cookies akzeptieren') and error states—it commands attention without appearing reckless. Secondary (#104e70, a deep teal) anchors the brand identity and is used for navigation, section headers, and secondary buttons; it conveys institutional authority and stability. Tertiary (#b84700, a burnt orange) provides accent support for highlights and tertiary CTAs, creating visual rhythm without competing with primary. The neutral palette uses pure white (#ffffff) as the dominant surface, with carefully calibrated grays (#6a7177 for body text, #737373 for secondary text, #dee2e6 for borders) that maintain 4.5:1 c

Typography

The type system uses Barlow exclusively, a geometric sans-serif that balances corporate formality with contemporary warmth. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) structures page sections; Headline-md (28px, 700 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and card descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default body text—this pairing ensures readability at all viewport sizes. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, creating visual distinction without size change. All headlines use -0.02em to -0.04em negative letter-spacing to tighten their

Layout

The layout uses a 12-column grid with a fixed max-width of 1230px, centered on the viewport with symmetric margins. The gutter is 24px between columns, creating a 1230px container that accommodates both desktop (1200px content + 30px margins) and tablet (900px content + 150px margins) without reflow. Section spacing follows a semantic scale: lg (40px) separates major content blocks (hero to section, section to section), md (24px) separates cards within a grid or list items within a container, and sm (12px) separates inline elements. The hero section spans full viewport height with a background image overlay (dark teal gradient at 60% opacity) and white text; the breadcrumb navigation sits at 16px padding below the hero. Card grids use 3 columns on desktop (1230px), 2 columns on tablet (768

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for the page background and primary content areas. Level 2 (Card/Container): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with 1px border in #dee2e6, used for cards, modals, and lifted containers—this creates a 2-3px perceived lift. Level 3 (Elevated/Hover): 0 8px 24px rgba(0, 0, 0, 0.12) shadow with the same border, used for hover states on cards and modal overlays—this creates a 6-8px perceived lift. No element uses blur or glas

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the brand's professional edge. Buttons use 4px border-radius (sm), creating a subtle roundness that distinguishes them from sharp container edges. Cards and input fields use 8px border-radius (DEFAULT), the most common radius on the page, balancing approachability with formality. Larger containers (modals, expanded panels) use 12px border-radius (md) to create visual hierarchy. Badges and pills use 9999px border-radius (full) to signal completeness and sta

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#e32118 background, white text, 44px height, 12px 20px padding, 4px radius, 700 weight label-md) are used for high-priority actions ('Jobs bei Klüh', 'Alle Cookies akzeptieren'). On hover, the background shifts to #cc1a10 (a 15% darker red) with a 200ms ease transition—no shadow change, maintaining visual weight. Secondary buttons use a 2px border in #104e70 with transparent background and teal text; on hover, the background fills with #d1e4f3 (secondary-container) at 200ms ease. Ghost buttons (transparent background, teal text, no border) are used for tertiary actions; on hover, they fill with #eaf2f9 (surface-container-low). All buttons use a 3px focus ring at rgba(16, 78, 112, 0.1) when keyboard-focused. B

Do's and Don'ts

**Do**

• Do use primary red (#e32118) exclusively for high-priority CTAs and errors—never use it for decorative elements or secondary information.
• Do maintain 24px gutter spacing between major sections; use 12px for card-to-card spacing within a grid.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active); never use instant transitions.
• Do use Barlow at 700 weight for all headlines; never mix weights within a single headline.
• Do enforce 1230px max-width on all content containers; never allow full-width text blocks on desktop.
• Do use the secondary color (#104e70) for navigation, section headers, and secondary buttons—it is the brand's institutional anchor.
• Do apply 3px focus rings at rgba(16, 78, 112, 0.1) to all interactive elements; never use outline: 2px solid.
• Do use 8px border-radius for cards and inputs; never use 0px radius for interactive elements.

**Don't**

• Don't use the primary red (#e32118) for body text, backgrounds, or non-interactive elements—it is reserved for action.
• Don't apply box-shadows to buttons; use background-color changes only for hover states.
• Don't mix Barlow with system fonts or other typefaces; the entire system uses Barlow exclusively.
• Don't use opacity changes (e.g., opacity: 0.5) for disabled states; use color changes (#adb5bd text on #f8f9fa background) instead.
• Don't exceed 1230px max-width on desktop; never allow content to stretch full-width.
• Don't use blur, glassmorphism, or semi-transparent overlays on content surfaces; all surfaces are opaque.
• Don't apply negative letter-spacing to body text; use -0.02em to -0.04em only on headlines.
• Don't use more than 3 colors in a single component; the system uses primary, secondary, tertiary, and neutrals only.