Stripe
stripe.comthe clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.
Design tokens
- display
- Soehne (sohne-var)
- body
- Soehne (sohne-var)
- mono
- -
Do / Don't
Reference it for
- Light (300-weight) large headings as the device that makes dense content read calm.
- A fully tokenised system: colour, space, type, shadow and motion all named, none invented per section.
- Long, slow easing on transforms (0.6-0.8s) as a premium signal; fast (0.15-0.3s) on colour and opacity.
- Section rhythm that alternates tall feature "bento" blocks with short proof bars.
- The floating pill navigation that detaches from the viewport edge.
Do not copy
- The Stripe gradient and the indigo #533afd - both are Stripe-coded; reusing them reads as derivative.
- The sheer density. Stripe earns it with an enormous system; a smaller client imitating it looks cluttered.
- Soehne itself (licensed). Borrow the weight strategy, not the typeface.
Signature moves
light-weight large-heading calm
300-weight large headings make dense content read calm, fed by a fully tokenised system where colour, space, type, shadow and motion are all named and none invented per section
split-speed easing model
long slow easing on transforms (0.6-0.8s) signals premium while fast 0.15-0.3s on colour and opacity keeps interactions snappy, using named curves (standard, transform-premium, expo-out, in-out)
floating detached pill nav with bento rhythm
a floating pill navigation detaches from the viewport edge, and section rhythm alternates tall feature bento blocks with short proof bars
Related references
Jasper
strongMarketing Platform
The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.
Mintlify
strongMarketing Platform
The reference for AI-documentation platform — cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.
Adaline
strongDeveloper Tool
an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.
Cal Com
strongDeveloper Tool
The reference for open-source dev-tools brand at peak typographic confidence — Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.