stripe.com

How it works

hero:

Full-width hero with diagonal gradient backdrop (purple to orange), left-aligned headline in 4xl weight, subheading in smaller body weight, prominent purple CTA button positioned below, and a right-aligned isometric phone mockup with soft shadow.

layout:

Alternating full-width sections with 60/40 image-text splits, repeated rhythm of text block left + visual right (or inverted), stat rows using 3–4 columns of equal width, centered content zones with max-width containers, footer organized in 5 column groups.

type:

Sans-serif body (likely Geist or Inter) with strong weight hierarchy—5xl/6xl headlines in 600–700 weight, 2xl subheadings in 500, body in 400 at 16px, tech labels and microcopy in 12px 500–600 weight; tracking opens up in headlines, tightens in small numerals.

colors:

Soft gradient palette deployed as full-bleed backgrounds (purple→pink→orange sweeps), accent colors (navy for text, purple for CTAs, orange for highlights) layered sparingly against white and light gradient sections, with occasional semi-transparent overlays creating color-in-color moments.

distinctive:

Soft, blurred gradient backgrounds that bleed past content boundaries and blur into the next section, creating a liquified, non-sharp transition between color zones that feels tactile rather than flat.