Designsystem
Den levende styleguide for BidWars-auktionshuset. Hvert eksempel gengives fra tematokens, så det forbliver korrekt i lys og mørk tilstand — brug temaknappen til at gennemse begge.
Farvetokens
Hver farveprøve males med token-utility'en (bg-primary, bg-accent…), aldrig en hardkodet hex. De viste hex-værdier er kun dokumentation.
--background
#FFFFFF / #09090B
Pergamentvarme — sideoverflade
--foreground
#0F1B2D / #FAFAFA
Mørkeblåt blæk — brødtekst
--card
--card-foreground
#FFFFFF / #18181B
Hævede overflader (kort, popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Tillid & struktur — primære handlinger (mørkeblå lys / guld mørk)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Handlinger og overflader med lav vægt
--muted
--muted-foreground
#F4F4F5 / #27272A
Dæmpede overflader + hjælpetekst
--accent
--accent-foreground
#C9A227 / #C9A227
Handling & spotlight — guld, boost/del-CTA'er
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destruktive handlinger
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Forsendelse uden tracking / dispute-tilstande
--border
#E4E4E7 / #3F3F46
Kanter og skillelinjer
--input
#E4E4E7 / #71717A
Omrids på formularfelter
--ring
#C9A227 / #C9A227
Fokusringe
Typografi
Overskrifter bruger serif-skriften (Fraunces, via font-display); brødtekst bruger Inter.
Display — serif (--font-display)
Overskrift 1 — Hammeren falder én gang
Overskrift 2 — Slutter snart
Overskrift 3 — Auktionsdetaljer
Brødtekst — Inter
Brødtekst — Byd på samlerkort, tegneserier og andre samleobjekter på bindende C2C-auktioner med gennemsigtige gebyrer.
Lille — Køberbeskyttelse gælder for hver afsluttet ordre.
Dæmpet — Gebyrer vises altid, før du bekræfter et bud.
Komponenter
Delte primitiver fra @auction/ui, gengivet med deres varianter og et kort brugseksempel.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Kort er den hævede overflade til annoncer, dialoger og oversigter.
<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ønstre
Kanoniske kompositioner bygget af primitiverne ovenfor — kopiér dem, genfind dem ikke.
Auktionskort
Nuværende bud: €245.00
€250.00 + €12.50 gebyr = €262.50