Sistema de diseño
La guía de estilo viva de la casa de subastas BidWars. Cada muestra se renderiza desde los tokens del tema, así que se mantiene correcta en modo claro y oscuro — usa el selector de tema para revisar ambos.
Tokens de color
Cada muestra se pinta con la utilidad del token (bg-primary, bg-accent…), nunca con un hexadecimal fijo. Los valores hex mostrados son solo documentación.
--background
#FFFFFF / #09090B
Calidez de pergamino — superficie de página
--foreground
#0F1B2D / #FAFAFA
Tinta azul marino — texto del cuerpo
--card
--card-foreground
#FFFFFF / #18181B
Superficies elevadas (tarjetas, popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Confianza y estructura — acciones principales (azul marino claro / dorado oscuro)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Acciones y superficies de bajo énfasis
--muted
--muted-foreground
#F4F4F5 / #27272A
Superficies atenuadas + texto auxiliar
--accent
--accent-foreground
#C9A227 / #C9A227
Acción y foco — dorado, CTAs de promoción/compartir
--destructive
--destructive-foreground
#B3402A / #E06A4F
Acciones destructivas
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Estados de envío sin seguimiento / disputa
--border
#E4E4E7 / #3F3F46
Bordes y divisores
--input
#E4E4E7 / #71717A
Contornos de campos de formulario
--ring
#C9A227 / #C9A227
Anillos de foco
Tipografía
Los titulares usan la fuente serif (Fraunces, vía font-display); el texto del cuerpo usa Inter.
Titular — serif (--font-display)
Encabezado 1 — El mazo cae una sola vez
Encabezado 2 — A punto de terminar
Encabezado 3 — Detalles de la subasta
Cuerpo — Inter
Cuerpo — Puja por cromos, cómics y otros coleccionables en subastas C2C vinculantes con comisiones transparentes.
Pequeño — La protección al comprador se aplica a cada pedido liquidado.
Atenuado — Las comisiones se muestran siempre antes de confirmar una puja.
Componentes
Primitivos compartidos de @auction/ui, renderizados con sus variantes y un breve ejemplo de uso.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Las tarjetas son la superficie elevada para anuncios, diálogos y resúmenes.
<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>Patrones
Composiciones canónicas construidas a partir de los primitivos anteriores — cópialas, no las reinventes.
Tarjeta de subasta
Puja actual: €245,00
€250,00 + comisión de €12,50 = €262,50