4. Alerts & Feedback
Alerts kommunizieren Statusinformationen, Hinweise, Warnungen und Fehler. Die visuelle Bedeutung entsteht aus der Kombination von Hintergrund, Border, Icon, Überschrift und Text. Farbe allein darf nicht der einzige Bedeutungsträger sein.
Die Varianten Inline, Default und Card Style unterscheiden sich durch Gewichtung, Platzierung und visuelle Eigenständigkeit. Alerts informieren über einen Zustand und besitzen daher keine Button-States wie Hover, Focus oder Active.
4.1 Varianten
Inline Alert
Inline Alerts stehen unmittelbar bei dem Inhalt oder Formularfeld, auf das sie sich beziehen. Sie sind kompakt, besitzen standardmäßig keinen Shadow und eignen sich für kurze Hinweise oder Validierungsinformationen.
Deine Anfrage wurde erfolgreich gesendet.
Bitte überprüfe deine Eingaben – einige Felder sind noch unvollständig.
Beim Senden ist ein Fehler aufgetreten.
Deine Daten werden ausschließlich zur Bearbeitung deiner Anfrage verwendet.
Default Alert
Default Alerts sind die zentrale Standardvariante für seiten- oder abschnittsbezogene Rückmeldungen. Eine markante linke Border unterstützt die semantische Zuordnung, ohne eine vollständige Card-Elevation zu erzeugen.
Deine Anfrage wurde erfolgreich gesendet. Wir melden uns in Kürze bei dir.
Bitte überprüfe deine Eingaben. Einige Felder sind noch unvollständig und müssen ausgefüllt werden.
Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.
Hinweis: Deine Daten werden ausschließlich zur Bearbeitung deiner Anfrage verwendet und nicht an Dritte weitergegeben.
Alert Box (Card‑Style)
Die Alert Box bildet eine eigenständige Rückmeldung mit vollständiger Begrenzung, größerem Padding und optionaler Elevation. Sie wird nur für wichtige, räumlich unabhängige Meldungen verwendet.
Erfolg
Deine Anfrage wurde erfolgreich gesendet.
Wir prüfen dein Anliegen und melden uns zeitnah bei dir zurück.
Warnung
Einige Eingaben sind unvollständig oder fehlerhaft.
Bitte überprüfe alle markierten Felder, bevor du fortfährst.
Fehler
Beim Übermitteln deiner Anfrage ist ein Problem aufgetreten.
Bitte versuche es erneut oder kontaktiere uns direkt.
Hinweis
Deine persönlichen Daten werden vertraulich behandelt.
Sie werden ausschließlich zur Bearbeitung deiner Anfrage genutzt.
4.2 Semantische Typen
Erfolg (Success)
Erfolg bestätigt, dass eine Aktion erfolgreich abgeschlossen wurde. Die Meldung sollte das Ergebnis eindeutig benennen und, falls erforderlich, über den nächsten Schritt informieren.
Warnung (Warning)
Eine Warnung weist auf einen Zustand hin, der Aufmerksamkeit oder eine Prüfung erfordert, aber noch keinen Fehler darstellt. Die Meldung sollte mögliche Folgen erklären und eine sinnvolle Handlung empfehlen.
Fehler (Error)
Eine Fehlermeldung informiert darüber, dass eine Aktion nicht erfolgreich abgeschlossen werden konnte oder eine gültige Eingabe fehlt.
Hinweis (Info)
Ein Hinweis vermittelt ergänzende oder erklärende Informationen, ohne einen Erfolg, eine Warnung oder einen Fehler auszudrücken. Die Meldung unterstützt das Verständnis und erfordert nicht zwingend eine unmittelbare Handlung.
Alle semantischen Alerttypen verwenden im Light Mode die Stufe 100 für den Hintergrund, 400 für die Border und 500 für das Icon. Inline Alerts besitzen keine Border.
Der semantische Typ richtet sich nach der Bedeutung der Meldung, nicht nach ihrer visuellen Auffälligkeit.
Warnung und Fehler dürfen nicht austauschbar verwendet werden: Eine Warnung macht auf ein mögliches Problem aufmerksam, während ein Fehler einen bereits eingetretenen Fehler oder eine fehlgeschlagene Aktion beschreibt.
4.3 Dark Mode
Die Dark-Mode-Varianten werden nach Abschluss der Light-Mode-Komponenten ergänzt. Dabei werden Statusflächen, Borders, Icons und Textfarben auf dunklen Surfaces separat auf ausreichenden Kontrast und eine klare visuelle Hierarchie geprüft.
4.4 Accessibility und Implementierung
Bedeutung und Wahrnehmbarkeit
Farbe darf nicht der einzige Bedeutungsträger sein. Jeder Alert kombiniert eine verständliche Meldung mit einem passenden Icon und, bei stärker gewichteten Varianten, einer semantischen Bezeichnung wie „Erfolg“, „Warnung“, „Fehler“ oder „Hinweis“.
Statische und dynamische Meldungen
Statische Hinweise, die bereits beim Laden der Seite vorhanden sind, benötigen keine Live-Region. Für dynamisch eingeblendete Erfolgsmeldungen und neutrale Statusinformationen kann role="status" verwendet werden. Dringende Fehlermeldungen können mit role="alert" angekündigt werden. Live-Regionen dürfen nur eingesetzt werden, wenn die Meldung tatsächlich nachträglich erscheint.
Icons
Die Icons ergänzen die sichtbare Textbedeutung und werden von assistiven Technologien nicht zusätzlich angekündigt. In der produktiven Implementierung erhalten dekorative Alert-Icons daher aria-hidden="true".
Umsetzungshinweis
Die Design-System-Beispiele sind statische Referenzdarstellungen und erhalten keine Live-Rollen. Die passende ARIA-Semantik wird erst im konkreten Nutzungskontext vergeben. Fokus wird nur dann aktiv auf eine Meldung gesetzt, wenn dies für die weitere Bedienung erforderlich ist.
5. Farben und Farbskalen
Die Farbskalen bilden die visuelle Grundlage des Design Systems. Jede Markenfarbe ist in abgestuften Tints und Shades von 100 bis 900 aufgebaut. Helle Stufen eignen sich insbesondere für Flächen und zurückhaltende Zustände, mittlere Stufen für zentrale Marken- und Interaktionsfarben und dunkle Stufen für kontraststarke Anwendungen.
Komponenten greifen nach Möglichkeit nicht direkt auf die Markenfarben zu, sondern auf semantische Tokens. Dadurch können Bedeutung, Kontrast und Modus unabhängig von der zugrunde liegenden Farbpalette gesteuert werden.
Markenfarben
Charcoal Green
Primärfarbe · --color-brand-primary
100
200
300
400
500
600
700
800
900
Copper
Interaktionsfarbe · --color-brand-secondary
100
200
300
400
500
600
700
800
900
Slate Blue
Akzentfarbe · --color-brand-accent-cool
100
200
300
400
500
600
700
800
900
Golden Accent
Akzentfarbe · --color-brand-accent-gold
100
200
300
400
500
600
700
800
900
Leaf Green
Akzentfarbe · --color-brand-accent-success
100
200
300
400
500
600
700
800
900
Kontrast und Verwendung
Die Textfarbe innerhalb der Farbskalen richtet sich nach dem tatsächlichen Kontrast der jeweiligen Stufe. Helle Flächen verwenden --color-text-on-light, dunkle Flächen --color-text-on-dark. Der Umschaltpunkt kann je nach Farbskala unterschiedlich ausfallen.
Charcoal Green 400, Golden Accent 700 und Leaf Green 700 sind Kontrastgrenzfälle. Diese Stufen eignen sich nicht pauschal als Hintergrund für kleinen produktiven Text. Der konkrete Einsatz muss abhängig von Textgröße, Schriftgewicht und Farbkontrast geprüft werden. Leaf Green 700 erreicht mit keiner der beiden allgemeinen Textfarben den AA-Zielwert für normalen Text.
6. Typografie
Die Typografie definiert Hierarchie, Lesbarkeit und Rhythmus des Design Systems. Überschriften, Fließtexte und ergänzende Textstile verwenden festgelegte Schriftfamilien, responsive Größen, Zeilenhöhen und Zeichenabstände.
Die dargestellten Textstile werden über globale Variablen und Presets gesteuert. Lokale Abweichungen sind nur zulässig, wenn der Nutzungskontext eine begründete Anpassung erfordert.
6.1 Schriftfamilien
Das Design System kombiniert eine Serifenschrift für redaktionell geprägte Überschriften mit einer neutralen Sans-Serif-Schrift für Fließtexte, Navigation, Bedienelemente und technische Kennzeichnungen. Die Kombination erzeugt eine hochwertige redaktionelle Wirkung und erhält zugleich eine hohe Lesbarkeit in digitalen Benutzeroberflächen.
Lora
Editoriale Klarheit mit eigenständigem Charakter
Lora ist die primäre Schriftfamilie für Überschriften. Sie vermittelt redaktionelle Qualität und bildet den charakteristischen typografischen Ausdruck der Marke.
Globale Variable: Heading
Primärer Einsatz: H1 Large bis H6
Open Sans
Open Sans unterstützt eine klare und gut lesbare Informationsvermittlung in digitalen Anwendungen.
Open Sans ist die primäre Schriftfamilie für Fließtext und Benutzeroberflächen. Die offene Zeichenform unterstützt die Lesbarkeit in längeren Texten und bei kleineren Textstilen.
Globale Variable: Body
Primärer Einsatz: Body, Small Body, Listen und UI-Texte
6.2 Überschriften
Die Überschriftenskala reicht von H1 Large für besonders prägnante Hero-Anwendungen bis H6 für fein gegliederte Unterabschnitte. Jede Stufe besitzt eine responsive Schriftgröße und eine darauf abgestimmte Zeilenhöhe. Die Auswahl richtet sich nach der semantischen Dokumentstruktur, nicht allein nach der gewünschten visuellen Größe.
H1 Large · Display
Ideen mit Haltung und Charakter
Größe: clamp(3rem, 8vw, 7rem)
Zeilenhöhe: 1.05
Primärer Einsatz: prägnante Hero-Überschriften und besondere redaktionelle Einstiege
H1 · Seitenüberschrift
Strategische Gestaltung für digitale Marken
Größe: clamp(2.5rem, 5vw, 5.5rem)
Zeilenhöhe: 1.1
Primärer Einsatz: zentrale Seitenüberschrift
H2 · Hauptabschnitt
Konzeption, Gestaltung und Umsetzung
Größe: clamp(2.125rem, 3.5vw, 4rem)
Zeilenhöhe: 1.15
Primärer Einsatz: Hauptabschnitte innerhalb einer Seite
H3 · Unterabschnitt
Ein konsistentes visuelles System
Größe: clamp(1.75rem, 2.5vw, 3rem)
Zeilenhöhe: 1.2
Primärer Einsatz: wichtige Unterabschnitte und größere Komponentengruppen
H4 · Inhaltsgruppe
Typografie und visuelle Hierarchie
Größe: clamp(1.5rem, 2vw, 2.25rem)
Zeilenhöhe: 1.25
Primärer Einsatz: Inhaltsgruppen und klar abgegrenzte Themenblöcke
H5 · Detailüberschrift
Semantische Rollen und Varianten
Größe: clamp(1.375rem, 1.75vw, 1.75rem)
Zeilenhöhe: 1.3
Primärer Einsatz: Detailgruppen innerhalb eines Unterabschnitts
H6 · Feingliederung
Technische Hinweise zur Umsetzung
Größe: clamp(1.25rem, 1.5vw, 1.5rem)
Zeilenhöhe: 1.35
Primärer Einsatz: feine Untergliederungen und technische Detailbereiche
6.3 Fließtext und ergänzende Textstile
Fließtexte und ergänzende Textstile strukturieren längere Inhalte, Erläuterungen und technische Informationen. Die Textstile unterscheiden sich in Schriftfamilie, Größe, Gewichtung und Einsatzbereich. Responsive Größen, abgestimmte Zeilenhöhen und definierte Zeichenabstände sichern eine konsistente Hierarchie und gute Lesbarkeit.
Subtitle
Ergänzende Überschrift
Vorschau
Strategische Klarheit trifft auf visuelle Eigenständigkeit
Spezifikation
Größe: clamp(1.375rem, 1.5vw, 1.625rem)
Zeilenhöhe: 1.35
Letter Spacing: 0.04em
Gewicht: 500
Kontextspacing / Margin: 0.5rem oben, 1.25rem unten
Primärer Einsatz: ergänzende Aussagen unter Seiten- und Hero-Überschriften
Body
Standardfließtext
Vorschau
Ein konsistentes Design System schafft eine gemeinsame Grundlage für verständliche Inhalte, wiedererkennbare Komponenten und eine effiziente Umsetzung. Typografie, Farben und Abstände greifen dabei als zusammenhängendes System ineinander.
Spezifikation
Größe: clamp(1.1875rem, 1vw, 1.375rem)
Zeilenhöhe: 1.7
Primärer Einsatz: reguläre Fließtexte, Einleitungen und längere Inhaltsabschnitte
Small Body
Ergänzender Fließtext
Vorschau
Small Body wird für ergänzende Beschreibungen, technische Informationen und Inhalte mit geringerer visueller Gewichtung verwendet. Der Stil bleibt auch bei kompakteren Darstellungen gut lesbar.
Spezifikation
Größe: clamp(1rem, 1vw, 1.25rem)
Zeilenhöhe: 1.6
Primärer Einsatz: Beschreibungen, technische Angaben, ergänzende Hinweise und kompaktere Dokumentation
Listen
Strukturierte Inhalte
Vorschau
Listen mit Body Text
- klare typografische Hierarchie
- konsistente globale Presets
- responsive Größen und Zeilenhöhen
- semantisch korrektes HTML-Markup
- semantische Ebene bestimmen
- passendes Preset auswählen
- Darstellung responsiv kontrollieren
Listen mit Body Text Small
- klare typografische Hierarchie
- konsistente globale Presets
- responsive Größen und Zeilenhöhen
- semantisch korrektes HTML-Markup
- semantische Ebene bestimmen
- passendes Preset auswählen
- Darstellung responsiv kontrollieren
Spezifikation
Body Text: Zeilenhöhe 1.7, Letter Spacing 0em
Body Text Small: Zeilenhöhe 1.6, Letter Spacing 0.01em
Item Indent: 1.25rem für UL und OL
Primärer Einsatz: Aufzählungen, Abläufe, Merkmale und strukturierte Inhaltsgruppen
Meta Text
Kontextinformation
Vorschau
30. August 2026 · Typografie · 8 Min. Lesezeit
Spezifikation
Größe: clamp(0.95rem, 0.9vw, 1.1875rem)
Zeilenhöhe: 1.35
Letter Spacing: 0.03em
Gewicht: 700
Farbe: Primary Color
Primärer Einsatz: Datum, Kategorie, Lesezeit, Version und ergänzende Kontextinformationen
Implementierung: gemeinsamer Variablensatz für das Meta-Text-Preset im Post-Title-Modul und das Body-Font-Preset im Textmodul
Caption
Bildunterschrift
Vorschau
Detailaufnahme eines modular aufgebauten Interface-Systems.
Spezifikation
Größe: clamp(1rem, 1vw, 1.25rem)
Zeilenhöhe: 1.4
Letter Spacing: 0.03em
Gewicht: 400
Farbe: Body Text Color
Primärer Einsatz: Bildunterschriften, Bildbeschreibungen und kurze Medienhinweise
Implementierung: gemeinsamer Variablensatz für das Caption-Preset im Divi-Gallery-Modul, das Body-Font-Preset im Textmodul und das ergänzende Custom CSS für WordPress-Bildunterschriften
Eyebrow
Übergeordnete Einordnung
Vorschau
Typografie
Ein konsistentes visuelles System
Ausgezeichnete Brennerei
Handwerk, Herkunft und außergewöhnliche Qualität
Spezifikation
Größe: clamp(0.875rem, 0.8vw, 1rem)
Zeilenhöhe: 1.3
Letter Spacing: 0.08em
Gewicht: 700
Schreibweise: Versalien
Farbe: Primary Color
Gap zur Überschrift: Gap XXS MOD Gap on COL or GRP MICRO · 0.5rem
Primärer Einsatz: Kategorien, Rubriken und übergeordnete Einordnungen vor einer Überschrift
Lead / Intro
Einleitender Fließtext
Vorschau
Kurzer Seiteneinstieg
Ein durchdachtes Design-System schafft eine gemeinsame Grundlage für konsistente, zugängliche und langfristig wartbare digitale Produkte.
Redaktioneller Einstieg
Gute Gestaltung beginnt nicht mit einzelnen Komponenten, sondern mit klaren Regeln. Typografie, Farbe, Raum und Interaktion bilden gemeinsam ein System, das sich auf unterschiedliche Marken und technische Plattformen übertragen lässt.
Spezifikation
Größe: clamp(1.375rem, 1.5vw, 1.625rem)
Zeilenhöhe: 1.55
Letter Spacing: 0em
Gewicht: 400
Schrift: Body / Open Sans
Farbe: Body Text Color
Kontextspacing: Margin Top 0 · Margin Bottom 1.25rem
Primärer Einsatz: Einleitungen nach H1, redaktionelle Vorspänne und kurze inhaltliche Zusammenfassungen
Absatzrhythmus und Paragraph Spacing
Absatz zu Absatz: 1rem über globales CSS auf p-Elemente
Letzter Absatz: kein zusätzlicher Abschlussabstand
Modul zu Modul: Container-Gap oder Modulspacing
Divi Paragraph Spacing: nicht in allgemeinen Textpresets verwenden
Komponentenadapter: TXT | Last Paragraph Reset
6.4 Editorial Styles
x
Blockquote
Zitat im Inhaltsfluss
Vorschau
Einfaches Zitat
Ein starkes Design-System schafft nicht nur Konsistenz.
Es schafft eine gemeinsame Sprache für Entscheidungen.
Zitat mit Quellenangabe
Gestaltung gewinnt an Wert, wenn Regeln nicht einschränken, sondern verlässliche Grundlagen für neue Lösungen schaffen.
Spezifikation
Größe: clamp(1.375rem, 2vw, 2rem)
Zeilenhöhe: 1.4
Letter Spacing: 0em
Gewicht: 400
Schrift: Body / Open Sans
Farbe: Body Text Color
Außenabstand: 1.25rem oben und unten
Einzug: 1rem Padding Inline Start
Border: 0.25em am Inline Start
Quellenangabe: Meta-Text-Größe · Zeilenhöhe 1.35 · Letter Spacing 0.03em · Gewicht 500 · Secondary Text Color
Primärer Einsatz: wörtliche Zitate, Aussagen externer Personen und belegte redaktionelle Auszüge
Implementierung: Quote-Unterstil in Body Text und Body Text Small sowie globales CSS für Struktur, Rhythmus und Quellenangaben in Divi und WordPress
Pullquote
Hervorgehobene Kernaussage
Vorschau
Standard Pullquote
Ein Design-System schafft Klarheit, beschleunigt Entscheidungen und macht Qualität über Projekte hinweg reproduzierbar.
Pullquote mit Quellenangabe
Ein gutes System begrenzt Gestaltung nicht. Es schafft die Grundlage, auf der konsistente und eigenständige Lösungen entstehen können.
Patrick Tilke · Design-System-Dokumentation
Spezifikation
Status: Freigegeben
Größe: clamp(1.5rem, 2vw, 2.25rem)
Zeilenhöhe: 1.2
Letter Spacing: -0.005em
Gewicht: 400
Schrift: Body / Open Sans
Schriftstil: Kursiv
Textfarbe: Primary Color
Hintergrund: Highlight-Farbe #f5e940
Radius: 0.5rem
Padding: 1.5rem; mit Anführungszeichen 3rem oben
Außenabstand: 2rem oben und unten
Quellenangabe: Meta-Text-Größe · Zeilenhöhe 1.35 · Letter Spacing 0.03em · Gewicht 500 · normal · Secondary Text Color · Abstand oben 1rem
Primärer Einsatz: zentrale Aussagen, redaktionelle Kerngedanken und hervorgehobene Auszüge aus dem umgebenden Inhalt
Implementierung: globales CSS für den nativen WordPress-Pullquote-Block und benutzerdefinierte Blockquotes mit der Klasse et-pullquote. Die Klassen left und right aktivieren das Floating erst ab 1100px; quote ergänzt das dekorative Anführungszeichen.