Kalshi-inspired

Color tokens and exact Kalshi Sans family roles captured from Kalshi's live interface.

Preview

Color and type tokens in light and dark.

Kalshi-inspired

light

Colors

Background#ffffff

Foregroundrgba(0, 0, 0, 0.9)

Primaryrgba(0, 0, 0, 0.9)

Primary fg#ffffff

Secondaryrgba(0, 0, 0, 0.07)

Accentrgba(10, 194, 133, 0.08)

Destructive#d91616

Mutedrgba(0, 0, 0, 0.03)

Card#ffffff

Borderrgba(0, 0, 0, 0.1)

Brand

Brand#28cc95

Brand fgrgba(0, 0, 0, 0.9)

Outcome

Yes#0ac285

Yes fg#ffffff

No#d91616

No fg#ffffff

Charts

Typography

HeadingkalshiCondensed, "Kalshi Sans Condensed Web", "Kalshi Condensed Fallback", "Arial Narrow", Arial, sans-serif

Aa Bb Cc 123

BodykalshiSans, "Kalshi Sans Web", "Kalshi Sans Fallback", Arial, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Kalshi-inspired

dark

Colors

Background#0a0c0f

Foregroundrgba(255, 255, 255, 0.9)

Primaryrgba(255, 255, 255, 0.9)

Primary fg#0a0c0f

Secondaryrgba(255, 255, 255, 0.12)

Accentrgba(40, 204, 149, 0.12)

Destructive#ff4d6a

Mutedrgba(255, 255, 255, 0.05)

Cardrgba(255, 255, 255, 0.02)

Borderrgba(255, 255, 255, 0.08)

Brand

Brand#28cc95

Brand fgrgba(0, 0, 0, 0.9)

Outcome

Yes#28cc95

Yes fgrgba(0, 0, 0, 0.9)

No#ff4d6a

No fgrgba(0, 0, 0, 0.9)

Charts

Typography

HeadingkalshiCondensed, "Kalshi Sans Condensed Web", "Kalshi Condensed Fallback", "Arial Narrow", Arial, sans-serif

Aa Bb Cc 123

BodykalshiSans, "Kalshi Sans Web", "Kalshi Sans Fallback", Arial, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Installation

pnpm dlx shadcn@latest add https://betui.fyi/r/kalshi.json

Kalshi Sans and Kalshi Sans Condensed are custom Graphik families licensed from Commercial Type. Supply licensed @font-face files using the kalshiSans and kalshiCondensed family names; the registry does not copy Kalshi's font assets.

Tokens

Token	light	dark
--accent	rgba(10, 194, 133, 0.08)	rgba(40, 204, 149, 0.12)
--accent-foreground	#067450	#5cd8ae
--background	#ffffff	#0a0c0f
--border	rgba(0, 0, 0, 0.1)	rgba(255, 255, 255, 0.08)
--brand	#28cc95	#28cc95
--brand-foreground	rgba(0, 0, 0, 0.9)	rgba(0, 0, 0, 0.9)
--card	#ffffff	rgba(255, 255, 255, 0.02)
--card-foreground	rgba(0, 0, 0, 0.9)	rgba(255, 255, 255, 0.9)
--chart-1	#0ac285	#28cc95
--chart-2	#d91616	#ff4d6a
--chart-3	#265cff	#408fff
--chart-4	#aa00ff	#d24dff
--chart-5	#ff6a00	#ff9500
--destructive	#d91616	#ff4d6a
--destructive-foreground	#ffffff	rgba(255, 255, 255, 0.9)
--foreground	rgba(0, 0, 0, 0.9)	rgba(255, 255, 255, 0.9)
--input	rgba(0, 0, 0, 0.2)	rgba(255, 255, 255, 0.25)
--muted	rgba(0, 0, 0, 0.03)	rgba(255, 255, 255, 0.05)
--muted-foreground	rgba(0, 0, 0, 0.55)	rgba(255, 255, 255, 0.55)
--no	#d91616	#ff4d6a
--no-foreground	#ffffff	rgba(0, 0, 0, 0.9)
--popover	#ffffff	#13161a
--popover-foreground	rgba(0, 0, 0, 0.9)	rgba(255, 255, 255, 0.9)
--primary	rgba(0, 0, 0, 0.9)	rgba(255, 255, 255, 0.9)
--primary-foreground	#ffffff	#0a0c0f
--radius	0.5rem	0.5rem
--ring	#0ac285	#28cc95
--secondary	rgba(0, 0, 0, 0.07)	rgba(255, 255, 255, 0.12)
--secondary-foreground	rgba(0, 0, 0, 0.9)	rgba(255, 255, 255, 0.9)
--sidebar	#ffffff	#0a0c0f
--sidebar-accent	rgba(10, 194, 133, 0.08)	rgba(255, 255, 255, 0.05)
--sidebar-accent-foreground	#067450	rgba(255, 255, 255, 0.9)
--sidebar-border	rgba(0, 0, 0, 0.1)	rgba(255, 255, 255, 0.08)
--sidebar-foreground	rgba(0, 0, 0, 0.9)	rgba(255, 255, 255, 0.9)
--sidebar-primary	#28cc95	#28cc95
--sidebar-primary-foreground	#ffffff	rgba(0, 0, 0, 0.9)
--sidebar-ring	#0ac285	#28cc95
--surface-edge	rgb(0 0 0 / 5%)	rgb(255 255 255 / 8%)
--surface-shadow	0 2px 3px -2px rgb(0 0 0 / 0.12), 0 8px 14px -8px rgb(0 0 0 / 0.18)	0 2px 3px rgb(0 0 0 / 0.35), 0 6px 14px -4px rgb(0 0 0 / 0.45)
--yes	#0ac285	#28cc95
--yes-foreground	#ffffff	rgba(0, 0, 0, 0.9)

Tokens captured from https://kalshi.com/ on 2026-09-21. Colors only — no brand assets, fonts, or code are redistributed.