Polar

Overview

Polar is a merchant-of-record billing platform engineered for the intelligence era—serving developers and AI-native companies with payments, subscriptions, and usage-based billing infrastructure. The design system embodies 'Technical Minimalism': a high-contrast, dark-first aesthetic that prioritizes clarity and developer ergonomics over decorative flourish. The visual language is deliberately austere—pure black (#090909) surfaces, crisp white (#ffffff) CTAs, and surgical use of accent blue (#155dfc) for interactive states—creating an interface that feels both premium and utilitarian, like a finely-tuned command-line tool rendered in pixels.

The brand voice is precise, confident, and unapologetically technical. Polar speaks to builders: no marketing hyperbole, no soft language. Example: 'Every token becomes revenue' or 'Global tax handled for you.' The tone is direct, the vocabulary is concrete (billing, revenue, compliance, merchant), and the personality is that of a trusted infrastructure partner—the kind of platform you rely on without thinking about it, because it simply works.

Colors

The color palette is rooted in high-contrast minimalism, optimized for dark-mode-first developer interfaces. Primary (#ffffff) is pure white, reserved exclusively for call-to-action buttons and critical interactive elements—it is the most clickable color on the page. On-primary (#000000) ensures maximum legibility on white buttons. The surface stack descends from #090909 (surface, near-black) through #0a0a0a (surface-container-lowest) to #2a2a2a (surface-container-highest), creating subtle depth without sacrificing the austere aesthetic. On-surface (#ffffff) provides text contrast; on-surface-variant (#cccccc) is used for secondary text and disabled states, maintaining readability at 70% opacity. Secondary (#155dfc) is a vivid electric blue used sparingly for links, focus states, and accen

Typography

The type system pairs PP Neue Montreal (headline/display) with Inter (body/label) to balance personality with legibility. Display (72px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (48px) and headline-md (32px) establish section hierarchies. Body-lg (18px) and body-md (16px) are set at 450 weight for a slightly heavier feel than standard Inter, improving readability on dark backgrounds. Label-md (14px, 550 weight) is applied to buttons and interactive labels, with 0.01em tracking for crispness. All type uses unitless line-height (1.5x for body, 1.1x for display) to maintain vertical rhythm across responsive breakpoints. On dark surfaces, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) to small labels (label-sm, label-md) when layered over busy

Layout

The layout system uses a 12-column grid with a 1600px container max-width, supporting both fixed and fluid layouts depending on viewport. Desktop (1280px+) uses full-width sections with 48px horizontal padding (gutter × 2), creating breathing room around content. Tablet (768px–1279px) reduces padding to 24px (gutter) and reflows multi-column grids to 2 columns. Mobile (<768px) uses single-column layouts with 16px padding. Section separation follows the lg spacing token (40px) for major breaks (hero to features, features to testimonials), while md spacing (24px) is used for card-to-card gaps within grids. The container-max-width of 1600px prevents content from stretching excessively on ultra-wide displays. White-space is generous but purposeful: the hero section uses 64px (xl) top padding o

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color gradients or blur effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like hover states on cards, md (0 4px 12px rgba(0, 0, 0, 0.08)) for floating components like modals or dropdowns, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for primary cards and elevated surfaces. The lg shadow is the most frequently applied, creating a subtle lift from the dark background without introducing visual clutter. Borders (1px solid at outline or outline-variant) are used in tandem with shadow

Shapes

The shape philosophy is 'Precision with Approachability': sharp corners are avoided in favor of consistent, predictable border-radius values that signal modernity without sacrificing clarity. Buttons use rounded-full (9999px) to create pill-shaped affordances that feel inviting and clickable—this is the most distinctive shape in the system and should never be applied to non-interactive elements. Cards and containers use rounded-lg (1rem / 16px) for a balanced, professional appearance. Input fields and smaller UI components use rounded-DEFAULT (0.5rem / 8px) for subtle definition. Modals and ov

Components

Action Elements Buttons are the primary interactive primitive. Button-primary uses white background (#ffffff) with black text (#000000), rounded-full (9999px), and 16px vertical / 20px horizontal padding for a 44px total height. On hover, the background transitions to primary-container (#e5e7eb) with on-primary-container text (#101828) over 200ms using cubic-bezier(0.4, 0, 0.2, 1). Button-secondary is transparent with a 1px outline at outline-variant (#4a5565), same rounded-full shape, and 12px vertical / 20px horizontal padding (40px height). On hover, secondary buttons fill with surface-container-high (#1f1f1f). Button-ghost is used for tertiary actions (e.g., 'Learn more' links); it has no background or border, only text color on-surface (#ffffff), and on hover fills with surface-co

Do's and Don'ts

**Do**

• Do use white (#ffffff) buttons exclusively for primary CTAs—they are the most scannable element on dark backgrounds and should never be diluted by overuse.
• Do apply rounded-full (9999px) only to interactive buttons; never use it on cards, containers, or badges to preserve the button affordance hierarchy.
• Do maintain the 48px horizontal gutter on desktop and reduce to 24px on tablet to preserve breathing room without sacrificing content density.
• Do use secondary blue (#155dfc) sparingly for focus states, links, and accent highlights—it should appear in <5% of the interface to maintain impact.
• Do transition all interactive states (hover, focus, active) over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing for consistent, snappy feedback.
• Do pair PP Neue Montreal with Inter: use PP Neue Montreal for headlines and display text to establish personality, Inter for body and labels for legibility.

**Don't**

• Don't use rounded-full on non-interactive elements; it dilutes the button affordance and confuses the visual hierarchy.
• Don't apply shadows to buttons or inputs in their default state—reserve shadows for elevated surfaces (cards, modals) to maintain visual clarity.
• Don't use color alone to convey state; always pair color changes with text, icons, or borders so colorblind users can perceive the change.
• Don't exceed 1600px container width; content wider than this becomes difficult to scan and breaks the designed rhythm.
• Don't use outline or outline-variant borders on interactive elements; use box-shadow for focus states instead to avoid browser default conflicts.
• Don't reduce padding below 12px (sm spacing) on interactive elements; maintain minimum touch targets of 44px height for accessibility.