UI Design System. Durch Design Token Standards interoperabel einsetzbar: Framework-neutral, Tool-unabhängig. Getestet werden Farben + Shades, Text on Color, Components (Buttons, Cards, Sections), Dark Mode, Hierarchie
1. Hero Section (Dark)
Heading 1
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.
Getestet wird: Text auf Primary, Button Primary States, Copper auf Dark, Contrast.
2. Buttonvarianten & Größen
Die Variantenmatrix dokumentiert die visuelle Hierarchie, die verfügbaren Größen und typische Anwendungen der im Design System definierten Buttons. Primary, Secondary, Ghost, Tertiary Link und Tertiary Outline werden in den Größen S, M und L verglichen.
Die dargestellten Buttons bleiben vollständig interaktiv und ermöglichen die funktionale Prüfung von Hover, Focus und Active. Eine isolierte Darstellung aller Zustände einschließlich Disabled erfolgt in der anschließenden Button State Matrix.
2.1. Größenvergleich
Die Größen S, M und L unterscheiden sich durch Typografie, Padding und daraus resultierende Zielgröße. Die semantische Rolle und die visuelle State-Logik bleiben größenübergreifend identisch. Die passende Größe richtet sich nach Nutzungskontext, verfügbarer Fläche und gewünschter visueller Priorität.
Button S
S eignet sich für kompakte Bedienoberflächen und nachgeordnete Aktionen, etwa in Toolbars, Tabellen oder dichten UI-Bereichen. Die Zielgröße muss trotz der kompakten Darstellung ausreichend bedienbar bleiben.
Button M
M ist die Standardgröße des Systems und für die meisten Aktionen in Inhaltsbereichen, Formularen, Cards und Dialogen vorgesehen.
Button L
L wird für hervorgehobene Aktionen mit größerem Platzangebot eingesetzt, beispielsweise in Hero-, CTA- und Conversion-Bereichen. Die Größe erhöht die Präsenz, ersetzt aber nicht die semantische Rollenwahl.
2.2 Buttons mit Icons
Icons ergänzen die Buttonbeschriftung, wenn sie Bedeutung, Richtung oder Ergebnis einer Aktion schneller erfassbar machen. Die Textbeschriftung bleibt der primäre Bedeutungsträger. Icons werden nicht rein dekorativ eingesetzt und dürfen keine widersprüchliche Bedeutung vermitteln.
Die Buttonrolle richtet sich nach der Priorität im jeweiligen Kontext und nicht allein nach dem Verb oder Icon: „Speichern“ kann je nach Oberfläche Primary, Secondary oder Ghost sein. Die Matrix zeigt also typische Beispiele, keine unveränderliche Zuordnung eines Verbs zu einer Rolle.
Primary
Secondary
Ghost
Tertiary Actions
Tertiary Actions bilden die leichteste Interaktionsebene. Der Tertiary Link eignet sich für textnahe und nachgeordnete Aktionen. Tertiary Outline erzeugt durch die sichtbare Border mehr Struktur und eignet sich unter anderem für Filter, Ansichtswechsel und kompakte UI-Steuerungen.
3. Button State Matrix
Die Button State Matrix dokumentiert und vergleicht die visuellen sowie funktionalen Zustände der im Design System definierten Buttonvarianten. Geprüft werden Default, Hover, Focus, Active und Disabled auf den zentralen Light- und Dark-Mode-Hintergründen.
Ziel ist eine konsistente, verständliche und barrierearme Interaktionslogik. Jeder Zustand muss sich eindeutig vom Ausgangszustand unterscheiden, ohne die visuelle Hierarchie der Buttonrollen zu verändern. Die statisch dargestellten Hover-, Focus-, Active- und Disabled-Zustände dienen der visuellen Systemprüfung. Das tatsächliche Interaktionsverhalten wird zusätzlich mit Maus, Tastatur und Touch-Eingabe funktional getestet.
3.1 Light Mode
Im Light Mode werden die Buttonzustände auf dem globalen hellen Background geprüft. Dabei stehen die Lesbarkeit der Textfarben, die Erkennbarkeit von Borders sowie die visuelle Trennung zwischen verfügbaren, interaktiven und deaktivierten Elementen im Mittelpunkt.
Der Hover State signalisiert die mögliche Interaktion durch eine kontrollierte Veränderung von Background, Text und gegebenenfalls Border. Der Focus State verwendet einen kontrastreichen Accent-Cool-Ring außerhalb der Komponentenbegrenzung. Der Active State verstärkt die visuelle Rückmeldung während der Aktivierung. Der Disabled State reduziert die visuelle Priorität, muss aber weiterhin lesbar und eindeutig als Bestandteil der Benutzeroberfläche erkennbar bleiben.
Primary M
Secondary M
Ghost M
Tertiary Link M
Tertiary Outline M
3.2 Dark Mode
Im Dark Mode werden die Buttonzustände auf dem globalen Dark Background geprüft. Die Komponenten behalten ihre semantische Rolle, verwenden jedoch angepasste Text-, Border- und State-Farben, damit sie auf dunklen Flächen ausreichend sichtbar bleiben.
Die Hierarchie wird im Dark Mode primär über Farbkontrast, Borders und transparente State-Layer erzeugt. Button-Shadows werden standardmäßig nicht eingesetzt. Hover und Active verwenden abgestufte transparente Component Layer. Der Focus State verwendet einen helleren Accent-Cool-Ring. Disabled States werden bewusst zurückgenommen, ohne vollständig mit dem Hintergrund zu verschmelzen.
Primary M
Secondary M
Ghost M
Tertiary Link M
Tertiary Outline M
Hinweis zur Testdarstellung:
Hover, Focus, Active und Disabled werden in dieser Matrix als statische Referenzzustände dargestellt. Die Preview-Elemente sind nicht interaktiv und verwenden pointer-events: none, damit reale Browserzustände die dargestellten Vorschauen nicht überschreiben. Nur die Default-Buttons bleiben interaktiv und dienen der funktionalen Prüfung von Hover, Focus, Active, Transition und Linkverhalten.
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
Success
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.
Warning
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.
Error
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.
Info
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.
4.3 Light Mode
Success
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.
Warning
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.
Error
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.
Info
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.
4.4 Dark Mode
Success
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.
Warning
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.
Error
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.
Info
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.
4.5 Accessibility und Implementierung
Success
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.
Warning
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.
Error
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.
Info
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.
4. Color Backgrounds
4. Color Backgrounds
4. Color Backgrounds
5. Tints & Shades Test
Brand Colors
Type: Base / Token: --color-brand-primary / Brand Name: Charcoal Green
100
200
300
400
500
600
700
800
900
Type: Interaction / Token: --color-brand-secondary / Brand Name: Copper
100
200
300
400
500
600
700
800
800
Type: Accent/Accent Tone 1 / Token: --color-brand-accent-cool / Brand Name: Slate Blue
100
200
300
400
500
600
700
800
900
Type: Accent/Accent Tone 2 / Token: --color-brand-accent-gold / Brand Name: Golden Accent
100
200
300
400
500
600
700
800
900
Type: Accent/Accent Tone 3 / Token: --color-brand-accent-success / Brand Name: Leaf Green
100
200
300
400
500
600
700
800
900