taste-skill / Compare styles / Linear vs Stripe

Linear vs Stripe: design style comparison

Linear is Dark Precision SaaS & Industrial Craftsmanship; Stripe is High-Craft Financial Infrastructure & Editorial Light/Navy Dual-Mode. 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

Linear style · dark

Ship the product, not the pixels.

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

Card on extracted card recipe

Accent link: #5E6AD2 · border rgba(255, 255, 255, 0.08)

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

Key differences

Linear is a dark design (canvas #08090A) while Stripe is dual (canvas #FFFFFF).
Accent: #5E6AD2 (Linear) vs #533AFD (Stripe).
Headings: Inter Variable vs Söhne Variable (sohne-var).
Display type: Linear H1 is 64px / -0.022em (w510); Stripe H1 is 48px–56px / -0.025em (w300) — Linear sets 16px larger headlines.
Primary button radius: 9999px vs 4px; height 32px vs 48px.
Depth: Linear uses rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset most; Stripe uses rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px most.
Motion: cubic-bezier(0.25, 0.46, 0.45, 0.94) vs cubic-bezier(0.25, 1, 0.5, 1).

Token table

Token	Linear	Stripe
Canvas	`#08090A`	`#FFFFFF`
Surface	`#0F1011`	`#F8FAFD`
Text	`#F7F8F8`	`#061B31`
Muted text	`#8A8F98`	`#50617A`
Accent	`#5E6AD2`	`#533AFD`
Border	`rgba(255, 255, 255, 0.08)`	`#E5EDF5`
Heading font	`Inter Variable`	`Söhne Variable (sohne-var)`
Body font	`Inter Variable`	`Söhne Variable`
Mono font	`Berkeley Mono`	`SourceCodePro`
H1	`64px / -0.022em (w510)`	`48px–56px / -0.025em (w300)`
Button radius	`9999px`	`4px`
Button height	`32px`	`48px`
Most-used radius	`8px`	`6px`
Most-used shadow	`rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`	`rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`
Easing	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	`cubic-bezier(0.25, 1, 0.5, 1)`
Duration	`0.7s`	`0.3s`
Container max-width	`1436px`	`1266px`
Mode	`dark`	`dual`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	32px	`0px 12px`	`9999px`	`#E5E5E6` `#08090A`	`1px solid #E5E5E6`	`13px / 510`
Get started	44px	`0px 20px`	`9999px`	`#E5E5E6` `#08090A`	`1px solid #E5E5E6`	`16px / 510`
Contact sales	44px	`0px 20px`	`9999px`	`rgba(255, 255, 255, 0.05)` `#F7F8F8`	`none`	`16px / 510`

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`

Which style should you pick?

Pick Linear if you want Ultra-dark #08090A carbon canvas + 1px rgba(255,255,255,0.08) translucent hairlines + Inter Variable 510 weight (-0.022em) + Berkeley Mono telemetry — signals: dark, precision, saas, linear, hairline-borders, bento-grid, issue-tracker, minimalist, micro-shadows, carbon-black, dashboard, ai-agents.

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, fintech, payments, billing, pricing, enterprise, stripe, mesh-gradient, editorial, navy, bento, revenue.

Shared traits: indigo.

Rules that differ

Linear never:

NEVER use pure #000000 for large card surfaces or pure #FFFFFF for body text—always use #08090A canvas, #0F1011/#141516 cards, and #F7F8F8 primary text.
NEVER use thick opaque gray borders (border-gray-700, border-zinc-600)—always use 1px translucent white hairlines (border-white/[0.08] or border-white/[0.05]).
NEVER use standard font-bold (700 or 800) on large headlines—Linear uses custom variable medium weight (font-[510]) with tight negative tracking (tracking-[-0.022em]) and leading-none (1.0).

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).

Go deeper

Linear style guide Stripe style guide Linear token spec Stripe token spec Linear vs Vercel Linear vs Raycast Linear vs Dub Linear vs Loops Stripe vs Polar Stripe vs WorkOS

Values extracted from https://linear.app and https://stripe.com. 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 →