Style guide
Hier findest du detaillierte Informationen zu den verwendeten Schriften, Farben und dem Logo sowie klare Richtlinien für ihre korrekte Anwendung. Entdecke, wie diese gestalterischen Elemente eine konsistente visuelle Identität schaffen und die Grundlage für ein einheitliches Erscheinungsbild bilden.
Logo
Farbvariationen
- Hier kannst du das aktuellste Logopack mit Vektorgrafik- und PNG-Version des Logos herunterladen.
- Verwende das farbige Logo auf hellen Hintergründen. Auf dunklen Hintergründen sollte die weiße Version des Logos genutzt werden, um eine klare Lesbarkeit sicherzustellen.
- Für Schwarz-Weiß-Drucke nutze bitte die monochrome Version unseres Logos, damit alle Details gut erkennbar sind.
Größenvariationen und Proportionen
- Du kannst das Logo in verschiedenen Größen nutzen, beginnend ab einer Mindestgröße von 40 Pixeln für Online-Anwendungen bis zu einer maximalen Größe von 8 Zentimetern für gedruckte Marketingmaterialien.
- Bitte verändere nicht das Seitenverhältnis des Logos, weder horizontal noch vertikal. Nutze immer die bereitgestellten skalierbaren Dateiformate, um die Proportionen zu bewahren.
Abstände und Clearspace
- Halte einen klaren Raum um das Logo, der mindestens die Hälfte seiner Höhe entspricht, ein. Stelle sicher, dass keine anderen grafischen Elemente innerhalb dieses Bereichs platziert werden.
- Der empfohlene Abstand zwischen dem Logo und anderen Inhalten auf deiner Webseite beträgt mindestens das Zweifache der Breite des Buchstabens ‚S‘ im Logo.
Unzulässige Anpassungen und Verwendung
- Bitte drehe, spiegele oder verändere die Farben des Logos nicht. Jegliche Modifikationen am Logo-Design sind streng untersagt, um die visuelle Identität unserer Marke zu bewahren.
- Platziere das Logo niemals auf einem gemusterten Hintergrund oder einem Bild, das mit der Farbpalette des Logos konkurriert. Es sollte immer auf einem klaren, kontrastreichen Hintergrund stehen, um die Lesbarkeit zu gewährleisten.
Typographie
Schriftarten und Hierarchie
- Für Überschriften verwenden wir die Schriftart ‚Work Sans‘ Medium in Großbuchstaben, um eine starke visuelle Präsenz zu gewährleisten. In Fließtexten verwenden wir ‚Lato‘ Regular, eine gut lesbare Schrift mit klaren Linien und angenehmem Lesekomfort.
- Beibehaltung der Hierarchie: ‚Work Sans‘ wird für Überschriften (H1 bis H6) verwendet, während ‚Lato‘ für Fließtexte in verschiedenen Größen genutzt wird.
Schriftgrößen und Formatierung
- H1-Überschriften haben eine Schriftgröße von 36 Pixeln für Desktop und 24 Pixeln für mobile Geräte. H2-Überschriften werden in einer Größe von 32 Pixeln (Desktop) und 20 Pixeln (mobil) verwendet, um eine klare Hierarchie beizubehalten.
- Fließtexte in ‚Lato‘ haben eine Standardgröße von 16 Pixeln für Desktop und 14 Pixeln für mobile Geräte, um eine optimale Lesbarkeit auf verschiedenen Bildschirmgrößen zu gewährleisten.
Alternative Schriftarten und Fallback-Optionen
- Im Falle von Ausnahmesituationen oder wenn die primären Schriftarten nicht verfügbar sind, verwenden wir als Alternative für ‚Work Sans‘ die Schriftart ‚Helvetica Neue‘ und für ‚Lato‘ die Schriftart ‚Arial‘ als Fallback-Optionen.
- Stelle sicher, dass alle Webseiten und Dokumente die definierten Schriftarten korrekt anzeigen. Überprüfe regelmäßig, ob die Schriftarten ordnungsgemäß gerendert werden, um ein einheitliches Erscheinungsbild auf verschiedenen Plattformen zu gewährleisten.
Farben
Farbpalette und Kombinationen
- Unsere Hauptfarbe ist Gelb (#e89e24, Pantone 2011 C), die für wichtige Elemente wie Überschriften, Schaltflächen und hervorgehobene Bereiche verwendet wird. Die Sekundärfarbe Blau (#7da3af, Pantone 5493 C) wird für unterstützende Elemente wie Linien und bestimmte Akzentbereiche eingesetzt.
- Beide Farben werden hauptsächlich im Hintergrund eingesetzt, wobei weiße Schriften verwendet werden, um eine klare Lesbarkeit und ein ansprechendes visuelles Erscheinungsbild sicherzustellen.
- Achte darauf, dass die Farben harmonisch miteinander kombiniert werden. Verwende Gelb für auffällige Elemente, während Blau für einen ruhigen Hintergrund oder als Akzentfarbe verwendet wird, um eine ausgewogene visuelle Hierarchie zu schaffen.
#e89e24
#7da3af