A regulated event-markets trading platform. Fits prediction markets, trading dashboards, data-driven finance products, and real-time market interfaces.
Design tokens
13 colors · 9 type stylesGreen (#28cc95) primary on a cool near-black (#0a0c0f) canvas, set in kalshiCondensed for headlines and kalshiSans for body text. The highlights below are read from the Kalshi DESIGN.md in the Pass bundle, which carries all 13 color tokens, 9 type styles and the full component rules.
Colors
- Primarygreen
#28cc95 - Canvascool near-black
#0a0c0f - Surfacecool near-black
#13161a - Inklight gray
#e7e7e7
Type
- kalshiCondensedDisplayweight 600, 24 to 30px
- kalshiSansBodyweights 400, 500, 600, 13 to 16px
Radius
- sm 4px
- base 6px
- md 8px
- lg 16px
- pill 100px
- full 9999px
Spacing
- xxs 2px
- xs 4px
- sm 8px
- md 12px
- lg 16px
- xl 24px
- section 32px
Components
- Primary button
button-primaryPrimary buttons fill with green (#28cc95) and carry pure black (#000000) text, set in kalshiSans 16px at weight 400, with pill corners (100px) and 8px 12px padding.
- Card
feature-cardCards sit on cool near-black (#13161a), with 16px corners.
- Navigation
nav-barThe top navigation runs on cool near-black (#0a0c0f) with light gray (#e7e7e7) links, set in kalshiSans 16px at weight 400.
Three ways to ship a Kalshi-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Kalshi. All trademarks belong to their respective owners.
