Primärfarben

• Hauptorange: #FF6B35 / rgb(255, 107, 53) – CTA-Buttons und Akzente
• Dunkelblau/Schwarz: #101827 / rgb(16, 24, 39) – Haupttext und Headlines
• Teal: #0F766E / rgb(15, 118, 110) – Sekundäre Sektionen

Sekundärfarben

• Hellgrau: #F3F4F6 – Hintergründe
• Mittelgrau: #6B7280 – Sekundärtext
• Weiß: #FFFFFF – Cards und primäre Hintergründe
• Beige/Gelb: #FEF3C7 – Highlight-Sektionen

Typografie

Schriftfamilie

• Hauptschrift: „Basier Square Regular“, sans-serif
• Fallback: System sans-serif

Schriftgrößen

• Hero Headlines: 48px (font-weight: 600)
• Section Headlines: 36px (font-weight: 600)
• Card Titles: 24px (font-weight: 600)
• Body Text: 16px (font-weight: 400)
• Small Text: 14px (font-weight: 400)

Typografie-Eigenschaften

• Letter-spacing: -0.2px (Headlines)
• Line-height: 1.3 (Headlines), 1.5 (Body)
• -webkit-font-smoothing: antialiased

Layout & Spacing

Container

• Max-width: 1120px
• Padding: 80px (Desktop), 40px (Tablet), 20px (Mobile)

Grid System

• Columns: 2-4 je nach Sektion
• Gap: 24px zwischen Cards
• Card Padding: 24px

Komponenten

Buttons

Primary Button (CTA)

background-color: #FF6B35;
color: #FFFFFF;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
border: none;
cursor: pointer;
transition: all 0.2s ease;

Secondary Button

background-color: transparent;
color: #101827;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
border: 2px solid #101827;

Cards

background: #FFFFFF;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
transition: transform 0.2s ease;

Bilder

• Border-radius: 8px
• Aspect-ratio: 16:9 oder 4:3
• Object-fit: cover

Design-Prinzipien

1. Klarheit & Minimalismus

• Viel Weißraum für bessere Lesbarkeit
• Klare Hierarchie durch Größenunterschiede
• Fokus auf wesentliche Informationen

2. Warmth & Approachability

• Warme Orangetöne für CTAs
• Rounded Corners (8-12px) für freundliche Erscheinung
• Menschen-zentrierte Fotografie

3. Professionalism

• Konsistente Typografie
• Strukturiertes Grid-Layout
• Hochwertige Bildsprache

Interaktive Elemente

Hover-Effekte

• Cards: transform: translateY(-4px);
• Buttons: Leichte Aufhellung der Hintergrundfarbe
• Links: Underline on hover

Transitions

• Standard: transition: all 0.2s ease;
• Smooth Scrolling: Aktiviert

Icons & Grafiken

• Stil: Line Icons, minimalistisch
• Größe: 24px Standard, 32px für Features
• Farbe: Passend zur Sektion (Orange für Highlights, Dunkelblau für Standard)

Responsive Design

Breakpoints

• Desktop: > 1024px
• Tablet: 768px – 1024px
• Mobile: < 768px

Mobile Anpassungen

• Single Column Layout
• Größere Touch-Targets (min. 44px)
• Vereinfachte Navigation (Hamburger Menu)

Accessibility

• Kontrast: Mindestens 4.5:1 für normalen Text
• Focus States: Sichtbare Outline für Keyboard-Navigation
• Alt-Texte: Für alle informativen Bilder
• Semantic HTML: Korrekte Heading-Hierarchie

Beispiel-Implementierung

Hero Section

<section class="hero">
  <h1>Flexible Bürolösungen für dein Unternehmen</h1>
  <p>Entdecke moderne Arbeitsräume in deiner Stadt</p>
  <button class="btn-primary">Jetzt anfragen</button>
</section>

Feature Card

<div class="feature-card">
  <img src="office.jpg" alt="Modernes Büro">
  <h3>Flexibler Workspace</h3>
  <p>Arbeite wo und wann du willst</p>
  <a href="#" class="btn-secondary">Mehr erfahren</a>
</div>

Tone of Voice

• Professionell aber nicht steif
• Einladend und kundenorientiert
• Klar und direkt in der Kommunikation
• Modern und zukunftsorientiert