Sistema de design
O guia de estilo vivo da casa de leilões BidWars. Todos os exemplos são renderizados a partir de tokens de tema, pelo que se mantêm corretos no modo claro e escuro — utilize o alternador de tema para rever ambos.
Tokens de cor
Cada amostra é pintada com a utilidade do token (bg-primary, bg-accent…), nunca com um valor hexadecimal fixo. Os valores hexadecimais apresentados servem apenas de documentação.
--background
#FFFFFF / #09090B
Calor de pergaminho — superfície da página
--foreground
#0F1B2D / #FAFAFA
Tinta azul-escura — texto do corpo
--card
--card-foreground
#FFFFFF / #18181B
Superfícies elevadas (cartões, popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Confiança e estrutura — ações principais (azul-escuro no claro / dourado no escuro)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Ações e superfícies de baixa ênfase
--muted
--muted-foreground
#F4F4F5 / #27272A
Superfícies suaves + texto auxiliar
--accent
--accent-foreground
#C9A227 / #C9A227
Ação e destaque — dourado, CTAs de boost/partilha
--destructive
--destructive-foreground
#B3402A / #E06A4F
Ações destrutivas
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Estados de envio sem rastreio / disputas
--border
#E4E4E7 / #3F3F46
Limites e divisores
--input
#E4E4E7 / #71717A
Contornos de campos de formulário
--ring
#C9A227 / #C9A227
Anéis de foco
Tipografia
Os títulos usam a face serifada (Fraunces, via font-display); o texto do corpo usa Inter.
Títulos — serifada (--font-display)
Título 1 — O martelo bate uma só vez
Título 2 — A terminar em breve
Título 3 — Detalhes do leilão
Corpo — Inter
Corpo — Licite em cartas colecionáveis, banda desenhada e outros artigos em leilões C2C vinculativos com taxas transparentes.
Pequeno — A proteção do comprador aplica-se a todas as encomendas liquidadas.
Suave — As taxas são sempre apresentadas antes de confirmar uma licitação.
Componentes
Primitivos partilhados de @auction/ui, renderizados com as suas variantes e um pequeno excerto de utilização.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Os cartões são a superfície elevada para anúncios, diálogos e resumos.
<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>Padrões
Composições canónicas construídas a partir dos primitivos acima — copie-as, não as reinvente.
Cartão de leilão
Licitação atual: €245,00
€250,00 + €12,50 de taxa = €262,50