Punt logo

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

Logo
Logo
Logo

Glyph: P · Wordmark: PUNT · Tagline: America's Social Casino

02

Colors

Background
--background
Foreground
--foreground
Card
--card
Sidebar
--sidebar
Primary (neon)
--primary
Secondary
--secondary
Accent
--accent
Muted
--muted
Border
--border
Destructive
--destructive

Gradients & 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