stripe.com

Stripe | Financial Infrastructure to Grow Your Revenuesaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #FEFEFE

ground#fefefe·65.46%#c6caeb·8.00%#fe921e·6.24%#fb87e4·5.14%#fb9a99·3.62%#a1aebd·3.24%#fea86b·2.04%#9e6de9·1.37%

Sized by coverage · click to copy.

Typography1 family · 4 styles · sohne-var

Financial infrastructure to grow your revenue. Accept payments, offer financial

sohne-var · 48/55 · 300 · -0.96px

Flexible solutions for every business model.

sohne-var · 32/35 · 300 · -0.64px

Accept and optimize payments globally—online and in person

sohne-var · 26/29 · 300 · -0.26px

Body

Grow your business with a comprehensive set of payments and financial tools⁠—⁠de

sohne-var · 32/35 · 300 · -0.64px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsContact sales2 styles

Contact salesProducts

primary · fill #533afd · label #ffffff · radius 4px · border 0px · padding 11.5px 20px 12.5px 20px · height 40px · type 14px / 400

secondary · fill — · label #061b31 · radius 4px · border 0px · padding 12px 0px · height 40px · type 14px / 400

Shape4 radii · 24 uses

4px15 uses · 63%

6px7 uses · 29%

5px1 use · 4%

16px1 use · 4%

AnalysisStripe'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-ri…

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.

Style recipeBuild a light, infrastructure-grade product site.

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.

Details8 worth noting

stripe.com — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1One diagonal gradient ribbon
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.
2Two-tone headline paragraph
Two-tone headline: sentence one in full-contrast ink, the rest in a muted slate/lilac — hierarchy inside one paragraph, no size change.
3Live proof-of-scale stat
A live, oddly precise stat ("1.71496194%") above the headline as a proof-of-scale flourish.
4Hairline-bordered content column
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.
5Small crisp button pair
Primary button is small and crisp — 40px tall, 4px radius, 14px/400 text, chevron › suffix — paired with a white outlined secondary of identical geometry.
6Brand tile customer story row
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.
7Light 32px section intros
Light body weight (300) at large size (32px) for section intros, with the intro's second sentence again dropped to muted slate.
8Logo strip bleeding off-edge
Logo strip lives in its own hairline band under the hero and bleeds off the right edge — hinting at a marquee.

saas · landing · light · minimal, corporate-clean, swiss · confident, trustworthy, calm, premium, optimistic

stripe.com

More like this