# stripe.com

Source: https://stripe.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, swiss, confident, trustworthy, calm, premium, optimistic
Colors: #fefefe, #c6caeb, #fe921e, #fb87e4, #fb9a99, #a1aebd, #fea86b, #9e6de9
Type (h1): sohne-var · 48px/55.2px · 300 · tracking -0.96px — "Financial infrastructure to grow your revenue. Accept payments, offer financial "
Type (h2): sohne-var · 32px/35.2px · 300 · tracking -0.64px — "Flexible solutions for every business model."
Type (h3): sohne-var · 26px/29.12px · 300 · tracking -0.26px — "Accept and optimize payments globally—online and in person"
Type (body): sohne-var · 32px/35.2px · 300 · tracking -0.64px — "Grow your business with a comprehensive set of payments and financial tools⁠—⁠de"
Type (button): sohne-var · 14px/14px · 400 — "Contact sales"
Button (primary): "Contact sales" — fill #533afd, text #ffffff, radius 4px, border 0px, padding 11.5px 20px 12.5px 20px, height 40px, type 14px/400
Button (secondary): "Products" — text #061b31, radius 4px, border 0px, padding 12px 0px, height 40px, type 14px/400
Radii: 4px (15), 6px (7), 5px (1), 16px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/stripe-com/hero.webp?v=2b86ae60
- Page crop (mid-1): https://media.lvly.design/library/stripe-com/mid-1.webp?v=c2680a4c
- Page crop (mid-2): https://media.lvly.design/library/stripe-com/mid-2.webp?v=92bdb633
- Hero (mobile): https://media.lvly.design/library/stripe-com/mobile-hero.webp?v=b040a96c
- Full page (desktop): https://media.lvly.design/library/stripe-com/full.jpg?v=a2d30a15
- Full page (mobile): https://media.lvly.design/library/stripe-com/mobile-full.jpg?v=be2d305d
- Clip preview (mp4): https://media.lvly.design/library/stripe-com/video-oyrn3k.preview.mp4?v=c8ba4fc5

Stripe's 2026 homepage is a near-white sheet ruled into a hairline-bordered content column, with one gesture of color: a single ribbon of orange, pink, lilac and blue that sweeps in from the top-right and slices behind the hero. Everything else is restraint — a 56px light-weight (300) Söhne headline set tight (−1.4px), a two-tone trick where the first sentence is near-black and the rest fades to a soft slate, a small live "Global GDP running on Stripe" figure, and a sharp 4px-radius violet (#533afd) button pair. Down the page the grid stays quiet and editorial: two-column heading/copy rows separated by 1px rules, a logo strip in its own band, and full-bleed photography (an aerial crosswalk for the Hertz story) framed by a rounded 16px card. It reads as infrastructure — precise, unhurried, expensive — and the one ribbon carries all the warmth.

## Steal-worthy details

- The hero's color ribbon is a single diagonal gradient band clipped to run behind the type; it gives the page identity without a hero image or illustration.
- Two-tone headline: sentence one in full-contrast ink, the rest in a muted slate/lilac — hierarchy inside one paragraph, no size change.
- A live, oddly precise stat ("1.71496194%") above the headline as a proof-of-scale flourish.
- Hairline column: the content sits inside a 1px-bordered central column that runs the full page, with section dividers as horizontal rules that meet those edges.
- Primary button is small and crisp — 40px tall, 4px radius, 14px/400 text, chevron `›` suffix — paired with a white outlined secondary of identical geometry.
- Customer stories lead with a tiny square brand tile (Hertz's yellow "H") + one-line headline + right-aligned outline "Read the story ›" link, then a full-width 16px-rounded photo.
- Light body weight (300) at large size (32px) for section intros, with the intro's second sentence again dropped to muted slate.
- Logo strip lives in its own hairline band under the hero and bleeds off the right edge — hinting at a marquee.

## Style recipe

Build a light, infrastructure-grade product site. Ground `#fefefe`; contain all content in a central column bounded by 1px `rgba(0,0,0,0.08)` vertical rules, and separate sections with 1px horizontal rules that meet those edges — no card backgrounds, no tonal bands except one logo strip. Type: a single grotesk with a variable weight axis (Söhne / Inter / SF Pro), display at 56px weight 300, line-height 1.03, letter-spacing −1.4px; section intros at 32px weight 300, −0.64px; body 14–16px weight 400. Write headline paragraphs, not headlines: first sentence in ink `#0a2540`-ish near-black, the remainder in muted slate `#425466` or a lilac-gray `#a1aebd`. Accent `#533afd` violet for the sole solid button, white text, 4px radius, 40px height, 20px side padding, 14px/400 label with a trailing `›`; the secondary is the same geometry with a 1px light border and violet text. Radii otherwise 4–6px on controls and 16px on media frames. Allow exactly one color event per page: a diagonal multi-stop gradient ribbon (`#fe921e` orange → `#fb87e4` pink → `#9e6de9` violet → `#c6caeb` sky) placed behind the hero, clipped so type overlaps it. Photography is full-bleed inside the column, aerial or environmental, in a rounded frame. Keep motion to subtle entrance fades and a slow logo marquee. Aim for calm, precise, expensive; never decorative beyond the ribbon.