Designsystem
Der lebende Styleguide des Auktionshauses BidWars. Jedes Beispiel wird aus Theme-Tokens gerendert und bleibt daher im hellen wie im dunklen Modus korrekt — prüfen Sie beides mit dem Theme-Umschalter.
Farb-Tokens
Jedes Farbfeld wird mit der Token-Utility gezeichnet (bg-primary, bg-accent…), nie mit einem hartkodierten Hex-Wert. Die gezeigten Hex-Werte dienen nur der Dokumentation.
--background
#FFFFFF / #09090B
Pergament-Wärme — Seitenfläche
--foreground
#0F1B2D / #FAFAFA
Marine-Tinte — Fließtext
--card
--card-foreground
#FFFFFF / #18181B
Erhöhte Flächen (Karten, Popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Vertrauen & Struktur — Hauptaktionen (Marine hell / Gold dunkel)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Zurückhaltende Aktionen und Flächen
--muted
--muted-foreground
#F4F4F5 / #27272A
Abgeschwächte Flächen + Hilfetexte
--accent
--accent-foreground
#C9A227 / #C9A227
Aktion & Rampenlicht — Gold, Boost-/Teilen-CTAs
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destruktive Aktionen
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Zustände für Versand ohne Sendungsverfolgung / Streitfälle
--border
#E4E4E7 / #3F3F46
Rahmen und Trennlinien
--input
#E4E4E7 / #71717A
Umrisse von Formularfeldern
--ring
#C9A227 / #C9A227
Fokus-Ringe
Typografie
Display-Überschriften nutzen die Serifenschrift (Fraunces, via font-display); Fließtext nutzt Inter.
Display — Serifen (--font-display)
Überschrift 1 — Der Hammer fällt nur einmal
Überschrift 2 — Endet bald
Überschrift 3 — Auktionsdetails
Fließtext — Inter
Fließtext — Bieten Sie auf Sammelkarten, Comics und andere Sammlerstücke in verbindlichen C2C-Auktionen mit transparenten Gebühren.
Klein — Käuferschutz gilt für jede abgerechnete Bestellung.
Abgeschwächt — Gebühren werden immer angezeigt, bevor Sie ein Gebot bestätigen.
Komponenten
Geteilte Primitive aus @auction/ui, gerendert mit ihren Varianten und einem kurzen Anwendungsbeispiel.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Karten sind die erhöhte Fläche für Anzeigen, Dialoge und Zusammenfassungen.
<Card>
<CardHeader><CardTitle>…</CardTitle></CardHeader>
<CardContent>…</CardContent>
<CardFooter>…</CardFooter>
</Card>Input
<Input placeholder="…" />
<Input disabled placeholder="…" />Skeleton
<Skeleton className="aspect-[4/3] w-full" />Avatar
<Avatar>
<AvatarImage src="…" alt="…" />
<AvatarFallback>AH</AvatarFallback>
</Avatar>Muster
Kanonische Kompositionen aus den obigen Primitiven — kopieren Sie diese, statt sie neu zu erfinden.
Auktionskarte
Aktuelles Gebot: €245,00
€250,00 + €12,50 Gebühr = €262,50