Design System
Brand Foundation
Single source of truth for visuals. Swap src/lib/brand.ts + tokens in src/styles.css to re-skin the entire site for a new brand.
01
Logo
Glyph: P · Wordmark: PUNT · Tagline: America's Social Casino
02
Colors
Background
--backgroundForeground
--foregroundCard
--cardSidebar
--sidebarPrimary (neon)
--primarySecondary
--secondaryAccent
--accentMuted
--mutedBorder
--borderDestructive
--destructiveGradients & Effects
--gradient-hero
--gradient-neon
03
Typography
Display & body: Inter — used via the--font-display token.
Display / 6xl black
America's
H1 / 4xl black
Headline Heavy
H2 / 2xl black
Section Title
Body / base
Body copy used across cards and descriptions.
Label / xs uppercase tracked
Eyebrow Label
Provider tag / 10px black
PROVIDER NAME
04
Icon Set
Sourced from lucide-react. Used across navigation, category chips, and section headers.
popular
newReleases
originals
topInState
liveDealers
recent
classics
jackpot
provider
power
races
05
Core Components
Buttons
Pill / Chip
NewHotProvider