An austere, effectively monochrome billing brand for the AI era — near-black rather than the light minimal it is often assumed to be. The page stacks four flat planes (#000000 announcement bar, #090909 bands, #101011 canvas, #171719 surface) separated only by 1px #202022 hairlines, with white text over #a6accd and #808189 secondaries. Its signature device is a set of THIN WHITE LINE-DRAWING DIAGRAMS — concentric circles, serpentine arrows, radiating strokes — sitting inside large bordered panels like technical schematics, never filled with colour. The system is built on a deliberate geometric contradiction: cards are perfectly SQUARE at 0px radius while every button is a full 9999px pill, 40px tall with 12px 20px padding, white #ffffff on black text, INVERTING to pure #000000 on hover. PP Neue Montreal runs light throughout — a 96/96 hero at weight 400, 48/60 section heads at 500, and unusually small 14/21 body whose tracking OPENS to +0.24px at small sizes rather than tightening — with GeistMono for code. One green #00bc7d is the only chroma on the entire page. Utterly flat: no gradients, backdrop-filters, shadows, canvas or video exist anywhere, and its keyframes are functional (marquee, accordion, caret-blink) rather than decorative.
Browse Polar in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: polar.sh (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Extracted withscripts/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 (#101011on#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.
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.
| 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 |
| 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 |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.