Design system
La guida di stile vivente della casa d'aste BidWars. Ogni campione è renderizzato dai token del tema, quindi resta corretto in modalità chiara e scura — usa il selettore del tema per controllarle entrambe.
Token colore
Ogni campione è dipinto con l'utility del token (bg-primary, bg-accent…), mai con un hex hardcoded. I valori hex mostrati sono solo documentazione.
--background
#FFFFFF / #09090B
Calore pergamena — superficie della pagina
--foreground
#0F1B2D / #FAFAFA
Inchiostro blu navy — testo del corpo
--card
--card-foreground
#FFFFFF / #18181B
Superfici elevate (card, popover)
--primary
--primary-foreground
#0F1B2D / #C9A227
Fiducia e struttura — azioni principali (navy chiaro / oro scuro)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Azioni e superfici a bassa enfasi
--muted
--muted-foreground
#F4F4F5 / #27272A
Superfici attenuate + testo di aiuto
--accent
--accent-foreground
#C9A227 / #C9A227
Azione e riflettori — oro, CTA di promozione/condivisione
--destructive
--destructive-foreground
#B3402A / #E06A4F
Azioni distruttive
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Stati di spedizione non tracciata / disputa
--border
#E4E4E7 / #3F3F46
Bordi e divisori
--input
#E4E4E7 / #71717A
Contorni dei campi modulo
--ring
#C9A227 / #C9A227
Anelli di focus
Tipografia
I titoli usano il carattere serif (Fraunces, via font-display); il testo del corpo usa Inter.
Titolo — serif (--font-display)
Titolo 1 — Il martello batte una volta sola
Titolo 2 — In scadenza
Titolo 3 — Dettagli dell'asta
Corpo — Inter
Corpo — Fai offerte su carte collezionabili, fumetti e altri oggetti da collezione in aste C2C vincolanti con commissioni trasparenti.
Piccolo — La protezione acquirente si applica a ogni ordine liquidato.
Attenuato — Le commissioni sono sempre mostrate prima che tu confermi un'offerta.
Componenti
Primitive condivise da @auction/ui, renderizzate con le loro varianti e un breve esempio d'uso.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Le card sono la superficie elevata per annunci, finestre di dialogo e riepiloghi.
<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>Pattern
Composizioni canoniche costruite dalle primitive qui sopra — copiale, non reinventarle.
Card asta
Offerta attuale: €245,00
€250,00 + commissione di €12,50 = €262,50