Kalshi

Overview

Kalshi is a regulated prediction market exchange that democratizes event-based trading through a data-centric, tech-forward interface. The design system embraces "Vibrant Minimalism"—a philosophy that pairs a clean, white-canvas foundation with strategic bursts of saturated accent colors (emerald green, electric blue, vivid purple) to guide user attention toward actionable trading decisions. The brand serves sophisticated traders and curious newcomers alike, creating an environment where complex financial instruments feel approachable without sacrificing precision. The emotional response is one of clarity and confidence: users should feel empowered to make informed bets on real-world outcomes, not overwhelmed by jargon or visual noise.

The voice is direct, data-driven, and conversational—never patronizing, never breathless. Kalshi speaks in the language of traders and analysts: "35% odds," "$14.2M volume," "Fed decision in September." Sentences are short, active, and outcome-focused. Example: "Trade on anything—from elections to earnings—with real money and real stakes." The brand personality balances authority (we are regulated, we are serious) with accessibility (we make prediction markets fun and transparent).

Colors

The color system is built on a foundation of pure white (surface: #ffffff) and near-black text (on-surface: #090909), creating maximum contrast and readability for data-heavy interfaces. The primary accent is Kalshi's signature emerald green (#28cc95), used exclusively on call-to-action buttons, active states, and key interactive elements—it signals "go, trade, act now." Secondary accents include electric blue (#265cff) for secondary actions and information states, and vivid purple (#aa00ff) for tertiary highlights and status badges. The error state uses a warm orange (#ff6a00) to denote warnings and market-moving alerts without the harshness of pure red.

Surface containers follow a tight grayscale ladder (surface-container-low: #f0f0f0, surface-container: #eeeeee, surface-container-high:

Typography

The type system uses kalshiSans, a custom sans-serif font family optimized for screen legibility and financial data readability. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements; headline-lg (40px, 600 weight) titles key sections like "Trending" or "Politics"; headline-md (28px, 600 weight) breaks up content into digestible chunks. Body text runs at 16px (body-md, 400 weight, 24px line-height) for standard paragraph copy, with 18px (body-lg) reserved for emphasized content or callouts. Labels (14px, 600 weight, 0.01em letter-spacing) appear on buttons, badges, and form fields to ensure crisp, scannable UI text. The tight letter-spacing on display and headline levels (-0.04em to -0.01em) creates visual density and sophistication, while body te

Layout

The page uses a fluid 12-column grid with a maximum container width of 1280px, allowing content to breathe on desktop while remaining scannable on tablet. The gutter spacing is consistently 24px (md spacing unit), creating a rhythm that feels neither cramped nor wasteful. Section separation uses lg spacing (40px) between major content blocks (hero, trending markets, politics section), while card-to-card spacing within a section uses md spacing (24px). The search bar and primary navigation occupy a fixed header with 24px horizontal padding and 16px vertical padding, keeping the interface anchored as users scroll through market listings. Cards themselves use md padding (24px) internally, with xs spacing (4px) between label and value pairs within data-dense market cards. The white-space philo

Elevation & Depth

Depth in Kalshi's design is achieved through a restrained shadow system that avoids the heavy, dark shadows of traditional material design. The base layer (Level 1) is the white surface itself (rgba(255, 255, 255, 1)) with no shadow. Level 2 (standard cards and containers) uses a soft, spread shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a subtle lift without visual heaviness. Level 3 (modals, elevated cards, and hover states) applies a slightly stronger shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), which adds depth while maintaining the minimalist aesthetic. Interactive ele

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the precision of financial data without introducing organic, playful curves. Buttons and primary interactive elements use the full rounded (100px border-radius), creating pill-shaped affordances that feel modern and clickable. Cards and containers use xl rounding (1.5rem / 24px), which is generous enough to feel friendly but not so extreme as to appear childish. Input fields and secondary interactive elements use full rounding (100px) to match buttons and create visual consistency across the interaction l

Components

Action Elements Buttons are the primary driver of user engagement in a trading interface. The button-primary component uses the signature emerald green (#28cc95) background with white text, 40px height, 8px vertical padding, 12px horizontal padding, and full rounding (100px). On hover, the background shifts to #1fb87d (a darker shade of the primary green) with a 200ms ease-out transition, signaling state change without jarring the user. The button-secondary component is transparent with a 1px outline in outline-variant (#cccccc) and on-surface text; on hover, it gains a light gray background (surface-container-low: #f0f0f0) and maintains the outline. Button-ghost is used for tertiary actions (e.g., "Learn more") and has no background or border by default; on hover, it gains surface-con

Do's and Don'ts

**Do**

• Do use the primary green (#28cc95) exclusively on call-to-action buttons and active states—it is the brand's signature accent and must never be diluted or overused on secondary elements.
• Do maintain the white surface as the dominant background; resist the urge to introduce colored backgrounds or gradients that would compete with market data and reduce legibility.
• Do apply consistent 24px gutter spacing between sections and 40px spacing between major content blocks to create a predictable, scannable rhythm.
• Do use full rounding (100px) on buttons and inputs to create a cohesive, modern interaction language that feels approachable and clickable.
• Do pair body text at 16px with 24px line-height for comfortable reading of market descriptions and news snippets; never compress line-height below 1.5x font size.

**Don't**

• Don't use secondary blue (#265cff) or tertiary purple (#aa00ff) on primary CTAs—these are supporting accents only and will dilute the primary green's visual authority.
• Don't introduce drop shadows above 0 3px 8px rgba(0, 0, 0, 0.15); heavier shadows create visual clutter and obscure the data-centric aesthetic.
• Don't apply rounded corners below 0.75rem (12px) on interactive elements like buttons or cards—the shape language must remain clear and intentional.
• Don't use the outline-variant color (#cccccc) for text or primary UI elements; it is reserved for subtle borders and dividers only.
• Don't exceed 1280px container width even on ultra-wide displays; the fixed width maintains focus and prevents market data from becoming overwhelming.