taste-skill / Compare styles / Stripe vs Ashby

Stripe vs Ashby: design style comparison

Stripe is High-Craft Financial Infrastructure & Editorial Light/Navy Dual-Mode; Ashby is Analytics-Driven Recruiting SaaS & Royal Indigo TTNormsPro. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 16 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

Ashby style · light

Ship the product, not the pixels.

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

Get in Touch Get in Touch

Card on extracted card recipe

Accent link: #473BCE · border #EEEDEF

Key differences

Stripe is a dual design (canvas #FFFFFF) while Ashby is light (canvas #FFFFFF).
Accent: #533AFD (Stripe) vs #473BCE (Ashby).
Headings: Söhne Variable (sohne-var) vs TTNormsPro.
Display type: Stripe H1 is 48px–56px / -0.025em (w300); Ashby H1 is 72px / -0.04em (w575) — Ashby sets 24px larger headlines.
Primary button radius: 4px vs 6px; height 48px vs 36px.
Depth: Stripe uses rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px most; Ashby uses rgb(255, 255, 255) 0px 0px 0px 4.5px, rgba(0, 0, 0, 0.1) 0px 0px 0px 5.5px most.
Motion: cubic-bezier(0.25, 1, 0.5, 1) vs ease-out, ease-out, ease-out.

Token table

Token	Stripe	Ashby
Canvas same	`#FFFFFF`	`#FFFFFF`
Surface	`#F8FAFD`	`#FCFCFE`
Text	`#061B31`	`#141415`
Muted text	`#50617A`	`#717075`
Accent	`#533AFD`	`#473BCE`
Border	`#E5EDF5`	`#EEEDEF`
Heading font	`Söhne Variable (sohne-var)`	`TTNormsPro`
Body font	`Söhne Variable`	`TTNormsPro / Inter`
Mono font	`SourceCodePro`	`SF Mono`
H1	`48px–56px / -0.025em (w300)`	`72px / -0.04em (w575)`
Button radius	`4px`	`6px`
Button height	`48px`	`36px`
Most-used radius same	`6px`	`6px`
Most-used shadow	`rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`	`rgb(255, 255, 255) 0px 0px 0px 4.5px, rgba(0, 0, 0, 0.1) 0px 0px 0px 5.5px`
Easing	`cubic-bezier(0.25, 1, 0.5, 1)`	`ease-out, ease-out, ease-out`
Duration	`0.3s`	`0.12s, 0.12s, 0.12s`
Container max-width	`1266px`	`1200px`
Mode	`dual`	`light`

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 in Touch	36px	`1px 16px`	`6px`	`transparent` `#FCFCFE`	`none`	`16px / 545`
Get in Touch	44px	`1px 24px`	`6px`	`transparent` `#FCFCFE`	`none`	`20px / 500`
Ashby Platform	41px	`8px 12px`	`6px`	`#EEEDEF` `#717075`	`none`	`16px / 400`

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

Pick Ashby if you want Bright #FFFFFF / #FCFCFE canvas with #EEEDEF soft lavender-gray borders, 72px TTNormsPro geometric display headings (-0.04em tracking, 575 weight), and #473BCE royal indigo CTAs — signals: hr, recruiting, analytics, saas, ashby, b2b, geometric.

Shared traits: light, indigo.

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

Ashby never:

NEVER substitute generic uncalibrated gray backgrounds for Ashby’s exact #FFFFFF canvas and #FCFCFE surface pairing.
NEVER replace TTNormsPro display typography or ignore its signature scale (72px / -0.04em (w575)).
NEVER use thick opaque borders that clash with #EEEDEF (1px solid #EEEDEF).

Go deeper

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

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