Bricks Blueprint
Design System | Advanced Themer Framework
Unicorns Media
Farben
Alle Farben basieren auf AT CSS Custom Properties und skalieren automatisch.
Primary
primary
primary-light
primary-dark
primary-ultra-light
primary-ultra-dark
Secondary & Neutral
secondary
secondary-dark
secondary-light
neutral
neutral-dark
neutral-light
Basis & Neutral Extended
neutral-ultra-dark
neutral-ultra-light
base
base-dark
base-light
white
Typografie
Fluid Typography mit AT-Variablen. Alle Groessen skalieren responsiv.
text-xxxl
Display Heading
text-xxl
Section Heading
text-xl
Card Heading
text-l
Intro-Text und groessere Absaetze
text-m
Standard Fliesstext fuer den Hauptinhalt der Seite.
text-s
Kleiner Text fuer Bildunterschriften und Hinweise
text-xs
Extra klein fuer Labels und Tags
text-xxs
Kleinste Groesse fuer Fussnoten
Spacing
Konsistente Abstaende durch mathematische Skalierung.
space-xxs
space-xs
space-s
space-m
space-l
space-xl
space-xxl
Border Radius
Drei Stufen fuer konsistente Rundungen im gesamten Design.
radius-s
radius-m
radius-l
Buttons
Button-Varianten fuer verschiedene Aktionen und Hierarchien.
Filled
Primary
Secondary
Dark
Outline
Outline Primary
Outline Secondary
Outline Neutral
Pill
Primary Pill
Light Pill
Cards
Card-Stile fuer verschiedene Content-Bereiche.
Standard Card
Eine Card mit dezenten Schatten und farbigem Top-Akzent. Perfekt fuer Feature-Sections.
Mehr erfahren
Highlighted
Die hervorgehobene Variante fuer wichtige Inhalte und Call-to-Actions.
Jetzt starten
Outline Card
Dezente Outline-Variante ohne Schatten. Ideal fuer sekundaere Inhalte.
Details
Formulare
Form-Elemente und Validierungs-States im Design System.
Name
Max Mustermann
max@beispiel.de
Nachricht
Ihre Nachricht hier...
Form States
Fokussiertes Feld
Fehlerhaftes Feld
Erfolgreich validiert
Deaktiviert
Badges & Alerts
Status-Anzeigen und Benachrichtigungen.
BADGES
Neu
Aktiv
Ausstehend
Fehler
Info
Entwurf
ALERTS
Erfolg
Die Aenderungen wurden erfolgreich gespeichert.
Warnung
Bitte ueberpruefen Sie die Eingaben vor dem Speichern.
Fehler
Es ist ein Problem aufgetreten. Bitte versuchen Sie es erneut.
Info
Das System wird heute Nacht gewartet. Bitte speichern Sie Ihre Arbeit.
Dieses Design System nutzt CSS Custom Properties via Advanced Themer. Alle Tokens koennen global oder pro Komponente ueberschrieben werden.