What is Polar's primary brand color?

Polar's CSS declares a Catppuccin Latte blue at #1e66f5 as the primary brand color — wired into seven CSS custom properties including `--color-primary`, `--color-accent`, `--color-blue`, and `--sidebar-primary`. On the captured marketing surface it renders just seven times, all as text, and never as a CTA fill or background block. The primary CTA pill is rendered in pure black (#000000) with white text instead. The brand color is in the system but withheld from the marketing chrome — the visible voltage is ink, not blue. This is the inverse of the dev-payments convention, where Stripe runs indigo and LemonSqueezy runs yellow as the load-bearing chromatic moment.

What typeface does Polar use, and what should I use as a substitute?

Polar runs Inter for body and CTA labels and InterDisplay for the display tier, with GeistMono reserved for 12px footnotes and code annotations (40 captured samples). The hero h1 sits at 128px in Inter weight 400 with aggressive -3.2px letter-spacing — a compression that nearly fuses adjacent letters and produces the editorial-magazine moment on the page. Section h2s sit at 48px in InterDisplay weight 400, body at 20px in Inter weight 400. The mono captions sit at 12px in GeistMono weight 400. All three families are open-source and available from rsms.me/inter and vercel.com/font — no substitution is required, which is itself a brand decision distinct from Stripe's proprietary Sohne-var.

Why does Polar's primary CTA render in pure black instead of the Catppuccin blue?

The Get Started pill above the fold is filled with pure #000000 and white text. The decision is structural rather than chromatic: Polar positions itself as a billing platform for the intelligence era, and ink-as-voltage signals the same restraint Anthropic's Claude site shows on its primary action. Rendering the CTA in blue would put Polar visually adjacent to Stripe's indigo gradient and indistinguishable from a dozen other dev-payments brands. Rendering it in black sets the page apart, and lets the Catppuccin palette sit in the CSS for product surfaces (the dashboard, the checkout, the merchant portal) without leaking into the marketing identity. The cost is missing a chromatic moment; the win is differentiation.

What's with the hand-drawn line illustrations in the pillar cards?

The three above-the-fold pillar cards — Ingest, Aggregate, Charge — each carry a single-stroke black glyph rendered as if drawn by hand: a sparse 12-line starburst for Ingest, a denser 24-line starburst for Aggregate, and a phyllotaxis of three nested circles plus a small floating circle for Charge. Below the fold, the Subscriptions / Trials / Discounts grid uses similar one-line geometric glyphs — an inward spiral, a serpentine path of arrows, a stack of horizontal rules. The glyphs are decorative rather than functional iconography; they replace what would normally be a product screenshot or a filled icon. The effect is editorial and almost textbook-like — closer to a print-magazine illustration than to a SaaS feature tile.

Can I use this DESIGN.md to build my own React developer-payments marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Polar's specific moves: pure white canvas, ink-navy body text instead of pure black, pure black pill for the primary CTA, 128px Inter h1 with -3.2px tracking, GeistMono for 12px footnotes, hand-drawn line glyphs over filled icons, and the binary radius scale of 0px sharp corners and 9999px pills. You can also reference the tokens directly — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one caveat: the ink-as-voltage move only works if you have a story confident enough to ship without a chromatic accent; Polar earns it by leading with the 128px headline.

Polar Design System

Polar's marketing-site design system as a DESIGN.md file.

About Polar DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source polar.sh

Banking & Payments
Developer Tools & IDEs

Polar's marketing page does something almost no other payments brand attempts: it refuses to render its declared brand color. The CSS exposes a full Catppuccin Latte palette (a Stripe-blue primary at #1e66f5 wired as `--color-primary`, plus purple, green, teal, orange) — yet above the fold the page renders exactly two ink tones. The hero h1 "Turn Usage Into Revenue" sits at 128px in deep navy-ink (#4c4f69) on a pure white canvas, with the primary CTA rendered as a pure black pill rather than the Catppuccin blue. Where Stripe leans on indigo gradients and LemonSqueezy on yellow, and where every other developer-payments brand reaches for a chromatic CTA fill, Polar reaches for ink. The brand voltage is not held in reserve for accents; it is held in reserve for nothing — the page ships without it.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from the Catppuccin Latte palette declared in CSS but rendering as a two-tone ink-on-canvas system above the fold; 11 typography tokens running Inter and InterDisplay across every spoken tier plus GeistMono for the 12px footnote and code voice; a binary radius scale of 0px sharp corners and 9999px pills with no middle step; an 8px-base spacing scale; and 17 component definitions covering the pure-black pill CTA, the pale-gray pillar card with its single-stroke line glyph, the "Why Polar" secondary pill, the 64px lockup wordmark, and the muted-gray outro paragraph that closes the page.

Feed this file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces Polar's specific moves: pure white canvas instead of an off-white cream, ink-navy text rather than pure black for body, pure black for the single CTA pill, 128px Inter display headlines with -3.2px tracking, GeistMono for every annotation, hand-drawn one-stroke glyphs over filled icons, and the Catppuccin Latte palette wired but withheld. Token references resolve cleanly — `{colors.ink-navy}` for body, `{colors.canvas}` for surfaces, `{typography.display-hero}` for the 128px h1. Borrow the ink-as-voltage move only if your product can carry the weight without a chromatic crutch; most payments brands cannot.

What makes it distinct

Ink-as-voltagethe primary CTA is a pure black #000000 pill, not the Catppuccin Latte blue #1e66f5 declared as --color-primary; the brand color stays unrendered above the fold
128px display headlineInter at weight 400 with -3.2px tracking compresses the hero h1 until adjacent letters almost touch, the loudest typographic moment in the system
Hand-drawn line illustrationseach of the three pillar cards carries a single-stroke black glyph (starburst, denser starburst, circles within circles) rather than a filled icon or product screenshot
Catppuccin Latte palette wired but withheldpurple #8839ef, green #40a02b, blue #1e66f5, teal #179299, orange #fe640b live in CSS custom properties yet only the deep navy text tone renders on the captured marketing surface
Pill-or-square binary radiusthe CTA and pillar cards use the maximum representable radius (9999px) as a pill while every other surface stays at 0px sharp corners; no middle tier exists

Live at polar.sh

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

polar.sh

Explore Polar

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Polar design system FAQ

Common questions about Polar's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Polar — official site

Polar's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.