Sistemul de design

Ghidul de stil viu al casei de licitații BidWars. Fiecare exemplu este randat din token-urile temei, deci rămâne corect în modul luminos și în cel întunecat — folosește comutatorul de temă pentru a le verifica pe ambele.

Token-uri de culoare

Fiecare mostră este colorată cu utilitarul token-ului (bg-primary, bg-accent…), niciodată cu un hex hardcodat. Valorile hex afișate sunt doar documentație.

--background

#FFFFFF / #09090B

Căldură de pergament — suprafața paginii

--foreground

#0F1B2D / #FAFAFA

Cerneală bleumarin — textul de corp

--card

--card-foreground

#FFFFFF / #18181B

Suprafețe ridicate (carduri, popover-uri)

--primary

--primary-foreground

#0F1B2D / #C9A227

Încredere și structură — acțiunile principale (bleumarin luminos / auriu întunecat)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Acțiuni și suprafețe cu accent redus

--muted

--muted-foreground

#F4F4F5 / #27272A

Suprafețe discrete + text ajutător

--accent

--accent-foreground

#C9A227 / #C9A227

Acțiune și reflector — auriu, CTA-uri de promovare/distribuire

--destructive

--destructive-foreground

#B3402A / #E06A4F

Acțiuni distructive

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Stări de livrare fără urmărire / dispută

--border

#E4E4E7 / #3F3F46

Borduri și separatoare

--input

#E4E4E7 / #71717A

Contururi de câmpuri de formular

--ring

#C9A227 / #C9A227

Inele de focus

Tipografie

Titlurile de afișare folosesc fontul serif (Fraunces, prin font-display); textul de corp folosește Inter.

Afișare — serif (--font-display)

Titlu 1 — Ciocanul lovește o singură dată

Titlu 2 — Se termină curând

Titlu 3 — Detalii licitație

Corp — Inter

Corp — Licitează pentru cărți de joc, benzi desenate și alte obiecte de colecție la licitații C2C cu oferte obligatorii și comisioane transparente.

Mic — Protecția cumpărătorului se aplică fiecărei comenzi finalizate.

Estompat — Comisioanele sunt afișate întotdeauna înainte de a confirma o ofertă.

Componente

Primitive partajate din @auction/ui, randate cu variantele lor și un scurt exemplu de utilizare.

Button

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

Badge

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

Card

Compoziția cardului
Sloturi de antet, conținut și subsol

Cardurile sunt suprafața ridicată pentru anunțuri, dialoguri și rezumate.

<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>

Tipare

Compoziții canonice construite din primitivele de mai sus — copiază-le, nu le reinventa.

Card de licitație

Charizard Holo 1999 — PSA 9
Cărți de joc

Oferta curentă: €245.00

€250.00 + comision €12.50 = €262.50

Promovat
Se termină în 2h 14min

Banner de avertizare

Banner informativ

Ofertele sunt obligatorii: cardul câștigătorului este debitat automat la încheierea licitației.