Design-järjestelmä

BidWars-huutokauppahuoneen elävä tyyliopas. Jokainen esimerkki renderöidään teematokeneista, joten se pysyy oikeana vaaleassa ja tummassa tilassa — tarkista molemmat teemanvaihdolla.

Väritokenit

Jokainen värimalli maalataan token-apuluokalla (bg-primary, bg-accent…), ei koskaan kovakoodatulla heksalla. Näytetyt heksa-arvot ovat vain dokumentaatiota.

--background

#FFFFFF / #09090B

Pergamentin lämpö — sivun pinta

--foreground

#0F1B2D / #FAFAFA

Laivastonsininen muste — leipäteksti

--card

--card-foreground

#FFFFFF / #18181B

Kohotetut pinnat (kortit, ponnahdusikkunat)

--primary

--primary-foreground

#0F1B2D / #C9A227

Luottamus ja rakenne — päätoiminnot (navy vaaleassa / kulta tummassa)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Vähän painotetut toiminnot ja pinnat

--muted

--muted-foreground

#F4F4F5 / #27272A

Hillityt pinnat + aputeksti

--accent

--accent-foreground

#C9A227 / #C9A227

Toiminta ja valokeila — kulta, nosto- ja jakamis-CTA:t

--destructive

--destructive-foreground

#B3402A / #E06A4F

Tuhoavat toiminnot

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Seuraamaton toimitus / riitatilat

--border

#E4E4E7 / #3F3F46

Reunukset ja jakajat

--input

#E4E4E7 / #71717A

Lomakekenttien ääriviivat

--ring

#C9A227 / #C9A227

Fokusrenkaat

Typografia

Otsikot käyttävät serif-kirjasinta (Fraunces, font-display:n kautta); leipäteksti käyttää Interiä.

Display — serif (--font-display)

Otsikko 1 — Nuija kopauttaa vain kerran

Otsikko 2 — Päättymässä pian

Otsikko 3 — Huutokaupan tiedot

Leipäteksti — Inter

Leipäteksti — Tee tarjouksia keräilykorteista, sarjakuvista ja muista keräilyesineistä sitovissa C2C-huutokaupoissa läpinäkyvillä kuluilla.

Pieni — Ostajansuoja koskee jokaista selvitettyä tilausta.

Hillitty — Kulut näytetään aina ennen tarjouksen vahvistusta.

Komponentit

Jaetut peruskomponentit @auction/ui:sta, renderöityinä varianteineen ja lyhyen käyttöesimerkin kera.

Button

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

Badge

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

Card

Kortin rakenne
Otsikko-, sisältö- ja alatunnistepaikat

Kortit ovat kohotettu pinta ilmoituksille, dialogeille ja yhteenvedoille.

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

Mallit

Kanoniset kokoonpanot yllä olevista peruskomponenteista — kopioi nämä, älä keksi niitä uudelleen.

Huutokauppakortti

1999 Charizard Holo — PSA 9
Keräilykortit

Nykyinen tarjous: 245,00 €

250,00 € + 12,50 € palkkio = 262,50 €

Nostettu
Päättyy 2 t 14 min kuluttua

Varoitusbanneri

Infobanneri

Tarjoukset ovat sitovia: voittajan kortilta veloitetaan automaattisesti huutokaupan päättyessä.