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.