Marken
Kampagnen &
Webseiten
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Styleguide
Das Farbsystem gliedert sich in Primary, Muted und Secondary Colors. Primary-Farben definieren den markanten, identitätsstiftenden Auftritt – sie prägen Interaktionen und zentrale Gestaltungselemente. Muted-Farben dienen der Flächenbalance und wirken unterstützend im Hintergrund, ohne Aufmerksamkeit zu entziehen. Secondary-Farben ergänzen das System funktional, etwa zur Differenzierung von Modulen oder interaktiven Zuständen.
Alle Farbkombinationen werden im Hinblick auf Kontrastverhältnisse nach WCAG überprüft, um eine gute Lesbarkeit und barrierearme Nutzung sicherzustellen – insbesondere bei Text-zu-Hintergrund-Kombinationen und interaktiven Elementen. So stellen wir sicher, dass Design und Zugänglichkeit Hand in Hand gehen. Auf Primary-Hintergründen ist Muted-Text zu vermeiden, ebenso wie Primary-Text auf Muted-Hintergründen, um optimalen Kontrast und Lesbarkeit zu gewährleisten.
H1 Headline
H2 Headline
H3 Headline
H4 Headline
Lead - Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
Typografie-Grundelemente
Dieser Abschnitt definiert die typografischen Stilmittel der Website – von Headlines bis Fließtext.
Der Meta-Text wird als stilistische Einheit für Preheadlines, Meta-Informationen oder Zeitstempel eingesetzt. Er ist typografisch reduziert gestaltet – kleiner, dezenter und mit zurückhaltender Farbgebung – und liefert kontextuelle Zusatzinformationen, ohne vom Hauptinhalt abzulenken.
Die unterschiedlichen Überschriftenebenen (H1 bis H4) sind gestalterisch klar voneinander abgegrenzt und folgen einer hierarchischen Logik, die sowohl für Nutzerführung als auch SEO relevant ist. Die H1 ist als primäre Seitenüberschrift gesetzt, während H2 bis H4 eine zunehmende inhaltliche Unterordnung markieren.
Die Lead-Text-Variante dient als aufmerksamkeitsstarke Einleitung, etwa für Einstiege in Themenseiten oder Kampagnen, und ist typografisch zwischen H4 und Fließtext angesiedelt.
Der Bodytext folgt einem klassischen Lesesatz mit großzügiger Zeilenhöhe und guter Lesbarkeit auf allen Devices. Fettungen (wie hier demonstriert: bold) setzen gezielte Akzente innerhalb des Textflusses.
Listen – sowohl geordnet als auch ungeordnet – sind ebenfalls im Stil definiert, um konsistente Darstellungen für Aufzählungen, Checklisten oder strukturierte Inhalte sicherzustellen.
Dieser Abschnitt definiert die typografischen Stilmittel der Website – von Headlines bis Fließtext.
Der Meta-Text wird als stilistische Einheit für Preheadlines, Meta-Informationen oder Zeitstempel eingesetzt. Er ist typografisch reduziert gestaltet – kleiner, dezenter und mit zurückhaltender Farbgebung – und liefert kontextuelle Zusatzinformationen, ohne vom Hauptinhalt abzulenken.
Die unterschiedlichen Überschriftenebenen (H1 bis H4) sind gestalterisch klar voneinander abgegrenzt und folgen einer hierarchischen Logik, die sowohl für Nutzerführung als auch SEO relevant ist. Die H1 ist als primäre Seitenüberschrift gesetzt, während H2 bis H4 eine zunehmende inhaltliche Unterordnung markieren.
Die Lead-Text-Variante dient als aufmerksamkeitsstarke Einleitung, etwa für Einstiege in Themenseiten oder Kampagnen, und ist typografisch zwischen H4 und Fließtext angesiedelt.
Der Bodytext folgt einem klassischen Lesesatz mit großzügiger Zeilenhöhe und guter Lesbarkeit auf allen Devices. Fettungen (wie hier demonstriert: bold) setzen gezielte Akzente innerhalb des Textflusses.
Listen – sowohl geordnet als auch ungeordnet – sind ebenfalls im Stil definiert, um konsistente Darstellungen für Aufzählungen, Checklisten oder strukturierte Inhalte sicherzustellen.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Buttons & Links
In diesem Abschnitt werden die verschiedenen Interaktionselemente der Website definiert – Buttons, Textlinks und deren Zustände.
Die Gestaltung der Buttons folgt einem konsistenten visuellen Prinzip: klare Form, ausreichender Kontrast und eindeutige Beschriftung. Neben der Standardvariante (heller Hintergrund) wird auch eine aktive oder hervorgehobene Variante (dunkler Hintergrund) gezeigt, ideal für primäre Call-to-Actions.
Textlinks sind reduziert und subtil ins Layout eingebettet, dennoch klar erkennbar durch farbliche Hervorhebung und Unterstreichung im Hover-Zustand. Ihre Integration in den Fließtext sorgt für Lesefluss ohne Ablenkung, dennoch mit klarer Navigationsfunktion.
In diesem Abschnitt werden die verschiedenen Interaktionselemente der Website definiert – Buttons, Textlinks und deren Zustände.
Die Gestaltung der Buttons folgt einem konsistenten visuellen Prinzip: klare Form, ausreichender Kontrast und eindeutige Beschriftung. Neben der Standardvariante (heller Hintergrund) wird auch eine aktive oder hervorgehobene Variante (dunkler Hintergrund) gezeigt, ideal für primäre Call-to-Actions.
Textlinks sind reduziert und subtil ins Layout eingebettet, dennoch klar erkennbar durch farbliche Hervorhebung und Unterstreichung im Hover-Zustand. Ihre Integration in den Fließtext sorgt für Lesefluss ohne Ablenkung, dennoch mit klarer Navigationsfunktion.
Formulare
Formulare sind zentrale Interaktionselemente der Website und werden für Kontaktaufnahmen, Anfragen oder Newsletter-Anmeldungen eingesetzt. Ihre Gestaltung folgt klaren Prinzipien der Benutzerfreundlichkeit, Zugänglichkeit und Markenidentität.
Alle Formularelemente – wie Input-Felder, Dropdowns, Radio-Buttons oder Checkboxen – sind einheitlich gestylt und bieten ausreichende Abstände, um auf allen Geräten komfortabel bedient werden zu können. Label und Platzhaltertexte sind klar formuliert und helfen dabei, das erwartete Eingabeformat zu verstehen. Pflichtfelder sind eindeutig gekennzeichnet – etwa mit einem Sternchen (*) oder einem erklärenden Hinweis.
Die Fehlermeldungen erscheinen in direkter Nähe zum betroffenen Feld und sind in einer klaren, kontraststarken Farbe gestaltet, um maximale Sichtbarkeit zu gewährleisten. Erfolgreiche Interaktionen (z. B. eine gesendete Nachricht) werden durch eine optisch klar erkennbare Bestätigungsmeldung (Success Message) kommuniziert.
Die Call-to-Action-Buttons wie „Absenden“, „Jetzt anfragen“ oder „Anmelden“ sind deutlich hervorgehoben und folgen den generellen UI-Standards der Website (z. B. Farbwelt, abgerundete Ecken, Hover-Zustände).
Zur Unterstützung der Barrierefreiheit sind alle Formulare vollständig mit der Tastatur bedienbar, Screenreader-kompatibel und folgen semantisch korrekten HTML-Strukturen.
Optional können Formulare um Captcha-Mechanismen oder Double-Opt-In-Verfahren ergänzt werden, um Missbrauch zu vermeiden und rechtlichen Anforderungen (z. B. DSGVO) zu entsprechen.
Formulare sind zentrale Interaktionselemente der Website und werden für Kontaktaufnahmen, Anfragen oder Newsletter-Anmeldungen eingesetzt. Ihre Gestaltung folgt klaren Prinzipien der Benutzerfreundlichkeit, Zugänglichkeit und Markenidentität.
Alle Formularelemente – wie Input-Felder, Dropdowns, Radio-Buttons oder Checkboxen – sind einheitlich gestylt und bieten ausreichende Abstände, um auf allen Geräten komfortabel bedient werden zu können. Label und Platzhaltertexte sind klar formuliert und helfen dabei, das erwartete Eingabeformat zu verstehen. Pflichtfelder sind eindeutig gekennzeichnet – etwa mit einem Sternchen (*) oder einem erklärenden Hinweis.
Die Fehlermeldungen erscheinen in direkter Nähe zum betroffenen Feld und sind in einer klaren, kontraststarken Farbe gestaltet, um maximale Sichtbarkeit zu gewährleisten. Erfolgreiche Interaktionen (z. B. eine gesendete Nachricht) werden durch eine optisch klar erkennbare Bestätigungsmeldung (Success Message) kommuniziert.
Die Call-to-Action-Buttons wie „Absenden“, „Jetzt anfragen“ oder „Anmelden“ sind deutlich hervorgehoben und folgen den generellen UI-Standards der Website (z. B. Farbwelt, abgerundete Ecken, Hover-Zustände).
Zur Unterstützung der Barrierefreiheit sind alle Formulare vollständig mit der Tastatur bedienbar, Screenreader-kompatibel und folgen semantisch korrekten HTML-Strukturen.
Optional können Formulare um Captcha-Mechanismen oder Double-Opt-In-Verfahren ergänzt werden, um Missbrauch zu vermeiden und rechtlichen Anforderungen (z. B. DSGVO) zu entsprechen.