Haarte Zeiten - Umfassender Styleguide

Einführung

Dieser Styleguide definiert die visuellen Grundlagen und Komponenten für die Marke "Haarte Zeiten". Er gewährleistet ein einheitliches Erscheinungsbild über alle digitalen Touchpoints hinweg und dient als verbindliche Referenz für Designer und Entwickler.

Farbpalette

Unsere Farbpalette vermittelt Professionalität und Vertrauenswürdigkeit, während sie gleichzeitig modern und einladend wirkt. Jede Farbe hat einen spezifischen Einsatzbereich und sollte entsprechend ihrer definierten Funktion verwendet werden.

Mitternachtsblau
#102A43

Primärfarbe für Texte und wichtige UI-Elemente. Vermittelt Seriosität und Professionalität.

Eisblau
#EAF1F4

Hintergrundfarbe für großflächige Bereiche. Schafft eine helle, freundliche Atmosphäre.

Kupfer
#9F5719

Akzentfarbe für Call-to-Actions und wichtige Interaktionselemente.

Kohleschwarz
#2E2E2E

Für starke Kontraste und Texte, die besonders hervorstechen sollen.

Orange
#FF6700

Highlight-Farbe für besondere Aktionen und Aufmerksamkeitspunkte.

Typografie

Unsere Schriftauswahl kombiniert die moderne Montserrat für Überschriften und UI-Elemente mit der klassischen Libre Baskerville für Fließtexte. Diese Kombination schafft einen ausgewogenen Mix aus Modernität und Lesbarkeit.

Überschriften

Montserrat Extra Bold 24px Verwendung: Hauptüberschriften (H1)
Montserrat Semi Bold 20px Verwendung: Zwischenüberschriften (H2)
Montserrat Semi Bold 16px Verwendung: Unterüberschriften (H3)

Fließtext

Libre Baskerville Regular 16px Verwendung: Haupttext, längere Textpassagen
Libre Baskerville Bold 16px Verwendung: Textuelle Hervorhebungen

UI-Elemente

Montserrat Regular 14px Verwendung: Buttons, Navigation, Labels

Design-Prinzipien

Unsere Design-Prinzipien bilden das Fundament für alle gestalterischen Entscheidungen und gewährleisten ein konsistentes Nutzererlebnis.

Unkomplizierte Präzision

Klare Strukturen und ein aufgeräumtes Layout prägen das Design. Wir setzen auf intuitive Navigation und reduzierte Komplexität, ohne dabei an Professionalität einzubüßen.

Authentische Bodenständigkeit

Eine natürliche Bildsprache und ehrliche Darstellung stehen im Fokus. Wir verzichten auf übertriebene Effekte und setzen stattdessen auf authentische Inhalte.

Subtile Dynamik

Dezente Animationen und sanfte Übergänge schaffen eine lebendige Interaktion. Bewegungen sind gezielt eingesetzt und unterstützen die Nutzerführung.

UI-Komponenten

Unsere UI-Komponenten sind modular aufgebaut und folgen einheitlichen Gestaltungsprinzipien. Sie gewährleisten Konsistenz über alle Anwendungen hinweg.

Buttons

Buttons sind klar hierarchisch gegliedert und vermitteln durch ihre Gestaltung ihre jeweilige Funktion.

Primäre Buttons

Verwendung: Hauptaktionen, wichtigste Call-to-Actions

Sekundäre Buttons

Verwendung: Alternative Aktionen, wichtige aber nicht primäre Funktionen

Outline Buttons

Verwendung: Tertiäre Aktionen, optionale Funktionen

Formulare

Formularelemente sind klar strukturiert und bieten unmittelbares visuelles Feedback.

Hilfetext oder zusätzliche Informationen

Navigation

Die Navigation ist intuitiv gestaltet und bietet klare visuelle Hinweise zur aktuellen Position.

Karten

Karten dienen der strukturierten Darstellung von zusammengehörigen Informationen.

Kartentitel

Ein Beispieltext für den Inhalt dieser Karte. Hier können verschiedene Informationen dargestellt werden.

Mehr erfahren
Beispielbild
Karte mit Bild

Ein Beispiel für eine Karte mit Bild und Text.

Details
Preiskarte

49,99 €

  • ✓ Feature 1
  • ✓ Feature 2
  • ✓ Feature 3
Buchen

Bildrichtlinien

Unsere Bildsprache ist authentisch und professionell. Bilder sollen die Qualität unserer Dienstleistungen unterstreichen und Vertrauen schaffen.

Produktbilder

Produktbild Beispiel

Professionelle Bildkomposition

Hohe Auflösung, natürliches Licht, klarer Fokus

  • Minimale Auflösung: 1920x1080px
  • Natürliche Farbgebung
  • Scharfe, klare Darstellung

Team & Ambiente

Team Beispiel

Authentische Darstellung

Natürliche Posen, echte Arbeitssituationen

  • Authentische Situationen
  • Positive Atmosphäre
  • Professionelles Auftreten

Responsive Design

Alle Inhalte werden responsive dargestellt und passen sich optimal an verschiedene Bildschirmgrößen an.

Breakpoints

Mobile

< 576px

Tablet

≥ 576px

Desktop

≥ 992px

Large Desktop

≥ 1200px

Responsive Typografie

Mobile

  • Überschriften: 20px
  • Fließtext: 14px
  • Buttons: 14px

Desktop

  • Überschriften: 24px
  • Fließtext: 16px
  • Buttons: 16px

Animationen und Übergänge

Animationen werden gezielt eingesetzt, um die Benutzerinteraktion zu verbessern und Feedback zu geben.

Hover-Effekte

Hover über dieses Element

Sanfte Anhebung und Schattenwurf bei Hover

Fade-Effekte

Fade Beispiel

Überblendeffekt bei Hover

Skalierung

Skalierungseffekt bei Hover

Sanfte Vergrößerung bei Hover

Pulse-Animation

Kontinuierliche Pulsanimation für Aufmerksamkeit

Animationsrichtlinien

  • Dauer: 0.2s - 0.4s für UI-Feedback
  • Timing-Funktion: ease oder ease-in-out
  • Sparsamer Einsatz von kontinuierlichen Animationen
  • Berücksichtigung der "prefers-reduced-motion" Einstellung