Designsystem
Den levande styleguiden för auktionshuset BidWars. Varje exempel renderas från tematokens, så det stämmer i både ljust och mörkt läge — använd temaväxlaren för att granska båda.
Färgtokens
Varje färgruta målas med token-utilityn (bg-primary, bg-accent…), aldrig en hårdkodad hex. Hexvärdena som visas är bara dokumentation.
--background
#FFFFFF / #09090B
Pergamentvärme — sidyta
--foreground
#0F1B2D / #FAFAFA
Marinbläck — brödtext
--card
--card-foreground
#FFFFFF / #18181B
Förhöjda ytor (kort, popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Förtroende & struktur — huvudåtgärder (marin ljust / guld mörkt)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Åtgärder och ytor med låg betoning
--muted
--muted-foreground
#F4F4F5 / #27272A
Dämpade ytor + hjälptext
--accent
--accent-foreground
#C9A227 / #C9A227
Åtgärd & strålkastare — guld, boost/dela-CTA:er
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destruktiva åtgärder
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Ospårad frakt / disputlägen
--border
#E4E4E7 / #3F3F46
Kanter och avdelare
--input
#E4E4E7 / #71717A
Formulärfältets konturer
--ring
#C9A227 / #C9A227
Fokusringar
Typografi
Rubriker använder seriftypsnittet (Fraunces, via font-display); brödtext använder Inter.
Display — serif (--font-display)
Rubrik 1 — Klubban faller en gång
Rubrik 2 — Avslutas snart
Rubrik 3 — Auktionsdetaljer
Brödtext — Inter
Brödtext — Bjud på samlarkort, serier och andra samlarobjekt i bindande C2C-auktioner med transparenta avgifter.
Liten — Köparskydd gäller för varje avslutad order.
Dämpad — Avgifterna visas alltid innan du bekräftar ett bud.
Komponenter
Delade primitiver från @auction/ui, renderade med sina varianter och ett kort användningsexempel.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Kort är den förhöjda ytan för annonser, dialoger och sammanställningar.
<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>Mönster
Kanoniska kompositioner byggda av primitiverna ovan — kopiera dem, återuppfinn dem inte.
Auktionskort
Nuvarande bud: €245,00
€250,00 + €12,50 avgift = €262,50