Dizajnerski sustav
Živi vodič stila aukcijske kuće BidWars. Svaki se primjer renderira iz tokena teme, pa ostaje točan u svijetlom i tamnom načinu — koristi prekidač teme da pregledaš oba.
Tokeni boja
Svaki uzorak oslikan je token-utilitijem (bg-primary, bg-accent…), nikad zadanom hex vrijednošću. Prikazane hex vrijednosti služe samo kao dokumentacija.
--background
#FFFFFF / #09090B
Toplina pergamenta — površina stranice
--foreground
#0F1B2D / #FAFAFA
Mornarsko modra tinta — tekst tijela
--card
--card-foreground
#FFFFFF / #18181B
Uzdignute površine (kartice, skočni prozori)
--primary
--primary-foreground
#0F1B2D / #C9A227
Povjerenje i struktura — glavne radnje (modra svijetla / zlatna tamna)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Radnje i površine niskog naglaska
--muted
--muted-foreground
#F4F4F5 / #27272A
Prigušene površine + pomoćni tekst
--accent
--accent-foreground
#C9A227 / #C9A227
Radnja i reflektor — zlato, CTA za boost/dijeljenje
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destruktivne radnje
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Stanja slanja bez praćenja / sporova
--border
#E4E4E7 / #3F3F46
Okviri i razdjelnici
--input
#E4E4E7 / #71717A
Obrubi polja obrazaca
--ring
#C9A227 / #C9A227
Prstenovi fokusa
Tipografija
Naslovi koriste serifske fontove (Fraunces, putem font-display); tekst tijela koristi Inter.
Naslovni — serifski (--font-display)
Naslov 1 — Čekić udara samo jednom
Naslov 2 — Uskoro završava
Naslov 3 — Pojedinosti aukcije
Tijelo — Inter
Tijelo — Licitiraj na karte za igru, stripove i druge kolekcionarske predmete na obvezujućim C2C aukcijama s transparentnim naknadama.
Sitno — Zaštita kupca vrijedi za svaku namirenu narudžbu.
Prigušeno — Naknade se uvijek prikazuju prije nego što potvrdiš ponudu.
Komponente
Dijeljeni primitivi iz @auction/ui, renderirani sa svojim varijantama i kratkim isječkom upotrebe.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Kartice su uzdignuta površina za oglase, dijaloge i sažetke.
<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>Obrasci
Kanonske kompozicije izgrađene od gornjih primitiva — kopiraj ih, ne izmišljaj ih ponovno.
Kartica aukcije
Trenutna ponuda: €245.00
€250.00 + €12.50 naknada = €262.50