Designrendszer

A BidWars árverésház élő stílusjegyzéke. Minden minta tématokenekből renderelődik, így világos és sötét módban is helyes marad — a téma váltóval nézd meg mindkettőt.

Színtokenek

Minden színminta a token segédosztállyal készül (bg-primary, bg-accent…), sosem fix hexkóddal. A feltüntetett hex értékek csak dokumentációk.

--background

#FFFFFF / #09090B

Pergamen melegsége — oldalfelület

--foreground

#0F1B2D / #FAFAFA

Sötétkék tinta — szövegtörzs

--card

--card-foreground

#FFFFFF / #18181B

Emelt felületek (kártyák, felugrók)

--primary

--primary-foreground

#0F1B2D / #C9A227

Bizalom és struktúra — fő műveletek (sötétkék világos módban / arany sötét módban)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Kevésbé hangsúlyos műveletek és felületek

--muted

--muted-foreground

#F4F4F5 / #27272A

Halvány felületek + segédszöveg

--accent

--accent-foreground

#C9A227 / #C9A227

Akció és reflektorfény — arany, kiemelés/megosztás CTA-k

--destructive

--destructive-foreground

#B3402A / #E06A4F

Romboló műveletek

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Nyomkövetés nélküli szállítás / vitás állapotok

--border

#E4E4E7 / #3F3F46

Szegélyek és elválasztók

--input

#E4E4E7 / #71717A

Űrlapmezők körvonala

--ring

#C9A227 / #C9A227

Fókuszgyűrűk

Tipográfia

A display címsorok serif betűtípust használnak (Fraunces, font-display segítségével); a szövegtörzs Inter.

Display — serif (--font-display)

Címsor 1 — A kalapács egyszer csap le

Címsor 2 — Hamarosan lejár

Címsor 3 — Aukció részletei

Törzs — Inter

Törzs — Licitálj gyűjthető kártyákra, képregényekre és más gyűjteményes tárgyakra kötelező C2C aukciókon, átlátható díjakkal.

Kis betű — A vevővédelem minden lezárt rendelésre érvényes.

Halvány — A díjakat mindig megmutatjuk, mielőtt megerősítenéd a licitet.

Komponensek

Közös alapelemek az @auction/ui csomagból, variánsaikkal és egy rövid használati példával.

Button

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

Badge

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

Card

Kártya felépítése
Fejléc-, tartalom- és lábléc-részek

A kártyák a hirdetések, párbeszédablakok és összegzések emelt felületei.

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

Minták

A fenti alapelemekből épített kanonikus kompozíciók — ezeket másold, ne találd fel újra.

Aukciós kártya

1999 Charizard Holo — PSA 9
Gyűjthető kártyák

Jelenlegi licit: €245.00

€250.00 + €12.50 díj = €262.50

Kiemelt
Lejár 2ó 14p múlva

Figyelmeztető sáv

Információs sáv

A licitek kötelezőek: a nyertes kártyája automatikusan megterhelődik az aukció végén.