Polymarket

Overview

Polymarket is a prediction market platform that transforms financial speculation into accessible, data-driven decision-making. The design aesthetic is "Precision Minimalism"—a clean, information-dense interface that prioritizes clarity and trust through a neutral white canvas punctuated by a vibrant cobalt-blue primary accent (#1652f0). The brand serves traders, analysts, and informed citizens seeking to profit from or hedge against future events across politics, sports, crypto, and culture. The emotional response is one of calm confidence: the UI feels professional yet approachable, never overwhelming despite the complexity of market data. Voice: direct, factual, occasionally wry. Vocabulary favors concrete numbers and outcomes over speculation. Example sentence: "The Fed holds rates steady—lock in your position before the announcement."

Colors

The color system is built on a high-contrast, light-mode foundation designed for financial clarity. Primary (#1652f0) is the signature cobalt blue used exclusively for call-to-action buttons, active states, and key interactive elements—it commands attention without aggression. Secondary (#2e5cff) provides a lighter blue accent for supporting UI elements and hover states. Tertiary (#fdc503) is a warm amber used sparingly for highlights, badges, and status indicators to signal importance or urgency. The surface stack ranges from pure white (#ffffff) for the main canvas down through grays (#f9fafb, #f3f4f6, #e5e7eb) for subtle depth and container separation. On-surface text is a near-black (#0e0f11) for maximum readability at 16px body size. Error states use a clear red (#ef4444) for loss/dec

Typography

The type system uses Inter exclusively across all weights (400, 500, 600, 700) to maintain visual cohesion and ensure crisp rendering at small sizes. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is reserved for page titles and market category headers. Headline-md (28px, 600 weight) breaks up major sections. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight) is used for introductory copy and descriptions. Body-md (16px, 400 weight) is the default paragraph text, set at 24px line-height for comfortable reading. Label-md (14px, 600 weight) is applied to buttons, form labels, and UI chrome. Label-sm (12px, 500 weight) is reserved for secondary labels, timestamps, and metadata. On sma

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm alternates between full-width hero sections (with internal padding of 40px lg spacing), narrow content containers (804–938px), and market grids that expand to fill available space. White-space is generous but purposeful: lg spacing (40px) separates major sections (hero, featured markets, breaking news, hot topics), while md spacing (24px) divides cards and subsections. The gutter between grid columns is 24px. Mobile breakpoints follow a mobile-first approach: base (0–599px), sm (600–767px), md (768–1023px), lg (1024px+). Container queries are used for responsive card layouts to ensure market cards remain readable at any viewport. Horizontal scrolling is employed for category tabs and mark

Elevation & Depth

Depth is conveyed through a subtle shadow and border system rather than dramatic layering. Level 1 (Base): white surface (#ffffff) with no shadow, used for the main canvas and card backgrounds. Level 2 (Standard Card): 1px solid border in outline-variant (#d1d5dc) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to market cards, input fields, and modals. Level 3 (Elevated/Hover): same border + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card hover and modal focus states. Modals and overlays add a semi-transparent backdrop (rgba(14, 15, 17, 0.5)) with backdrop-filter: blur(4px) t

Shapes

The shape philosophy is "Soft Technical"—rounded corners are applied consistently but conservatively to maintain a professional, financial-grade appearance. Buttons use 10px border-radius (lg) to feel approachable while remaining formal. Input fields and smaller interactive elements use 6px (DEFAULT) for a tighter, more precise feel. Cards and modals use 10px (lg) to match buttons and create visual cohesion. Full-width containers and badges use 9999px (full) for pill-shaped elements. The rationale: larger radii (10px+) on primary CTAs and cards signal confidence and approachability; smaller ra

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (bg: #1652f0, text: white, 40px height, 12px 24px padding, 10px radius, label-md weight) are used for all CTAs: 'Sign up', 'Trade', 'Go to polymarket.us'. On hover, apply opacity: 0.9 with a 200ms transition (cubic-bezier(0.2, 0, 0, 1)) to signal interactivity without color shift. Secondary buttons (transparent bg, #1652f0 text, 1px outline-variant border, 40px height, 6px radius) are used for 'Log in', 'How it works', and navigation links. Ghost buttons (rgba(22, 82, 240, 0.1) bg, 32px height, 12px 8px padding) are used for tertiary actions and filters. All buttons must have a minimum touch target of 44px height on mobile.

Containers & Surfaces Cards are the primary container for market data. Standard ca

Do's and Don'ts

**Do**

• Do use primary blue (#1652f0) exclusively for CTAs and active states—it's the brand's signature accent and must remain distinctive.
• Do maintain 24px gutter spacing between grid columns and 40px lg spacing between major sections to preserve breathing room and scanability.
• Do apply the 200ms cubic-bezier(0.2, 0, 0, 1) transition to all interactive elements (buttons, cards, inputs) for a consistent, snappy feel.
• Do use the full Material 3 color token stack (surface-container-low, surface-container-high, etc.) to create subtle depth without adding visual clutter.
• Do pair Inter 600-weight headlines with 400-weight body text to create clear hierarchy without relying on color alone.

**Don't**

• Don't use secondary blue (#2e5cff) or tertiary amber (#fdc503) as primary CTAs—they are supporting accents only and will dilute brand recognition.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—Polymarket is a financial platform, not a playful app, and excessive depth reads as unprofessional.
• Don't use border-radius smaller than 6px on interactive elements or larger than 10px on buttons and cards—consistency is critical for a data-driven brand.
• Don't mix typefaces or use system fonts (system-ui, -apple-system) in place of Inter—the brand relies on Inter's precision and consistency across all platforms.
• Don't exceed 1280px container max-width or use asymmetric padding on major sections—the grid must feel stable and trustworthy for financial decision-making.