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
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
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
<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
Offre actuelle : €245,00
€250,00 + €12,50 de commission = €262,50