Oblikovalski sistem

Živi slogovni vodnik dražbene hiše BidWars. Vsak vzorec je upodobljen iz žetonov teme, zato ostane pravilen v svetlem in temnem načinu — za pregled obeh uporabite preklop teme.

Barvni žetoni

Vsak vzorec je pobarvan s pripomočkom žetona (bg-primary, bg-accent …), nikoli s trdo kodiranim hex. Prikazane hex vrednosti so le dokumentacija.

--background

#FFFFFF / #09090B

Toplina pergamenta — površina strani

--foreground

#0F1B2D / #FAFAFA

Mornarsko črnilo — besedilo

--card

--card-foreground

#FFFFFF / #18181B

Dvignjene površine (kartice, pojavna okna)

--primary

--primary-foreground

#0F1B2D / #C9A227

Zaupanje in struktura — glavna dejanja (mornarska svetla / zlata temna)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Dejanja in površine z nizkim poudarkom

--muted

--muted-foreground

#F4F4F5 / #27272A

Umirjene površine + pomožno besedilo

--accent

--accent-foreground

#C9A227 / #C9A227

Dejanje in središče pozornosti — zlata, CTA za izpostavitev/deljenje

--destructive

--destructive-foreground

#B3402A / #E06A4F

Destruktivna dejanja

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Stanja pošiljanja brez sledenja / sporov

--border

#E4E4E7 / #3F3F46

Obrobe in ločilniki

--input

#E4E4E7 / #71717A

Obrisi polj obrazcev

--ring

#C9A227 / #C9A227

Obroči fokusa

Tipografija

Naslovi Display uporabljajo serif pisavo (Fraunces, prek font-display); besedilo uporablja Inter.

Display — serif (--font-display)

Naslov 1 — Kladivce udari enkrat

Naslov 2 — Kmalu se konča

Naslov 3 — Podrobnosti dražbe

Besedilo — Inter

Besedilo — Ponujajte za zbirateljske karte, stripe in druge zbirateljske predmete v zavezujočih C2C dražbah s preglednimi provizijami.

Majhno — Zaščita kupca velja za vsako poravnano naročilo.

Umirjeno — Provizije so vedno prikazane, preden potrdite ponudbo.

Komponente

Deljene primitivne enote iz @auction/ui, upodobljene z njihovimi različicami in kratkim izrezkom uporabe.

Button

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

Badge

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

Card

Sestava kartice
Reže za glavo, vsebino in nogo

Kartice so dvignjena površina za oglase, pogovorna okna in povzetke.

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

Vzorci

Kanoonske sestave, zgrajene iz zgornjih primitiv — kopirajte jih, ne izumljajte na novo.

Kartica dražbe

1999 Charizard Holo — PSA 9
Zbirateljske karte

Trenutna ponudba: €245.00

€250.00 + €12.50 provizije = €262.50

Izpostavljeno
Konča se čez 2 h 14 min

Opozorilni pas

Informativni pas

Ponudbe so zavezujoče: ko se dražba konča, se zmagovalčeva kartica obremeni samodejno.