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

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

Card

Skladba karty
Sloty pre hlavičku, obsah a pätičku

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

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

1999 Charizard Holo — PSA 9
Zberateľské karty

Aktuálna ponuka: €245.00

€250.00 + poplatok €12.50 = €262.50

Boostnuté
Končí o 2 h 14 min

Výstražný banner

Informačný banner

Ponuky sú záväzné: keď aukcia skončí, víťazovi sa suma automaticky strhne z karty.