Dizajnový systém
Živá príručka štýlu aukčného domu BidWars. Každá ukážka sa vykresľuje z tokenov motívu, takže ostáva správna vo svetlom aj tmavom režime — oba si pozri prepínačom motívu.
Farebné tokeny
Každá vzorka je namaľovaná utilitou tokenu (bg-primary, bg-accent…), nikdy napevno zadaným hex kódom. Uvedené hex hodnoty slúžia len ako dokumentácia.
--background
#FFFFFF / #09090B
Teplý pergamen — plocha stránky
--foreground
#0F1B2D / #FAFAFA
Námornícky atrament — hlavný text
--card
--card-foreground
#FFFFFF / #18181B
Zvýšené plochy (karty, popovery)
--primary
--primary-foreground
#0F1B2D / #C9A227
Dôvera a štruktúra — hlavné akcie (námornícka svetlá / zlatá tmavá)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Akcie a plochy s nízkym dôrazom
--muted
--muted-foreground
#F4F4F5 / #27272A
Stlmené plochy + pomocný text
--accent
--accent-foreground
#C9A227 / #C9A227
Akcie a stred pozornosti — zlatá, CTA pre boost a zdieľanie
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destruktívne akcie
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Stavy zásielky bez sledovania / sporov
--border
#E4E4E7 / #3F3F46
Orámovania a oddeľovače
--input
#E4E4E7 / #71717A
Obrysy formulárových polí
--ring
#C9A227 / #C9A227
Zvýraznenie fokusu
Typografia
Nadpisy používajú serifové písmo (Fraunces, cez font-display); hlavný text používa Inter.
Nadpis — serifové (--font-display)
Nadpis 1 — Kladivko udrie raz
Nadpis 2 — Čoskoro končí
Nadpis 3 — Detaily aukcie
Text — Inter
Text — Prihadzuj na zberateľské karty, komiksy a ďalšie zbierkové predmety v záväzných C2C aukciách s transparentnými poplatkami.
Malé — Ochrana kupujúceho platí pri každej vybavenej objednávke.
Stlmené — Poplatky vidíš vždy predtým, než potvrdíš ponuku.
Komponenty
Zdieľané primitívy z @auction/ui, vykreslené vo variantoch s krátkou ukážkou použitia.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Karty sú zvýšená plocha pre inzeráty, dialógy a súhrny.
<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>Vzory
Kanonické kompozície postavené z primitív vyššie — kopíruj ich, nevymýšľaj znova.
Aukčná karta
Aktuálna ponuka: €245.00
€250.00 + poplatok €12.50 = €262.50