---
version: alpha
name: "Polar"
website: "https://polar.sh"
description: >-
  A billing platform for the intelligence era whose marketing page sits on a pure white canvas, anchors a 128px Inter h1 in deep navy-ink ("Turn Usage Into Revenue") with -3.2px tracking that nearly fuses the letters, and uses a pure black pill CTA in place of a colored brand voltage. Below the fold, a three-up grid of pale gray cards carries hand-drawn one-line glyph illustrations (a starburst, a denser starburst, a phyllotaxis of nested circles) above tiny Inter labels — the Catppuccin Latte palette declared in CSS (a Stripe-blue primary at #1e66f5, plus purple, green, teal, orange) is held entirely in reserve. The system runs Inter and InterDisplay across every text tier, GeistMono for small footnotes and code, and treats geometric line-art as its only decorative voice.

seo:
  title: "Polar Design System for React — pure-black pill on white, Inter 128px hero, 17 components"
  metaDescription: "Polar's marketing-site design system as a DESIGN.md file. Pure white canvas, ink-navy display headlines, pure black pill CTA, Catppuccin Latte accent palette held in reserve, hand-drawn line glyphs, Inter and GeistMono, 18 colors, 17 components for React and AI tools."
  highlights:
    - "Ink-as-voltage — the 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 headline — Inter 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 illustrations — each 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 withheld — purple #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 radius — the 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"
  tags:
    - "Banking & Payments"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://polar.sh"
      title: "Polar — official site"
      description: "Polar's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Polar's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does Polar use, and what should I use as a substitute?"
      answer: "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."
    - id: "ink-as-voltage"
      title: "Why does Polar's primary CTA render in pure black instead of the Catppuccin blue?"
      answer: "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."
    - id: "line-glyphs"
      title: "What's with the hand-drawn line illustrations in the pillar cards?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React developer-payments marketing site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "checkout-flow"

colors:
  primary: "#1e66f5"
  secondary: "#8839ef"
  tertiary: "#40a02b"
  accent-teal: "#179299"
  accent-orange: "#fe640b"
  ink: "#000000"
  ink-navy: "#4c4f69"
  ink-muted: "#7c7f93"
  ink-subtle: "#9a9ba2"
  canvas: "#ffffff"
  surface-1: "#e6e6e6"
  surface-2: "#c7c8cc"
  surface-3: "#d7d8da"
  hairline: "#e6e6e6"
  graphite-700: "#171719"
  graphite-800: "#101011"
  graphite-900: "#030712"
  graphite-soft: "#27282a"

typography:
  display-hero:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 128px
    fontWeight: 400
    lineHeight: 128px
    letterSpacing: "-3.2px"
  display-h1:
    fontFamily: "\"InterDisplay\", sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 99px
    letterSpacing: 0
  display-h2:
    fontFamily: "\"InterDisplay\", sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: 0
  display-md:
    fontFamily: "\"InterDisplay\", sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 27.5px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "\"InterDisplay\", sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  mono-sm:
    fontFamily: "\"GeistMono\", monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0
  mono-eyebrow:
    fontFamily: "\"GeistMono\", monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "0.3px"

rounded:
  none: "0px"
  sm: "5.6px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  section: "96px"

components:
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-navy}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: "96px 32px"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.ink-navy}"
    typography: "{typography.display-hero}"
    padding: "0"
  hero-subhead:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    padding: "0"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink-navy}"
    typography: "{typography.display-h2}"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink-navy}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  outro-paragraph:
    backgroundColor: transparent
    textColor: "{colors.surface-2}"
    typography: "{typography.display-md}"
  mono-caption:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-sm}"
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
    height: "40px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.graphite-700}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-navy}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
    height: "40px"
    borderColor: "{colors.surface-1}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-navy}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "16px 32px"
    height: "64px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink-navy}"
    typography: "{typography.body-sm}"
    padding: "8px 12px"
  pillar-card:
    backgroundColor: "#f7f7f7"
    textColor: "{colors.ink-navy}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "32px"
  pillar-card-title:
    backgroundColor: transparent
    textColor: "{colors.ink-navy}"
    typography: "{typography.body-lg}"
  pillar-glyph:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-navy}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "40px"
    borderColor: "{colors.surface-1}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "48px 32px"
---

## Overview

Polar's marketing page inverts the dev-payments convention. **Ink as voltage.** Where Stripe leans on indigo gradients, LemonSqueezy on saturated yellow, and Paddle on a teal-blue brand block, Polar fills the canvas with pure white (`{colors.canvas}` — #ffffff), sets the hero h1 in deep navy-ink (`{colors.ink-navy}` — #4c4f69), and renders the primary CTA as a pure black pill (`{colors.ink}` — #000000) with white text. The CSS exposes a full Catppuccin Latte palette — a Stripe-blue primary at `{colors.primary}` (#1e66f5) wired as `--color-primary`, plus purple, green, teal, and orange — and yet above the fold the page renders zero of those chromatic moves. The brand color is not scarce; it is absent.

The typographic hero is a 128px Inter h1 with -3.2px letter-spacing ("Turn Usage Into Revenue") that compresses the line until adjacent letters almost touch. Body sits at 20px in Inter weight 400; section h2s sit at 48px in InterDisplay weight 400. The display tier holds at weight 400 throughout — there is no 600+ moment on the page. The supporting voice is GeistMono at 12px (40 captured samples), used for the small "01 — Ingest" / "02 — Aggregate" / "03 — Charge" labels above each pillar card and for inline code annotations elsewhere. The pairing — Inter display + GeistMono metadata — is the same magazine-meets-terminal split Cloudflare runs with FT Kunst Grotesk and Apercu Mono Pro, only here the display family is the open-source Inter instead of a licensed grotesk.

The decorative voice is **hand-drawn line glyph**: each of the three pillar cards carries a single-stroke black illustration in place of a filled icon — a sparse 12-line starburst for Ingest, a denser 24-line starburst for Aggregate, a phyllotaxis of nested circles plus a floating satellite circle for Charge. Below the fold the Subscriptions / Trials / Discounts grid carries a one-line inward spiral, a serpentine path of arrows, and a stack of horizontal rules. The glyphs feel closer to a print-magazine illustration than to a SaaS feature tile, and they replace what most payments brands would render as a product screenshot.

**Key Characteristics:**
- Pure white canvas (`{colors.canvas}` — #ffffff), never warm cream — the page floor stays neutral and lets the line glyphs read as ink-on-paper.
- Ink-as-voltage primary CTA (`{colors.ink}` — #000000) pill, with the Catppuccin Latte blue (`{colors.primary}` — #1e66f5) declared in CSS but unrendered above the fold.
- Deep navy-ink (`{colors.ink-navy}` — #4c4f69) as the dominant text tone (29 captured occurrences) — not pure black, which would feel harsh against the white canvas.
- 128px Inter h1 with -3.2px tracking — the loudest typographic moment in the system, executed at weight 400 rather than the 700+ that fintech and enterprise systems lean on.
- GeistMono 12px (40 captured samples) carries every small-caps label, footnote, and code annotation; no uppercase-tracked sans label tier exists.
- Binary radius scale — sharp 0px corners on every surface except the two pill elements (`{colors.ink}` CTA and the rare "Why Polar" secondary pill at `{rounded.full}` 9999px).
- Hand-drawn one-stroke line glyphs replace filled icons inside the pillar and feature cards; no SVG fill, only stroke.
- Catppuccin Latte palette wired but withheld — purple `{colors.secondary}` (#8839ef), green `{colors.tertiary}` (#40a02b), teal `{colors.accent-teal}` (#179299), orange `{colors.accent-orange}` (#fe640b) live in CSS custom properties and render either zero or near-zero times on the captured marketing surface.

## Colors

### Brand (declared but withheld)

- **Catppuccin Blue** (`{colors.primary}` — #1e66f5): frequency 7 (all text). Wired in CSS as `--color-primary`, `--color-accent`, `--color-blue`, `--color-blue-600`, `--sidebar-primary`. Despite owning seven CSS variables, the blue never fills a CTA, never appears as a background block, never carries a section. Polar's declared brand color is rendered exclusively as inline link text on the page.
- **Catppuccin Purple** (`{colors.secondary}` — #8839ef): frequency 12 (all text). No CSS variable mapping in the captured tokens, but the hex appears in the broader Catppuccin Latte palette family. Reserved for inline accents and product chrome that the marketing page does not exercise.
- **Catppuccin Green** (`{colors.tertiary}` — #40a02b): frequency 10 (all text). The success-state green from Catppuccin Latte. Used inline on the marketing page for tags and status pills inside the dashboard preview, never as a chromatic block.
- **Catppuccin Teal** (`{colors.accent-teal}` — #179299): frequency 4 (all text). The cooler accent in the Catppuccin family.
- **Catppuccin Orange** (`{colors.accent-orange}` — #fe640b): frequency 1 (text). Wired as `--color-orange-500`. The single warmest accent in the palette, used at most once on the captured surface.

### Text

- **Ink** (`{colors.ink}` — #000000): frequency 35. Used as text (30), background (4), border (1). Wired as `--color-black` and `--color-graphic-stroke`. The pure-black tone carries the primary CTA pill fill, every hand-drawn line glyph stroke, and a handful of high-contrast labels. Not the body text color — that role belongs to ink-navy.
- **Ink Navy** (`{colors.ink-navy}` — #4c4f69): frequency 29 (all text). Wired as `--color-gray-600` in the Catppuccin Latte palette. The dominant body and display text color across the page — never pure black, deliberately softened to a deep navy-gray with a faint blue cast. The hero h1 "Turn Usage Into Revenue" is rendered in this tone.
- **Ink Muted** (`{colors.ink-muted}` — #7c7f93): frequency 12 (all text). Wired as `--color-polar-400`. Secondary text and the GeistMono caption tone — sits one step lighter than ink-navy without losing legibility on white.
- **Ink Subtle** (`{colors.ink-subtle}` — #9a9ba2): declared as `--color-polar-300`, `--color-gray-400`, `--color-neutral-400`, `--orbit-text-subtle`. Reserved for tertiary metadata and disabled-state text; appears minimally on the captured marketing surface.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 15. Used as text (10 — inside the black CTA pill), background (5). Wired as `--color-background`, `--color-card`, `--color-popover`, `--color-white`, `--background`, and ten other CSS variables. The page floor — pure white, not the warm cream Cloudflare and Vercel reach for.
- **Surface-1** (`{colors.surface-1}` — #e6e6e6): wired as `--orbit-bg-elevated`, `--color-border`, `--color-ring`, `--input`. The single light-gray tone that doubles as both card background (on the pillar cards, though those render closer to `#f7f7f7`) and as the default border / input outline. There is no separate hairline color in the system.
- **Surface-2** (`{colors.surface-2}` — #c7c8cc): wired as `--color-polar-100`, `--color-graphic-dim`. The dim graphic stroke tone used for the lightest line-art elements and for the muted-gray outro paragraph that closes the page.
- **Surface-3** (`{colors.surface-3}` — #d7d8da): wired as `--color-polar-50`. The lightest gray in the Polar palette family — sits between Surface-1 and Surface-2 on the lightness ramp.

### Hairline

- **Hairline** (`{colors.hairline}` — #e6e6e6): same hex as Surface-1, intentionally. The system has no second hairline tone — borders, inputs, and the rare divider all resolve to the same light-gray value. Wired as `--color-border`, `--input`, `--ring`, `--color-sidebar-border`.

### Graphite (dark-mode reserves)

- **Graphite-700** (`{colors.graphite-700}` — #171719): wired as `--color-polar-700` and `--color-polar-800`. The lifted-card tone in the dark variant of the system; absent from the captured light-mode marketing surface.
- **Graphite-800** (`{colors.graphite-800}` — #101011): wired as `--color-polar-900` and `--orbit-text`. The deepest panel tone in dark mode.
- **Graphite-900** (`{colors.graphite-900}` — #030712): wired as `--color-polar-950`, `--popover-foreground`, `--color-popover-foreground`. The dark-mode canvas color — essentially pure black with a faint blue tint, the deepest declared dark surface.
- **Graphite-Soft** (`{colors.graphite-soft}` — #27282a): wired as `--color-polar-600`. The mid-step dark surface that bridges Graphite-700 and the dark canvas.

## Typography

### Font Families

The system runs three voices: **Inter** for body, button, and the 128px hero h1; **InterDisplay** for the section h2 / h3 tier; **GeistMono** for the 12px footnote and code-annotation voice. Fallbacks walk to `sans-serif` and `monospace` respectively. All three families are open-source — Inter and InterDisplay from rsms.me, GeistMono from Vercel — which makes Polar's typographic system unusually portable for a payments brand.

The pairing of Inter at 128px display + GeistMono at 12px metadata is the magazine-meets-terminal split. Cloudflare runs the same pairing with FT Kunst Grotesk and Apercu Mono Pro; Polar reaches the same effect with open-source families.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 128px | 400 | 128px | -3.2px | Hero h1 ("Turn Usage Into Revenue") |
| `{typography.display-h1}` | 72px | 400 | 99px | 0 | Secondary display tier |
| `{typography.display-h2}` | 48px | 400 | 60px | 0 | Section h2 ("Any pricing model. Ships in an afternoon.") |
| `{typography.display-md}` | 30px | 400 | 36px | 0 | Outro paragraph display, larger labels |
| `{typography.body-lg}` | 20px | 400 | 27.5px | 0 | Default running text, pillar-card body |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Inline body and link text |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Top-nav labels, secondary metadata |
| `{typography.label-md}` | 14px | 600 | 20px | 0 | Primary CTA pill label ("Get Started") |
| `{typography.button-md}` | 16px | 500 | 24px | 0 | Secondary button label |
| `{typography.mono-sm}` | 12px | 400 | 19.5px | 0 | Inline mono captions, code annotations |
| `{typography.mono-eyebrow}` | 12px | 400 | 16px | 0.3px | Uppercase-tracked GeistMono eyebrow labels |

### Principles

Display weight stays at 400. The hero h1 at 128px / 400 with -3.2px tracking is the editorial-magazine treatment executed in the inverse of the convention — confidence by extreme tracking compression rather than by weight. Stripe at weight 300 sits adjacent to this move; Polar pushes the same restraint further by holding weight 400 across every display tier and letting the -3.2px tracking carry the typographic force at the top of the ramp.

The 14px CTA label is the only place weight 600 appears on the page. Body and display sit at 400; the CTA pill bumps to 600 to compensate for its smaller size against the pure-black pill fill. There is no semibold heading tier and no italic.

The GeistMono voice does the labor a label or eyebrow tier would normally do. There are no uppercase-tracked sans labels in the system; small-caps duty falls entirely to GeistMono at 12px. The 40-occurrence frequency makes the mono the second-most-common typographic voice on the page after Inter body.

### Note on Font Substitutes

All three families are open-source. **Inter** ships from rsms.me/inter under the SIL Open Font License; **InterDisplay** is the same family's display cut. **GeistMono** is Vercel's open-source monospace, shipped from vercel.com/font. No substitution is required — paste the families directly into Tailwind config or the `font-sans` / `font-mono` CSS custom properties.

## Layout

### Spacing System

- **Base unit:** 8px — the dominant module on the page, appearing 7 times in the captured spacing extraction.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px · `{spacing.section}` 96px.
- **Section padding (vertical):** 96px between the hero and the pillar-card grid; 96px again between the pillar grid and the "Any pricing model" h2. The largest captured spacing value on the page.
- **Card internal padding:** 32px (`{spacing.2xl}`) on the pillar cards — 20 captured occurrences of 32px, the second-most-common spacing value after the small-step gap tokens.
- **Top-nav padding:** 16px (`{spacing.base}`) vertical, 32px (`{spacing.2xl}`) horizontal, on a 64px nav height.
- **Hero padding:** 96px (`{spacing.section}`) vertical, 32px (`{spacing.2xl}`) horizontal.

### Grid & Container

- **Max content width:** approximately 1248px on the hero (the captured h1 width), narrowing to 752px on the section h2 below the fold.
- **Hero block:** centered headline + 16px sub-caption ("A billing platform for the intelligence era") + the black pill CTA and a hairline-bordered "Why Polar" secondary pill, stacked vertically on the white canvas.
- **Pillar-card grid:** 3-column grid at desktop showing the Ingest / Aggregate / Charge pillars, each a pale-gray card with a centered line glyph above, a 14px InterDisplay weight-600 title row ("01 — Ingest"), and a 14px body paragraph beneath.
- **Below-fold features grid:** 6 cards in a 3 x 2 grid covering Usage Billing / Subscriptions / Seats / Credits / Trials / Discounts. Each carries a one-stroke line glyph beneath the title and body paragraph.

### Rhythm

The page alternates between **typographic hero** and **glyph-anchored card grids**. The hero is the single typographic moment; everything below the fold is glyph-led. There is no atmospheric gradient between bands — every section terminates on the same pure-white canvas, and the only chromatic variation is the slight elevation contrast between the white canvas and the `#f7f7f7` card fills.

## Elevation

The system has essentially **no shadow tier**. The captured page contains zero shadow occurrences on `{colors.ink}` and zero on any other color. Hierarchy comes from surface-color contrast (`#f7f7f7` cards lifted off the pure-white canvas) and from the binary radius scale — pills feel tappable, sharp-corner cards feel like editorial content.

- **Flat (no shadow):** hero, body bands, pillar cards, feature cards, top-nav, footer — every captured surface.
- **Tonal lift:** the pillar cards render at approximately `#f7f7f7` against the pure-white canvas — a roughly 3% lightness shift that reads as elevation without any shadow being drawn.
- **Hairline outlines:** `{colors.hairline}` (#e6e6e6) marks the secondary "Why Polar" pill outline and the input field outlines. The hairline is barely visible at typical viewing distance, reinforcing the editorial restraint.

## Shapes

The radius scale is **binary**: sharp 0px corners on every surface except the two pill elements.

- `{rounded.none}` 0px — the dominant radius. The pillar cards, the feature cards, the top-nav, the text inputs, every editorial surface terminates in a sharp 90-degree corner.
- `{rounded.sm}` 5.6px — a single captured occurrence on a small chip; rare enough to treat as exceptional rather than systematic.
- `{rounded.full}` 9999px — the primary CTA pill (`{component.button-primary}`) and the secondary "Why Polar" pill (`{component.button-secondary}`). Both render as fully-rounded ends.

There is no middle tier. No 4px / 6px / 8px / 12px / 16px steps exist in the system. A surface either holds a hard editorial corner or rounds to a tappable pill. The binary split is the warmest design move on the page — every other element holds sharp restraint, and the two pills carry the entire affordance signal.

## Components

**`hero-section`** — Pure white `{colors.canvas}` floor, 96 x 32px padding, no border-radius. Holds the centered 128px Inter h1 in `{colors.ink-navy}`, a 16px sub-caption in `{colors.ink-muted}`, and the primary + secondary pill cluster beneath.

**`hero-heading`** — Ink-navy `{colors.ink-navy}` text on the white canvas, Inter 128px / 400, -3.2px tracking. The system's editorial moment — confidence by tracking compression, not by weight.

**`hero-subhead`** — Ink-muted `{colors.ink-muted}` text at `{typography.body-md}` — the single-line caption beneath the h1 ("A billing platform for the intelligence era").

**`section-heading`** — Ink-navy text at `{typography.display-h2}` (48px / 400). The "Any pricing model. Ships in an afternoon." h2 below the pillar grid.

**`body-paragraph`** — Default ink-navy running text at `{typography.body-lg}` (20px / 400) — the workhorse paragraph style on the page.

**`body-paragraph-muted`** — `{colors.ink-muted}` variant for secondary copy and metadata rows under glyphs.

**`outro-paragraph`** — Light-gray `{colors.surface-2}` (#c7c8cc) text at `{typography.display-md}` (30px / 400). The two long paragraphs that close the page ("Event-based usage billing…" and "Polar is the financial layer…") render in this barely-readable surface-2 tone — a deliberate fade-to-quiet rather than a centered footer.

**`mono-caption`** — GeistMono at `{typography.mono-sm}` (12px / 400), used for the "01 — Ingest" / "02 — Aggregate" / "03 — Charge" eyebrows above each pillar card and for inline code annotations.

**`button-primary`** — The signature CTA. Pure black `{colors.ink}` (#000000) fill, white text, fully-rounded `{rounded.full}` pill, 12 x 20px padding, 40px height, weight 600. No border. "Get Started" is the canonical instance.

**`button-primary-hover`** — Background flips to `{colors.graphite-700}` (#171719) — a slightly softer near-black for the press state.

**`button-secondary`** — White `{colors.canvas}` fill, ink-navy text, 1px `{colors.surface-1}` hairline border, fully-rounded `{rounded.full}` pill, same 12 x 20px padding and 40px height as the primary. "Why Polar" and "Sign in" are the canonical instances.

**`top-nav`** — White `{colors.canvas}` surface, 64px height, 16 x 32px padding. The Polar wordmark flush left, product links (Features / Docs / Blog / Company) center, "Sign in" + "Get Started" pill cluster flush right. No bottom hairline visible at the captured viewing distance.

**`nav-link`** — Ink-navy text in `{typography.body-sm}`, 8 x 12px padding. No hover background visible on the captured surface.

**`pillar-card`** — Pale `#f7f7f7` fill (rendered between `{colors.canvas}` and `{colors.surface-1}`), ink-navy text, sharp `{rounded.none}` 0px corners, 32px internal padding. Holds the centered line glyph, the 14px mono eyebrow row, the 20px title, and the 14px body paragraph in a stacked composition.

**`pillar-card-title`** — Ink-navy text at `{typography.body-lg}` (20px / 400) — the "01 — Ingest" / "Subscriptions" / "Credits" title rows.

**`pillar-glyph`** — Pure black `{colors.ink}` stroke on transparent fill, no border-radius, no padding. The hand-drawn single-stroke line illustrations — starburst, denser starburst, nested circles, inward spiral, serpentine arrows, stack of rules. The decorative voice of the page.

**`text-input`** — White surface, ink-navy text, 1px `{colors.surface-1}` hairline border, sharp `{rounded.none}` corners, 12 x 16px padding, 40px height. The system follows the binary-radius rule even on form fields — inputs hold the editorial sharp corner, never round.

**`footer`** — White canvas continuation, muted-gray text in `{typography.body-sm}`, 48 x 32px padding. No surface contrast against the page floor; the footer just continues the canvas.

## Do's and Don'ts

**Do** treat ink as the brand voltage. The single move that defines this system is the pure-black `{colors.ink}` CTA pill on the pure-white canvas. Reaching for the declared Catppuccin blue `{colors.primary}` to fill the CTA would put Polar visually adjacent to Stripe and indistinguishable from every other developer-payments brand.

**Do** use `{colors.ink-navy}` (#4c4f69) for body and display text, never pure `{colors.ink}` (#000000). The deep navy-gray softens the contrast against the white canvas and carries the faint Catppuccin Latte blue cast that ties the running text to the wider palette. Pure black is reserved for the CTA pill and the line glyphs.

**Do** render decorative iconography as one-stroke line glyphs rather than as filled icons or product screenshots. The hand-drawn starbursts, nested circles, and serpentine arrows are the editorial voice of the page; filled icons would shift the system into generic SaaS territory.

**Do** hold the entire display tier at weight 400. The 128px hero h1 sits at weight 400 with -3.2px tracking; the section h2 at 48px also sits at weight 400. Bumping any display tier to weight 600 or 700 collapses the magazine-treatment into a SaaS shout.

**Don't** render the primary CTA in `{colors.primary}` (#1e66f5) just because the CSS declares it as `--color-primary`. The blue is in the system for product surfaces; on the marketing page, the CTA must stay pure black `{colors.ink}` (#000000). Filling the pill in blue collapses the ink-as-voltage principle and removes the only differentiator.

**Don't** use `{colors.hairline}` (#e6e6e6) for background fills or text — it is a border-only token. For a light surface lift on the pillar cards, use `#f7f7f7` (the `{colors.canvas}`-adjacent off-white that renders the cards) instead.

**Don't** introduce a middle radius tier between 0px and 9999px. The system is binary — every surface is either sharp-cornered or a full pill. Adding a 4px, 8px, or 12px step softens the contrast between editorial surfaces and the two tappable pills, and breaks the visual logic of the page.

**Don't** render the pillar-card glyphs as filled icons or as full-color product screenshots. The hand-drawn single-stroke geometry is the entire decorative voice of the system; filling the glyphs or swapping them for screenshots removes the print-magazine feel and pulls the page back toward generic developer-payments territory.

## Known Gaps

- **Hover and focus states:** documented for `{component.button-primary-hover}` only; the full state matrix (focus rings, active press, disabled tints, error states) is not visible on the captured marketing surface.
- **Form input error states:** `{component.text-input}` carries the resting state; error / validation styling lives inside the merchant dashboard and the checkout product surface, neither of which is represented in the captured marketing page.
- **Dark mode:** the captured marketing surface is light-only. A dark variant exists in the merchant dashboard and is wired into CSS as `{colors.graphite-700}` through `{colors.graphite-900}`, but those tones do not appear on the public marketing page.
- **Catppuccin palette in product context:** `{colors.secondary}` (purple), `{colors.tertiary}` (green), `{colors.accent-teal}`, and `{colors.accent-orange}` are declared in CSS but appear at most 12 times each on the marketing surface, all as inline text. Their full roles live in the dashboard, the checkout flow, and the API explorer — none of which are captured here.
- **Motion:** the pillar-card glyphs may animate on scroll-into-view in the live runtime, but the spec captures end-state values only. Easing curves, stagger timing, and any micro-interaction on the CTA pill are not represented.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Polar dashboard (`polar.sh/dashboard`), the merchant portal, the checkout flow, and the documentation site (`docs.polar.sh`) carry their own surface tokens, component sets, and chromatic moves that are not represented here.