Designsysteem

De levende stijlgids van het veilinghuis BidWars. Elk voorbeeld wordt gerenderd vanuit thematokens, dus blijft het correct in lichte en donkere modus — gebruik de themaschakelaar om beide te bekijken.

Kleurtokens

Elk staal wordt geschilderd met de token-utility (bg-primary, bg-accent…), nooit met een hardcoded hex. De getoonde hexwaarden zijn alleen documentatie.

--background

#FFFFFF / #09090B

Pergamentwarmte — paginaoppervlak

--foreground

#0F1B2D / #FAFAFA

Navy-inkt — broodtekst

--card

--card-foreground

#FFFFFF / #18181B

Verhoogde oppervlakken (kaarten, popovers)

--primary

--primary-foreground

#0F1B2D / #C9A227

Vertrouwen & structuur — hoofdacties (navy licht / goud donker)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Acties en oppervlakken met lage nadruk

--muted

--muted-foreground

#F4F4F5 / #27272A

Gedempte oppervlakken + hulptekst

--accent

--accent-foreground

#C9A227 / #C9A227

Actie & schijnwerper — goud, boost-/deel-CTA's

--destructive

--destructive-foreground

#B3402A / #E06A4F

Destructieve acties

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Statussen verzending zonder tracking / geschil

--border

#E4E4E7 / #3F3F46

Randen en scheidingslijnen

--input

#E4E4E7 / #71717A

Contouren van formuliervelden

--ring

#C9A227 / #C9A227

Focusringen

Typografie

Displaykoppen gebruiken het serif-lettertype (Fraunces, via font-display); broodtekst gebruikt Inter.

Display — serif (--font-display)

Kop 1 — De hamer valt maar één keer

Kop 2 — Eindigt binnenkort

Kop 3 — Veilingdetails

Broodtekst — Inter

Broodtekst — Bied op ruilkaarten, strips en andere verzamelobjecten in bindende C2C-veilingen met transparante kosten.

Klein — Kopersbescherming geldt voor elke afgeronde bestelling.

Gedempt — Kosten worden altijd getoond voordat je een bod bevestigt.

Componenten

Gedeelde primitieven uit @auction/ui, gerenderd met hun varianten en een kort gebruiksvoorbeeld.

Button

<Button variant="accent" size="lg">…</Button>

Badge

default
secondary
outline
warning
destructive
Geboost
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>

Card

Kaartopbouw
Slots voor kop, inhoud en voet

Kaarten zijn het verhoogde oppervlak voor advertenties, dialogen en samenvattingen.

<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

AHAH
<Avatar>
  <AvatarImage src="…" alt="…" />
  <AvatarFallback>AH</AvatarFallback>
</Avatar>

Patronen

Canonieke composities gebouwd uit bovenstaande primitieven — kopieer deze, vind ze niet opnieuw uit.

Veilingkaart

1999 Charizard Holo — PSA 9
Ruilkaarten

Huidig bod: €245,00

€250,00 + €12,50 commissie = €262,50

Geboost
Eindigt over 2 u 14 min

Waarschuwingsbanner

Infobanner

Biedingen zijn bindend: de kaart van de winnaar wordt automatisch belast als de veiling eindigt.