Polar

Overview

Polar is a developer-first billing platform designed for the AI era, serving founders and engineers building subscription and usage-based monetization. The design system embodies "Technical Minimalism"—a philosophy that strips away ornament to expose pure function, using extreme contrast (near-black #090909 surfaces against pure white #ffffff accents) to create an interface that feels both austere and energetic. The aesthetic draws from brutalist software design and high-tech financial dashboards, where every pixel serves a purpose and visual noise is eliminated. The brand personality is direct, precise, and unapologetically technical: the voice avoids marketing fluff and speaks in concrete terms about revenue, compliance, and developer experience. Example sentence: "Polar handles 180+ tax jurisdictions so you don't have to recalculate every quarter."

Colors

The color palette is anchored in a near-black surface stack (#090909 base, #000000 lowest, #2a2a2a highest) that provides maximum contrast for readability and focus. Primary (#ffffff) is the signature accent—used exclusively on call-to-action buttons, active states, and critical interactive elements; it commands attention through its purity and rarity on the dark canvas. Secondary (#155dfc) is a technical blue reserved for links, secondary actions, and data visualization; it evokes trust and precision without competing with primary. Tertiary (#f99c00) is an amber accent used sparingly for warnings, highlights, and status indicators. The outline tokens (#6a7282 for primary outlines, #4a5565 for subtle dividers) provide semantic hierarchy without introducing new colors. Surface-variant (#364

Typography

The type system pairs InterDisplay (a geometric, high-contrast display face) for headlines and calls-to-action with PP Neue Montreal (a humanist sans-serif) for body copy and UI labels, creating a visual hierarchy that separates information architecture from content. Display (72px, 400 weight) is reserved for hero headlines like "Meet Polar"; Headline-lg (48px) for section titles; Headline-md (32px) for subsections. Body-lg (18px, 450 weight) and Body-md (16px) handle paragraph text and descriptions, with generous 28px and 24px line-heights to maintain readability on dark backgrounds. Label-md (14px, 550 weight) is applied to button text and form labels with 0.01em letter-spacing for crispness. All display text uses -0.02em to -0.01em negative letter-spacing to tighten the geometric letter

Layout

The layout operates on a 12-column grid with a fixed max-width of 1600px, centering content on larger screens and flowing full-width on mobile. The page rhythm uses semantic spacing: lg (40px) for major section breaks, md (24px) for component padding and inter-element gaps, and sm (12px) for tight groupings within cards. The hero section spans full viewport height with 48px horizontal padding on desktop, 24px on tablet, and 16px on mobile, creating a breathing room that emphasizes the stark typography. Content containers use 24px gutters between columns and 40px gaps between rows on desktop, scaling down to 16px on mobile. White-space is treated as a design material: empty space around the primary CTA button reinforces its importance, and section separators are achieved through spacing alo

Elevation & Depth

Depth is conveyed through subtle shadow and surface-color shifts rather than dramatic drop-shadows. Level 1 (Base): the dark surface (#090909) with no shadow, establishing the ground plane. Level 2 (Cards and Inputs): surface-container (#131313) with a 1px solid border at outline-variant (#4a5565) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the base. Level 3 (Modals and Popovers): surface-container-high (#1f1f1f) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) and a 1px border at outline (#6a7282), signaling prominence. Hover states lift cards to Level 3 via

Shapes

The shape philosophy is "Technical Precision"—sharp corners for inputs and data containers (border-radius: 0.5rem / 8px) convey computational accuracy, while fully rounded buttons (border-radius: 9999px) signal action and approachability. Cards use lg (1rem / 16px) radius to soften the technical edge without introducing organic curves. Badges and pills use full (9999px) to emphasize their role as discrete, actionable elements. This mixed-radius strategy balances the austere minimalism of the dark interface with human-friendly affordances: sharp inputs feel precise, rounded buttons feel invitin

Components

Action Elements Buttons are the primary interaction mechanism and use maximum contrast for discoverability. Button-primary (white background, black text, 44px height, 16px vertical / 20px horizontal padding, border-radius: 9999px) is the dominant CTA and appears once per section; on hover, it transitions to primary-container (#e5e7eb background, #101828 text) over 200ms with no animation easing, creating a snappy, technical feel. Button-secondary (transparent background, white text, 1px outline-variant border, 40px height) is used for tertiary actions and navigation; on hover, it fills with surface-container-high (#1f1f1f) while maintaining the border. Both buttons use label-md typography (14px, 550 weight) and include a right-pointing arrow icon (→) to indicate forward navigation.

##

Do's and Don'ts

**Do**

• Do use white (#ffffff) sparingly—reserve it for primary CTAs, active states, and critical text to maintain visual hierarchy and prevent cognitive overload.
• Do apply negative letter-spacing (-0.02em to -0.01em) to all display and headline text to reinforce the technical, geometric aesthetic.
• Do use the full spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) to create rhythm; never hardcode arbitrary spacing values.
• Do transition all interactive states (hover, focus, active) over 150–200ms with cubic-bezier(0.4, 0, 0.2, 1) easing to maintain the snappy, technical feel.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns to establish subtle depth without introducing blur or glassmorphism.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no transparency blending beyond the specified rgba values.
• Don't apply border-radius greater than 1.5rem (24px) to any component except buttons and badges; sharp corners reinforce technical precision.
• Don't use system fonts (system-ui, -apple-system, sans-serif); always specify InterDisplay, Inter, or PP Neue Montreal to maintain brand consistency.
• Don't add decorative elements, icons, or illustrations to the core UI; the stark typography and high contrast are the design language.
• Don't use more than 2 font weights per component; stick to 400 (regular), 450 (medium), 550 (semibold), and 600 (bold) to avoid visual noise.