Design system
The living styleguide of the BidWars auction house. Every sample is rendered from theme tokens, so it stays correct in light and dark mode — use the theme toggle to review both.
Color tokens
Each swatch is painted with the token utility (bg-primary, bg-accent…), never a hardcoded hex. The hex values shown are documentation only.
--background
#FFFFFF / #09090B
Parchment warmth — page surface
--foreground
#0F1B2D / #FAFAFA
Navy ink — body text
--card
--card-foreground
#FFFFFF / #18181B
Elevated surfaces (cards, popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Trust & structure — main actions (navy light / gold dark)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Low-emphasis actions and surfaces
--muted
--muted-foreground
#F4F4F5 / #27272A
Subdued surfaces + helper text
--accent
--accent-foreground
#C9A227 / #C9A227
Action & spotlight — gold, boost/share CTAs
--destructive
--destructive-foreground
#B3402A / #E06A4F
Destructive actions
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Untracked-shipping / dispute states
--border
#E4E4E7 / #3F3F46
Borders and dividers
--input
#E4E4E7 / #71717A
Form-field outlines
--ring
#C9A227 / #C9A227
Focus rings
Typography
Display headings use the serif face (Fraunces, via font-display); body text uses Inter.
Display — serif (--font-display)
Heading 1 — The gavel falls once
Heading 2 — Ending soon
Heading 3 — Auction details
Body — Inter
Body — Bid on trading cards, comics, and other collectibles in binding C2C auctions with transparent fees.
Small — Buyer protection applies to every settled order.
Muted — Fees are always shown before you confirm a bid.
Components
Shared primitives from @auction/ui, rendered with their variants and a short usage snippet.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Cards are the elevated surface for listings, dialogs and summaries.
<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>Patterns
Canonical compositions built from the primitives above — copy these, don't reinvent them.
Auction card
Current bid: €245.00
€250.00 + €12.50 fee = €262.50