Wabe Group Brand Book

Design System Documentation

Last Updated:

📝 Update Log

2025-01-XX Brand redesigned to light professional theme matching original Wabe Group
2025-01-XX Updated to hexagonal logo and blue/green gradient system
2025-01-XX Added German/English bilingual content structure
2025-01-XX Documented light theme color palette and typography

Overview

The Wabe Group brand identity is built around a professional, clean aesthetic that conveys trust, innovation, and technological excellence. The design system emphasizes:

Light, clean backgrounds for clarity and professionalism
Blue and green gradient accents for trust and growth
Subtle geometric patterns suggesting connectivity and technology
Clear, readable typography with professional hierarchy
Hexagonal logo representing network and connectivity
Bilingual German/English content for European market

Brand Personality

Professional — Trustworthy, reliable, enterprise-grade solutions

Innovative — AI-powered technology and intelligent automation

Clear — Transparent communication and straightforward approach

Technical — Precision, automation, efficiency through AI

Color Palette

The color system is built on a dark foundation with neon accents that create high contrast and visual energy.

Primary Colors

Primary Blue #3B82F6

Primary Green #10B981

Primary Purple #8B5CF6

Blue Dark #1E40AF

Background Colors

White BG #FFFFFF

Light Surface #F8FAFC

Light Blue #E0F2FE

Light Green #D1FAE5

Text Colors

Text Primary #1E293B

Text Secondary #64748B

Text Muted #94A3B8

:root {
  --primary-blue: #3B82F6;
  --primary-blue-dark: #1E40AF;
  --primary-green: #10B981;
  --primary-purple: #8B5CF6;
  --light-blue: #E0F2FE;
  --light-green: #D1FAE5;
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
}
      

Typography

The typography system uses a combination of sans-serif for body text and monospace for technical/numeric content.

Font Families

Usage	Font Stack	Purpose
Body Text	Inter, SF Pro Display, system-ui	Primary content, readable and modern
Code/Numbers	SF Mono, Monaco, Cascadia Code	Statistics, code snippets, technical data

Type Scale

Heading 1 — 3.5rem / 56px

Bold, dark text, professional hierarchy

Heading 2 — 2.5rem / 40px

Section titles, clear hierarchy

Heading 3 — 1.75rem / 28px

Card titles, subsection headers

Body Text — 1rem / 16px

Regular weight, secondary text color for readability

Text Effects

Standard Heading

Primary Blue Accent Text

Secondary Text for Descriptions

Icons & SVG System

All icons are SVG-based with gradient fills and glow effects. Icons should maintain consistency in stroke width (2-3px) and use the defined gradient system.

Logo & Icon Guidelines

The Wabe Group logo features a hexagonal design with three nested hexagons in blue, light blue, and orange, representing network connectivity and innovation.

Hexagonal Logo

Icon Guidelines

Use SVG format for scalability
Apply gradient fills using linearGradient definitions
Add drop-shadow filter for glow effect
Standard size: 48px × 48px for cards, 80px+ for hero sections
Stroke width: 2-3px for outlines

Icon Guidelines

Use SVG format for scalability
Apply solid colors matching brand palette (blue, green, purple)
Standard size: 48px × 48px for cards, 80px+ for hero sections
Stroke width: 2-3px for outlines
Use light backgrounds (E0F2FE, D1FAE5, F3E8FF) for icon containers

Icon Examples

Data/Network

Container/Box

Time/Clock

Arrow/Speed

Spacing System

A consistent 8px base unit spacing system for maintaining visual rhythm.

Variable	Value	Usage
`--spacing-xs`	0.5rem (8px)	Tight spacing, icon padding
`--spacing-sm`	1rem (16px)	Button padding, small gaps
`--spacing-md`	1.5rem (24px)	Standard spacing, paragraph margins
`--spacing-lg`	2rem (32px)	Section gaps, card padding
`--spacing-xl`	3rem (48px)	Large gaps, section padding
`--spacing-2xl`	4rem (64px)	Major section spacing

Visual Examples

XS Spacing (0.5rem)

SM Spacing (1rem)

MD Spacing (1.5rem)

LG Spacing (2rem)

Components

Reusable UI components with cyberpunk styling.

Buttons

Primary Button Secondary Button

<a href="#" class="btn btn-primary">Primary Button</a>
<a href="#" class="btn btn-secondary">Secondary Button</a>
      

Cards

Card Title

Card content with white background and subtle border.

Stat Cards

78%

Stat Label

Animations

Animations create urgency and draw attention. Use sparingly but effectively.

Animation	Duration	Usage
`pulseGlow`	2s infinite	CTA buttons, urgent elements
`gradientShift`	3s infinite	Hero titles, section headings
`iconFloat`	3s infinite	Icon hover states
`iconPulse`	2s infinite	Solution card icons
`urgentPulse`	1.5s infinite	Urgent text, warnings
`blink`	2s infinite	Hero subtitles, alerts

Pulsing Button

Gradients

Standard gradient combinations used throughout the design system.

Primary Gradients

Blue to Green (135deg) — Primary CTA gradient

Light Blue to Light Green — Section backgrounds

background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));

Usage Guidelines

Do's

Use white/light backgrounds as the base
Apply blue/green gradients on primary CTAs
Maintain high contrast for readability
Use subtle shadows and borders for depth
Keep design clean and professional
Use clear typography hierarchy
Support German/English bilingual content

Don'ts

Don't use dark backgrounds
Don't overuse bright neon colors
Don't use low contrast text
Don't add excessive animations
Don't clutter the design
Don't use serif fonts
Don't break the light theme consistency

Accessibility

Maintain WCAG AA contrast ratios (4.5:1 for text)
Ensure interactive elements are keyboard accessible
Provide clear focus states with blue outline
Use semantic HTML structure
Include alt text for all icons and images
Support screen readers with proper ARIA labels

Notes & Future Updates

Use this section to document design decisions, future considerations, and ongoing updates to the brand system.