taste-skill / Compare styles / Stripe vs Polar

Stripe vs Polar: design style comparison

Stripe is High-Craft Financial Infrastructure & Editorial Light/Navy Dual-Mode; Polar is Nordic Dark Monetization & PP Neue Montreal Minimalist. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 18 of 18 tracked tokens differ.

Side-by-side preview

Stripe style · dual

Ship the product, not the pixels.

Preview text rendered with the extracted Stripe canvas, text, muted and accent tokens.

Get started Sign in

Card on extracted card recipe

Accent link: #533AFD · border #E5EDF5

Polar style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Polar canvas, text, muted and accent tokens.

Get Started Get Started

Card on extracted card recipe

Accent link: #FFFFFF · border #212121

Key differences

Stripe is a dual design (canvas #FFFFFF) while Polar is dark (canvas #090909).
Accent: #533AFD (Stripe) vs #FFFFFF (Polar).
Headings: Söhne Variable (sohne-var) vs PP Neue Montreal.
Display type: Stripe H1 is 48px–56px / -0.025em (w300); Polar H1 is 36px / 1.25 (w400) — Stripe sets 12px larger headlines.
Primary button radius: 4px vs 9999px; height 48px vs 40px.
Depth: Stripe uses rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px most; Polar uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 16px 40px -12px most.
Motion: cubic-bezier(0.25, 1, 0.5, 1) vs cubic-bezier(0.4, 0, 0.2, 1).

Token table

Token	Stripe	Polar
Canvas	`#FFFFFF`	`#090909`
Surface	`#F8FAFD`	`#111111`
Text	`#061B31`	`#FFFFFF`
Muted text	`#50617A`	`#858585`
Accent	`#533AFD`	`#FFFFFF`
Border	`#E5EDF5`	`#212121`
Heading font	`Söhne Variable (sohne-var)`	`PP Neue Montreal`
Body font	`Söhne Variable`	`Inter / PP Neue Montreal`
Mono font	`SourceCodePro`	`GeistMono`
H1	`48px–56px / -0.025em (w300)`	`36px / 1.25 (w400)`
Button radius	`4px`	`9999px`
Button height	`48px`	`40px`
Most-used radius	`6px`	`12px`
Most-used shadow	`rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 16px 40px -12px`
Easing	`cubic-bezier(0.25, 1, 0.5, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.3s`	`0.075s`
Container max-width	`1266px`	`896px`
Mode	`dual`	`dark`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	48px	`15.5px 24px`	`4px`	`#533AFD` `#FFFFFF`	`none`	`16px / 400`
Sign in	40px	`11.5px 20px`	`4px`	`transparent` `#533AFD`	`1px solid #FFFFFF`	`14px / 400`
Sign up with Google	48px	`14.5px 24px`	`4px`	`rgba(255, 255, 255, 0.65)` `#533AFD`	`1px solid #B9B9F9`	`16px / 400`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get Started	40px	`12px 20px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 550`
Get Started	48px	`16px 20px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 550`
Contact Sales	40px	`12px 20px`	`9999px`	`#212121` `#FFFFFF`	`1px solid rgba(255, 255, 255, 0.05)`	`14px / 550`

Which style should you pick?

Pick Stripe if you want Daylight #FFFFFF & cool ice-slate #E5EDF5 bento grids contrasted with #0D1738 deep navy sections, light-weight 300 Söhne Variable typography, and 4px #533AFD CTAs — signals: light, dual, payments, pricing, enterprise, stripe, mesh-gradient, editorial, navy, indigo, bento, revenue.

Pick Polar if you want Deep #090909 obsidian canvas with #111111 cards and #181818 / #212121 borders, refined 36px PP Neue Montreal display headings, GeistMono revenue counters, and #FFFFFF pill CTAs — signals: dark, monetization, open-source, polar, neue-montreal, geist-mono, minimalist, nordic.

Shared traits: fintech, billing.

Rules that differ

Stripe never:

NEVER use pure black (#000000) or neutral gray (#111827) for headings or dark sections—Stripe uses deep maritime ink-navy (#061B31 for text, #0D1738 for dark sections) and cool slate (#50617A) for body copy.
NEVER use heavy bold (700/800) weights on display headlines—Stripe’s current HDS aesthetic uses refined light-weight Söhne Variable (font-light / 300) at large sizes (48px–56px) with tight negative tracking (-0.02em to -0.025em) for an architectural editorial feel.
NEVER use pill-shaped (rounded-full) or overly rounded (rounded-2xl) primary buttons—Stripe’s HDS buttons use crisp 4px corners (--hds-space-button-radius-lg: 4px, rounded-[4px]) with 48px height (h-12 px-6).

Polar never:

NEVER substitute generic uncalibrated gray backgrounds for Polar’s exact #090909 canvas and #111111 surface pairing.
NEVER replace PP Neue Montreal display typography or ignore its signature scale (36px / 1.25 (w400)).
NEVER use thick opaque borders that clash with #212121 (1px solid #212121).

Go deeper

Stripe style guide Polar style guide Stripe token spec Polar token spec Linear vs Stripe Stripe vs WorkOS Stripe vs Ashby

Values extracted from https://stripe.com and https://polar.sh. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →