---
version: alpha
name: Polar
description: Developer-first monetization, drawn in monochrome — near-black ink on pure white, a geometric grotesque with tight tracking, hairline gray borders, and small radii. Restrained, technical, billing-platform calm with a single confident dark CTA.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  surface-muted: "#f4f4f5"
  ink: "#18181b"
  ink-pure: "#000000"

  # Secondary / tertiary text
  ink-secondary: "#52525b"
  ink-tertiary: "#71717a"
  ink-muted: "#a1a1aa"

  # Primary action — dark CTA
  primary: "#18181b"
  primary-hover: "#27272a"
  on-primary: "#ffffff"

  # Accent — Polar blue (links, focus, highlights)
  accent: "#2563eb"
  accent-hover: "#1d4ed8"
  on-accent: "#ffffff"

  # Borders + dividers
  border: "#e4e4e7"
  border-strong: "#d4d4d8"
  divider: "#f0f0f1"

  # Code / syntax tints
  code-bg: "#fafafa"
  code-ink: "#27272a"
  syntax-keyword: "#7c3aed"
  syntax-string: "#16a34a"

  # Badge / pill
  badge-bg: "#f4f4f5"
  badge-text: "#3f3f46"

  # Neutral scale
  gray-900: "#18181b"
  gray-700: "#3f3f46"
  gray-500: "#71717a"
  gray-400: "#a1a1aa"
  gray-200: "#e4e4e7"
  gray-100: "#f4f4f5"
  gray-50: "#fafafa"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.4px
  sub-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-body:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  mono-small:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.md}"
    padding: 9px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.accent}"

  code-block:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.code-ink}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.lg}"
    padding: 16px 20px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 14px 24px
    borderColor: "{colors.border}"

  link:
    textColor: "{colors.accent}"
    typography: "{typography.body}"
---

# Polar Design System

## Overview

Polar is a developer-first monetization platform, and its website wears that positioning as a kind of engineered quiet. The canvas is pure white (`{colors.background}`), the type is near-black (`{colors.ink}` — a warm-cool zinc rather than pure black), and the chrome is built almost entirely from hairline gray borders (`{colors.border}`) rather than shadows or fills. The result reads like well-formatted documentation: technical, legible, and confident enough to leave most of the screen empty.

The typographic voice is a geometric grotesque (Inter, with the system stack behind it) pulled tight. Display headlines run at 56px weight 600 with roughly -2px tracking, compressing the words into a dense, product-grade block. As sizes step down the tracking relaxes toward zero, so body copy stays comfortable while headlines stay urgent. A monospace companion (JetBrains Mono) carries code samples and technical labels — important for a billing API whose whole pitch is "drop in a few lines and get paid."

Color is deployed with discipline. The interface is functionally monochrome: a zinc neutral scale from `{colors.gray-50}` to `{colors.gray-900}` handles surfaces, dividers, and text. A single blue accent (`{colors.accent}`) appears for links, focus rings, and the occasional highlight, while the primary call-to-action is simply dark-on-white (`{colors.primary}`). There is no decorative color, no gradient wash on chrome — the brand earns its distinctiveness through restraint and crisp borders, not saturation.

**Key Characteristics:**
- Pure white canvas with warm-near-black zinc ink (`{colors.ink}`) — not pure black
- Inter (geometric grotesque) with tight negative tracking on display sizes (~-2px)
- JetBrains Mono for code blocks and technical labels — developer credibility
- Hairline gray borders (`{colors.border}`) as the primary chrome, not shadows
- Functionally monochrome zinc neutral scale
- Single blue accent (`{colors.accent}`) reserved for links and focus
- Dark-on-white primary CTA (`{colors.primary}`), no pill — small `{rounded.md}` radius
- Small, consistent radii (6–12px); pills reserved for badges

## Colors

### Primary
- **Polar Ink** (`{colors.ink}`): Primary text, headings. A warm-cool zinc near-black, softer than pure black.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark CTAs.
- **Dark CTA** (`{colors.primary}`): The default call-to-action fill — dark-on-white.

### Accent
- **Polar Blue** (`{colors.accent}`): Links, focus rings, inline highlights. The only chromatic color in chrome.
- **Accent Hover** (`{colors.accent-hover}`): Pressed/hover state for links and accent fills.

### Text Hierarchy
- **Secondary Ink** (`{colors.ink-secondary}`): Description and supporting copy.
- **Tertiary Ink** (`{colors.ink-tertiary}`): Muted metadata, captions.
- **Muted Ink** (`{colors.ink-muted}`): Placeholders, disabled labels.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Subtle section tint, hover backgrounds.
- **Surface Muted** (`{colors.surface-muted}`): Badge and inset backgrounds.
- **Code Background** (`{colors.code-bg}`): Code block surface.

### Borders
- **Border** (`{colors.border}`): The signature hairline — cards, inputs, nav, dividers.
- **Border Strong** (`{colors.border-strong}`): Emphasized borders, hover outlines.
- **Divider** (`{colors.divider}`): Faintest separators between rows.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary text.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500** (`{colors.gray-500}`): Tertiary text, muted links.
- **Gray 400** (`{colors.gray-400}`): Placeholders, disabled.
- **Gray 200** (`{colors.gray-200}`): Borders, outlines.
- **Gray 100** (`{colors.gray-100}`): Inset surfaces, badge fills.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tints.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — dense, compressed billboard |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature and pricing card titles |
| `body-large` | Intros, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | UI text, emphasized labels |
| `button-ui` | Buttons, nav links |
| `caption` | Badges, metadata |
| `mono-body` | Code blocks |
| `mono-small` | Inline code, technical labels |

### Principles
- **Tight at the top, relaxed below**: Display headlines compress to ~-2px tracking; body copy returns to neutral.
- **Three weights**: 400 (reading), 500 (UI/interactive), 600 (headings/emphasis). No 700 in chrome.
- **Mono for credibility**: JetBrains Mono signals the developer audience and frames every code sample.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a documentation-like vertical rhythm — generous `{spacing.3xl}`–`{spacing.4xl}` gaps between major sections.

### Grid & Container
- Max content width: approximately 1100–1200px
- Hero: centered single column with generous top padding
- Feature sections: 2–3 column grids separated by hairline borders
- Code-and-copy splits: text left, monospace code block right

### Whitespace Philosophy
- **Documentation calm**: Large vertical padding, lots of breathing room — empty space carries the brand.
- **Borders, not shadows**: Separation comes from `{colors.border}` hairlines, keeping the page flat and crisp.
- **Monochrome restraint**: Color appears only where it functions (links, focus), never as decoration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, no shadow | Page background, text blocks |
| Bordered (Level 1) | `1px solid {colors.border}` | Cards, inputs, nav, code blocks |
| Emphasized (Level 1b) | `1px solid {colors.border-strong}` | Hover/active outlines |
| Focus (Accessibility) | `2px solid {colors.accent}` ring | Keyboard focus on interactive elements |

**Shadow Philosophy**: Polar largely avoids shadows. Depth is expressed through hairline borders and subtle surface tints (`{colors.surface-soft}`), keeping the interface flat, documentation-like, and screenshot-clean.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved, full-bleed dividers |
| `xs` | 4px | Inline code, tiny chips |
| `sm` | 6px | Compact buttons, small controls |
| `md` | 8px | Buttons, inputs |
| `lg` | 12px | Cards, code blocks |
| `xl` | 16px | Large feature cards, image frames |
| `pill` | 9999px | Badges, status pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Dark fill (`{colors.primary}`), white text, `{rounded.md}`. The default CTA. No pill.
- **`button-secondary`** — White surface with `{colors.border}` hairline outline.

### Pills & Badges
- **`badge`** — Muted gray fill (`{colors.badge-bg}`), zinc text, full pill, 13px weight 500.

### Cards
- **`card`** — White, `1px {colors.border}` outline, `{rounded.lg}`. No shadow.
- **`card-soft`** — Soft-tinted surface for nested/inset content.

### Inputs
- **`input`** — White surface, hairline border. Focus swaps to `{colors.accent}` outline.

### Code
- **`code-block`** — Soft `{colors.code-bg}` surface, JetBrains Mono, hairline border, `{rounded.lg}`.

### Navigation
- **`nav-bar`** — White header, Inter 14px weight 500 links, hairline bottom border, dark CTA at right.

## Do's and Don'ts

### Do
- Use hairline `{colors.border}` outlines instead of shadows for chrome
- Apply tight negative tracking only at display sizes (~-2px), relaxing toward body
- Keep the palette monochrome zinc — reserve `{colors.accent}` for links and focus
- Use the three-weight system: 400 / 500 / 600
- Frame code in JetBrains Mono with a soft surface and hairline border
- Use `{colors.ink}` (zinc) instead of pure black for text

### Don't
- Don't pill the primary CTA — Polar's CTA is a small-radius dark button
- Don't introduce gradients or decorative color into chrome
- Don't lean on heavy shadows — depth comes from borders and tints
- Don't use weight 700 in interface chrome
- Don't widen body tracking — keep it neutral

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked code-and-copy |
| Tablet | 640–1024px | 2-column grids begin |
| Desktop | 1024–1280px | Full layout, max content width |
| Large | >1280px | Centered with generous margins |

### Collapsing Strategy
- Hero: 56px → scales down, retains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature grids: 3-column → 2-column → single column
- Code-and-copy splits: side-by-side → stacked
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Dark `{colors.primary}`
- Background: Pure White `{colors.background}`
- Heading text: Polar Ink `{colors.ink}`
- Body text: Secondary Ink `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Link / focus: Polar Blue `{colors.accent}`

### Example Component Prompts
- "Create a hero on white. Headline at 56px Inter weight 600, line-height 1.05, letter-spacing -2px, color `{colors.ink}`. Subtitle at 19px weight 400, `{colors.ink-secondary}`. Dark CTA (`{colors.primary}`, 8px radius, 10px 18px padding) plus a ghost button (white, `1px {colors.border}`)."
- "Design a card: white background, `1px solid {colors.border}`, 12px radius, no shadow. Title at 20px Inter weight 600, letter-spacing -0.4px. Body 16px weight 400 in `{colors.ink-secondary}`."
- "Build a code block: `{colors.code-bg}` surface, JetBrains Mono 14px, `1px {colors.border}`, 12px radius, 16px 20px padding."
- "Create navigation: white header, Inter 14px weight 500 links in `{colors.ink}`, hairline bottom border, dark CTA right-aligned."

### Iteration Guide
1. Borders over shadows — `1px solid {colors.border}` is the foundation of every surface
2. Negative tracking scales with size: -2px at 56px, -1.4px at 40px, neutral at body
3. Three weights only: 400 read, 500 interact, 600 announce
4. Color is functional — blue accent for links/focus, dark for CTAs, everything else zinc
5. JetBrains Mono frames all code and technical labels

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Polar. Brand names and trademarks belong to their respective owners.