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. Button Matrix
Button S
Button Anchor 1
Button M (Default)
Button Anchor M
Button Anchor M
Button L
Button Anchor L
3. Card System
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
6. Typyography
7. Alerts/Feedback
Inline Alert (Form/Hinweis)
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
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)
Erfolg
Deine Anfrage wurde erfolgreich übermittelt.
Wir prüfen dein Anliegen und melden uns zeitnah bei dir zurück.
Achtung
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.