System projektowy

Żywy przewodnik po stylu domu aukcyjnego BidWars. Każda próbka renderowana jest z tokenów motywu, więc pozostaje poprawna w trybie jasnym i ciemnym — użyj przełącznika motywu, aby sprawdzić oba.

Tokeny kolorów

Każda próbka jest malowana narzędziem tokena (bg-primary, bg-accent…), nigdy zaszytym kodem hex. Pokazane wartości hex mają charakter wyłącznie dokumentacyjny.

--background

#FFFFFF / #09090B

Ciepło pergaminu — powierzchnia strony

--foreground

#0F1B2D / #FAFAFA

Granatowy tusz — tekst główny

--card

--card-foreground

#FFFFFF / #18181B

Wyniesione powierzchnie (karty, okna popover)

--primary

--primary-foreground

#0F1B2D / #C9A227

Zaufanie i struktura — główne akcje (granat w jasnym / złoto w ciemnym)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Akcje i powierzchnie o niskim priorytecie

--muted

--muted-foreground

#F4F4F5 / #27272A

Stłumione powierzchnie + teksty pomocnicze

--accent

--accent-foreground

#C9A227 / #C9A227

Akcja i reflektor — złoto, CTA boost/udostępnij

--destructive

--destructive-foreground

#B3402A / #E06A4F

Akcje destrukcyjne

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Stany wysyłki bez śledzenia / sporów

--border

#E4E4E7 / #3F3F46

Obramowania i separatory

--input

#E4E4E7 / #71717A

Obrysy pól formularzy

--ring

#C9A227 / #C9A227

Pierścienie fokusu

Typografia

Nagłówki display używają kroju szeryfowego (Fraunces, via font-display); tekst główny używa Inter.

Display — szeryfowy (--font-display)

Nagłówek 1 — Młotek uderza raz

Nagłówek 2 — Kończą się wkrótce

Nagłówek 3 — Szczegóły aukcji

Tekst — Inter

Tekst — Licytuj karty kolekcjonerskie, komiksy i inne przedmioty w wiążących aukcjach C2C z przejrzystymi opłatami.

Mały — Ochrona kupującego obejmuje każde rozliczone zamówienie.

Stłumiony — Opłaty są zawsze pokazywane przed potwierdzeniem oferty.

Komponenty

Współdzielone prymitywy z @auction/ui, renderowane z wariantami i krótkim przykładem użycia.

Button

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

Badge

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

Card

Kompozycja karty
Sloty nagłówka, treści i stopki

Karty to wyniesiona powierzchnia dla ogłoszeń, okien dialogowych i podsumowań.

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

Wzorce

Kanoniczne kompozycje zbudowane z powyższych prymitywów — kopiuj je, nie wymyślaj na nowo.

Karta aukcji

1999 Charizard Holo — PSA 9
Karty kolekcjonerskie

Aktualna oferta: €245,00

€250,00 + opłata €12,50 = €262,50

Promowana
Kończy się za 2 godz. 14 min

Baner ostrzeżenia

Baner informacyjny

Oferty są wiążące: po zakończeniu aukcji karta zwycięzcy jest obciążana automatycznie.