Design systém
Živý styleguide aukčního domu BidWars. Každý vzorek je vykreslený z tokenů motivu, takže zůstává správný ve světlém i tmavém režimu — oba si prohlédni přepínačem motivu.
Barevné tokeny
Každý vzorek je malovaný utilitou tokenu (bg-primary, bg-accent…), nikdy pevně zadaným hexem. Zobrazené hex hodnoty jsou jen dokumentace.
--background
#FFFFFF / #09090B
Teplota pergamenu — plocha stránky
--foreground
#0F1B2D / #FAFAFA
Námořnický inkoust — text těla
--card
--card-foreground
#FFFFFF / #18181B
Zvýšené plochy (karty, popovery)
--primary
--primary-foreground
#0F1B2D / #C9A227
Důvěra a struktura — hlavní akce (námořnická světlá / zlatá tmavá)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Akce a plochy s nízkým důrazem
--muted
--muted-foreground
#F4F4F5 / #27272A
Stlumené plochy + pomocný text
--accent
--accent-foreground
#C9A227 / #C9A227
Akce a reflektor — zlatá, boost/sdílecí CTA
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destruktivní akce
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Stavy zásilek bez sledování / sporů
--border
#E4E4E7 / #3F3F46
Ohraničení a oddělovače
--input
#E4E4E7 / #71717A
Obrysy polí formuláře
--ring
#C9A227 / #C9A227
Zaostřovací kroužky
Typografie
Display nadpisy používají patkové písmo (Fraunces, přes font-display); text těla používá Inter.
Display — patkové (--font-display)
Nadpis 1 — Kladívko padá jednou
Nadpis 2 — Brzy končí
Nadpis 3 — Detaily aukce
Text — Inter
Text — Přihazuj na sběratelské karty, komiksy a další předměty v závazných C2C aukcích s transparentními poplatky.
Malý — Ochrana kupujícího platí pro každou vypořádanou objednávku.
Stlumený — Poplatky jsou vždy zobrazené před potvrzením příhozu.
Komponenty
Sdílené primitivy z @auction/ui, vykreslené s jejich variantami a krátkou ukázkou použití.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Karty jsou zvýšenou plochou pro nabídky, dialogy a souhrny.
<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é kompozice postavené z primitiv výše — kopíruj je, nevymýšlej znovu.
Aukční karta
Aktuální příhoz: €245.00
€250.00 + poplatek €12.50 = €262.50