# Polar — Marketing Site Design Spec

> Source: polar.sh (live DOM, computed styles), 2026-07-25 (desktop 1512px).
> Coverage: home. Dashboard: behind login (`needs-dashboard`).
> Extracted with `scripts/extract.js`; **0 stylesheets blocked** — rule-level coverage
> is complete for motion, states and breakpoints.
> **Reality check: the queue hint was wrong on both counts.** It said "light minimal,
> single blue accent". Polar is in fact a near-black site (`#101011` on `#090909`) and
> its accent is **green `#00bc7d`**, not blue. It is minimal, but by way of monochrome
> and thin white line-drawings rather than light surfaces.

## 1. Visual Theme & Atmosphere

Polar is an austere, near-monochrome billing brand for the AI era. The page is
almost entirely black — `#090909` bands over a `#101011` canvas — carrying white
text and very little else. The signature device is a set of **thin white
line-drawing diagrams** (concentric circles, serpentine arrows, radiating strokes)
sitting inside large bordered panels; they read like technical schematics and do all
the illustrative work without a single filled colour. The type is PP Neue Montreal
at a notably *light* footing: a 96px hero at weight 400, section heads at 48/500,
and unusually small 14px body — so the page feels spacious and quiet rather than
loud. GeistMono handles code and small labels. The strongest geometric signal is a
deliberate contradiction: **cards are perfectly square (0px radius) while every
button is a full pill**. Feels: austere, technical, quiet, precise.

## 2. Color Palette & Roles

### Text

| Token | Hex | Role / usage |
|---|---|---|
| text-primary | `#ffffff` | headings and body — overwhelmingly dominant (662 elements) |
| text-muted | `#a6accd` | lavender-grey secondary copy |
| text-dim | `#808189` | tertiary supporting text |
| text-faint | `#71727a` | captions, footnotes, disabled labels |
| text-soft | `#d7d8da` | slightly-dimmed white for large paragraphs |

### Surfaces & borders

| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#101011` | page background (34 elements) |
| canvas-deep | `#090909` | full-width section bands (the darkest plane) |
| pure-black | `#000000` | the top announcement bar, and the primary button's hover fill |
| surface | `#171719` | raised panel fill |
| border | `#202022` | the default 1px hairline — the only structural line on the page |
| border-strong | `#27282a` | heavier dividers and 2px rules |

### Accent & semantic

| Token | Hex | Role / usage |
|---|---|---|
| button-primary | `#ffffff` | primary CTA fill (white pill, black text) |
| accent-green | `#00bc7d` | the single chromatic accent, on 25 text elements |
| accent-green-deep | `#002c22` | its dark companion fill, on 8 elements |

**Rules:** white is the primary action colour; `#00bc7d` is the *only* chroma on the
page and appears sparingly as a positive/semantic mark. The specific components
carrying the green were not pinned down in this pass — treat it as a small accent,
never a surface. Structure comes from `#202022` hairlines, not from fills.

## 3. Typography Rules

`PP Neue Montreal` for everything (880 elements), `GeistMono` for code and small
labels (107). Preview substitutes **Space Grotesk** for PP Neue Montreal (licensed;
closest open geometric-grotesque with similar proportions) and **JetBrains Mono**
for GeistMono — recorded here so the spec never implies the real faces were used.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 96 / 96 | 400 | normal |
| Section (h2) | 48 / 60 | 500 | normal |
| Sub-section (h3) | 30 / 41.25 | 500 | normal |
| Body | 14 / 21 | 450 | +0.24px |
| Mono / code | 12 / 16 | 450 | +0.24px |

Patterns: the weight range is narrow and light — **400 at the largest size**, rising
only to 500 for section heads; nothing is bold. Tracking is normal at display sizes
and *opens slightly* (+0.24px) at small sizes, the opposite of the usual tighten-as-
you-grow convention. Body is small (14px) against a very large hero, giving the
page its wide, quiet rhythm. The odd weight values (450, 550) come from a variable font.

## 4. Component Stylings

### Buttons

- **Primary**: bg `#ffffff`, text `#000000`, **full pill**, height `40px`, padding `12px 20px`, 14px/550.
- **Ghost / nav**: transparent, white text, 16px/450, no border.

### States

| Component | Rest | Hover | Focus | Disabled |
|---|---|---|---|---|
| Primary CTA | bg `#ffffff`, text `#000000`, pill, h40 | bg → `#000000` (full inversion), or `opacity .85` | `focus-visible` ring, 2px | `opacity: .5` |
| Field | dark, 1px `#202022` | — | 2px ring | `opacity: .5` |

The primary hover is an **inversion to pure black**, not a tint — an unusually
high-contrast hover for a dark site.

### Cards / panels

- **`0px` radius — sharp corners**, `1px #202022` border, transparent fill, `24px` top padding.
  Content is a thin white line-drawing diagram above a title and short body.
- The square card against the pill button is the system's defining tension.

### Nav

- Wordmark left; Features / Docs / Pricing / Blog / Company centred at 16px/450; right "Sign in" ghost and a white "Get Started" pill. A full-width black announcement bar sits above the nav.

## 5. Layout Principles

Centred hero with a very large headline, then full-width bands alternating `#090909`
and `#101011`. Content is a **3-column grid of bordered panels**, each holding a line
diagram; a logo rail sits under the hero. Section headings are left-aligned with the
supporting paragraph set to the right in a second column — a two-column editorial
split rather than centred text. Hairlines, not gaps, delimit the panels.

## 6. Depth & Elevation

Radius scale: `9999px` (9 — the pills), `12px` (1), `7.6px` (1). **Cards are 0px.**

**Shadows: none.** The only box-shadow found is Tailwind's transparent ring reset
(`rgba(0,0,0,0) 0 0 0 0`, 5 occurrences). Depth is expressed purely as flat colour
bands (`#000000` → `#090909` → `#101011` → `#171719`) separated by `1px #202022`
hairlines.

Borders observed: `1px #202022` (12), `2px #202022` (6), `1px #171719`, `1px #ffffff`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background-color, border-color | 0.15s | `cubic-bezier(.4,0,.2,1)` | buttons, links, panels (house transition, 54 elements) |
| color, background-color, border-color | 0.2s | `cubic-bezier(.4,0,.2,1)` | slower variant (23 elements) |
| fill | 0.2s | `cubic-bezier(.4,0,.2,1)` | SVG line-diagram strokes |
| opacity | 0.1s | `cubic-bezier(.4,0,.2,1)` | fast fades |

House transition is **0.15s on the Tailwind standard curve** — restrained, with no
custom easings defined anywhere.

Keyframes (10): `marquee` (the logo rail), `shimmer`, `send-off`, `caret-blink`,
`accordion-down`, `accordion-up`, `enter`, `exit`, `spin`, `pulse`. Mostly
component-level (accordion, caret, loading) rather than ambient decoration — the
page does not animate for its own sake. The hero headline does fade in on load.
**1 `prefers-reduced-motion` block** is present.

## 8. Backgrounds, Effects & WebGL

**No gradients, no backdrop-filters, no canvas/WebGL, no video, no grain** — all
confirmed empty in the census. This is a genuinely flat site. Its entire visual
interest comes from thin white SVG line-drawings on black and from the panel
hairline grid. Reproducing Polar with gradients or glows would be off-brand.

## 9. Do's and Don'ts

### Do
- Keep the page near-black and effectively monochrome.
- Draw illustrations as thin white outline diagrams — circles, arcs, arrows.
- Use square (0px) cards with 1px `#202022` borders.
- Make buttons full pills with a white fill and black text.
- Keep display type light (400 at 96px) and body small (14px).
- Open tracking slightly at small sizes (+0.24px), not tighten it.

### Don't
- Don't add gradients, glows, blurs or shadows — the real site has none.
- Don't round the cards; the square/pill contrast is the identity.
- Don't use bold weights; 500 is the practical ceiling.
- Don't introduce a second chromatic accent beside `#00bc7d`.
- Don't fill the line-drawings — they are strokes only.

## 10. Responsive Behavior

A clean, conventional ladder — notable for using **rem and px breakpoints in
parallel** (Tailwind v4 emits rem; some custom rules still use px):

| Breakpoint | What changes |
|---|---|
| 40rem / 640px | phone → small tablet; panel grid drops to 1 column |
| 48rem / 768px | 2-column panel grid; nav begins to expand |
| 64rem / 1024px | 3-column panel grid, the desktop layout |
| 80rem / 1280px | max-width framing |
| 96rem | large-desktop cap |

**2 `prefers-color-scheme: dark` blocks** and 1 container query. The site is dark by
default; the dark blocks are refinements rather than the primary theme.

## 11. Agent Prompt Guide

- Canvas `#101011` · Deep `#090909` · Text `#ffffff` · Muted `#a6accd` · Border `#202022` · Accent `#00bc7d`
- Font: PP Neue Montreal (sub: Space Grotesk) · Hero 96/400 · Body 14/450 at +0.24px · Mono GeistMono 12
- Radius: cards **0px**, buttons **9999px pill** · Control height: 40px
- Focus: 2px ring · Hover: white CTA inverts to `#000000` · Shadows: none

<polar_design_language>
An austere near-black billing brand: canvas #101011 over #090909 bands, pure #000000
for the announcement bar, white #ffffff text with #a6accd and #808189 for secondary
copy, and a single green #00bc7d as the only chroma on the page. PP Neue Montreal
throughout at light weights — a 96/400 hero, 48/500 section heads, and small 14/450
body whose tracking OPENS to +0.24px at small sizes; GeistMono for code. The system's
signature contradiction is geometric: cards are perfectly square at 0px radius with
1px #202022 hairline borders, while every button is a full 9999px pill — white fill,
black text, 40px tall, inverting to pure black on hover. Illustrations are thin white
outline diagrams (concentric circles, serpentine arrows) inside bordered panels, laid
out in a 3-column grid under left-aligned headings paired with right-column body copy.
Absolutely flat: no gradients, blurs, shadows or WebGL anywhere. Transitions are 0.15s
cubic-bezier(.4,0,.2,1); keyframes are functional (accordion, caret, marquee), not decorative.
Feels: austere, technical, quiet, precise.
Avoid: gradients or glows of any kind, rounded cards, bold weights, a second accent
colour, and filled illustrations — the diagrams are strokes only.
</polar_design_language>