Système de design

Le guide de style vivant de la maison de ventes BidWars. Chaque échantillon est rendu à partir des tokens du thème, il reste donc correct en mode clair comme sombre — utilisez le sélecteur de thème pour passer en revue les deux.

Tokens de couleur

Chaque échantillon est peint avec l'utilitaire du token (bg-primary, bg-accent…), jamais avec un hexadécimal en dur. Les valeurs hex affichées sont uniquement documentaires.

--background

#FFFFFF / #09090B

Chaleur parchemin — surface de page

--foreground

#0F1B2D / #FAFAFA

Encre marine — texte courant

--card

--card-foreground

#FFFFFF / #18181B

Surfaces surélevées (cartes, popovers)

--primary

--primary-foreground

#0F1B2D / #C9A227

Confiance et structure — actions principales (marine clair / or sombre)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Actions et surfaces secondaires

--muted

--muted-foreground

#F4F4F5 / #27272A

Surfaces atténuées + texte d'aide

--accent

--accent-foreground

#C9A227 / #C9A227

Action et projecteur — or, CTA de mise en avant/partage

--destructive

--destructive-foreground

#B3402A / #E06A4F

Actions destructives

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

États d'expédition sans suivi / litige

--border

#E4E4E7 / #3F3F46

Bordures et séparateurs

--input

#E4E4E7 / #71717A

Contours des champs de formulaire

--ring

#C9A227 / #C9A227

Anneaux de focus

Typographie

Les titres utilisent la police serif (Fraunces, via font-display) ; le texte courant utilise Inter.

Titre — serif (--font-display)

Titre 1 — Le marteau ne tombe qu'une fois

Titre 2 — Se terminent bientôt

Titre 3 — Détails de l'enchère

Texte — Inter

Texte — Enchérissez sur des cartes, BD et autres objets de collection dans des enchères C2C fermes avec frais transparents.

Petit — La protection acheteur s'applique à chaque commande réglée.

Atténué — Les frais sont toujours affichés avant que vous ne confirmiez une offre.

Composants

Primitives partagées de @auction/ui, rendues avec leurs variantes et un court extrait d'utilisation.

Button

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

Badge

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

Card

Composition de carte
Emplacements d'en-tête, de contenu et de pied

Les cartes sont la surface surélevée pour les annonces, boîtes de dialogue et résumés.

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

Motifs

Compositions canoniques construites à partir des primitives ci-dessus — copiez-les, ne les réinventez pas.

Carte d'enchère

1999 Charizard Holo — PSA 9
Cartes à collectionner

Offre actuelle : €245,00

€250,00 + €12,50 de commission = €262,50

Mis en avant
Se termine dans 2 h 14 min

Bannière d'avertissement

Bannière d'information

Les offres sont fermes : la carte du gagnant est débitée automatiquement à la fin de l'enchère.