Dizaino sistema

Gyvas BidWars aukcionų namų stiliaus vadovas. Kiekvienas pavyzdys atvaizduojamas iš temos žetonų, todėl lieka teisingas šviesioje ir tamsioje temoje — peržiūrėkite abi perjungdami temą.

Spalvų žetonai

Kiekvienas pavyzdys piešiamas žetono įrankiu (bg-primary, bg-accent…), niekada užkoduota hex reikšme. Rodomos hex reikšmės skirtos tik dokumentacijai.

--background

#FFFFFF / #09090B

Pergamento šiluma — puslapio paviršius

--foreground

#0F1B2D / #FAFAFA

Tamsiai mėlynas rašalas — pagrindinis tekstas

--card

--card-foreground

#FFFFFF / #18181B

Pakelti paviršiai (kortelės, iššokantieji langai)

--primary

--primary-foreground

#0F1B2D / #C9A227

Pasitikėjimas ir struktūra — pagrindiniai veiksmai (tamsiai mėlyna šviesioje / aukso tamsioje)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Antraeiliai veiksmai ir paviršiai

--muted

--muted-foreground

#F4F4F5 / #27272A

Nutildyti paviršiai + pagalbinis tekstas

--accent

--accent-foreground

#C9A227 / #C9A227

Veiksmas ir dėmesys — auksas, iškėlimo / dalijimosi mygtukai

--destructive

--destructive-foreground

#B3402A / #E06A4F

Naikinamieji veiksmai

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Siuntimo be sekimo / ginčų būsenos

--border

#E4E4E7 / #3F3F46

Rėmeliai ir skirtukai

--input

#E4E4E7 / #71717A

Formos laukų kontūrai

--ring

#C9A227 / #C9A227

Fokusavimo žiedai

Tipografija

Antraštėms naudojamas šerifuotas šriftas (Fraunces, per font-display); pagrindiniam tekstui — Inter.

Antraštės — šerifuotas (--font-display)

1 antraštė — Plaktukas krenta kartą

2 antraštė — Netrukus baigsis

3 antraštė — Aukciono informacija

Tekstas — Inter

Tekstas — Statykite už korteles, komiksus ir kitus kolekcionuojamus daiktus įpareigojančiuose C2C aukcionuose su skaidriais mokesčiais.

Smulkus — Pirkėjo apsauga taikoma kiekvienam apmokėtam užsakymui.

Nutildytas — Mokesčiai visada rodomi prieš patvirtinant statymą.

Komponentai

Bendri @auction/ui primityvai, atvaizduoti su variantais ir trumpu naudojimo pavyzdžiu.

Button

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

Badge

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

Card

Kortelės kompozicija
Antraštės, turinio ir poraštės sritys

Kortelės yra pakeltas paviršius skelbimams, dialogams ir suvestinėms.

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

Šablonai

Kanoninės kompozicijos iš aukščiau pateiktų primityvų — kopijuokite jas, o ne išradinėkite iš naujo.

Aukciono kortelė

1999 Charizard Holo — PSA 9
Kortelės

Dabartinis statymas: €245.00

€250.00 + €12.50 mokestis = €262.50

Iškeltas
Baigsis po 2 val. 14 min.

Įspėjimo juosta

Informacinė juosta

Statymai įpareigojantys: aukcionui pasibaigus, laimėtojo kortelė apmokama automatiškai.