Theme & Style Guide
Eine Live-Vorschau der globalen UI-Komponenten, Farben und Stile. Änderungen in src/app/globals.css werden hier sofort sichtbar.
Farbpalette
Background
--background
Foreground
--foreground
Card
--card
Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Destructive
--destructive
Border
--border
Input
--input
Ring
--ring
Typografie
Überschrift H1
The quick brown fox jumps over the lazy dog.
Überschrift H2
The quick brown fox jumps over the lazy dog.
Überschrift H3
The quick brown fox jumps over the lazy dog.
Überschrift H4
The quick brown fox jumps over the lazy dog.
Das ist ein normaler Fließtext (paragraph), der die Standard-Schriftgröße und -farbe verwendet. Er dient dazu, längere Textabschnitte darzustellen und sollte unter allen Bedingungen gut lesbar sein. The quick brown fox jumps over the lazy dog.
"Das ist ein Zitat (blockquote). Es wird oft für Testimonials oder wichtige Hervorhebungen verwendet."
UI-Komponenten & Effekte
Buttons
Zeigt die verschiedenen Button-Stile. Hover- und Klick-Zustände sind interaktiv testbar.
Badges
Beispiele für Badges mit und ohne Icons in verschiedenen Varianten.
Alerts
Heads up!
Error
Verläufe, Rahmen & Hintergründe
Diese Klassen sind in `globals.css` unter `@layer utilities` definiert und sollten sich an das Theme anpassen.
Text Gradient
.text-gradient