Stripe

Why it works

Generous padding and clean typography make complex financial products feel accessible. Dark backgrounds with bright accent imagery create visual rhythm without overwhelm, while the bento-grid layout for product cards organises dense information hierarchically. Navigation stays minimal — trusting users to self-select rather than prescribing paths.

Who should look at this

B2B SaaS founders selling to enterprises who need to convey sophistication without sterile corporate aesthetics.

Signature technique

Alternating full-width imagery blocks with text sections creates breathing room — viewers rest between information-dense sections, reducing cognitive load on complex feature explanations.

How the page is built

1. Navigation bar. Five simple menus on the left, with a plain 'Sign in' button and a filled blue 'Contact sales' button on the right.
2. Headline hero. One long sentence is split into a dark opening and a lighter continuation at the same size, with a filled 'Get started' button next to a quicker 'Sign up with Google' one.
3. Logo strip. A full-width row of famous names, such as OpenAI, Amazon, Ford and Google, sits directly under the hero as proof of scale.
4. Card grid of offers. Cards named after the job to be done, such as 'Enable any billing model', each carry a small picture of the product in use instead of an icon.
5. Recommendation box. A form lets visitors enter their website or describe what they sell and get product suggestions, so nobody has to hunt through the menus.
6. Numbers band. Four large figures, covering currencies supported, money processed, uptime and subscriptions, present reliability as plain facts.
7. Customer stories and support. Named customers such as Hertz and Instacart each get a headline result in numbers, followed by options for expert help and a section aimed at startups.

Look and feel

The page is mostly white with deep navy text, and all of its colour comes from one sweeping ribbon of orange, pink and purple across the top right of the hero. Everything else stays neutral, so that single ribbon becomes the page's signature and the vivid blue buttons stand out.

Where it might not fit

A grid of six offers plus enterprise stories means a visitor with one simple need has to dig for it. The very long opening sentence is also a lot to read before anyone sees a button, so a business with one clear offer should say it in far fewer words.

What to borrow

• Spend your colour in one place, such as a single large graphic in the first screen, and keep everything else neutral so it becomes your signature.
• Make the headline and the sentence after it the same size, with the second part in a lighter colour, so the message reads as one flowing statement.
• Show a small picture of the real thing inside each offer card, such as a payment screen or a chart, so each card shows what it does instead of just naming it.

Brief your developer

“I want a clean white homepage with one large headline and a longer, lighter sentence at the same size, a single sweeping ribbon of colour as the only decoration, a filled button next to an outlined one, and a grid of cards each showing a small picture of what it does.”

Want a full version for your own site? Get the brief.

Can a mostly white website still feel memorable?

Stripe keeps almost everything white and navy and puts all of its colour into one sweeping orange, pink and purple ribbon in the hero. Because nothing else competes with it, the ribbon becomes what people remember. The lesson is to spend your colour in one place instead of spreading it thinly across the page.

How do you explain a business with many offers on one page?

Stripe uses a grid of cards, each named after a problem it solves, with a small picture of the product beside it. It also adds a box where visitors describe their business and get a recommendation, so they are not left to search. If you have only two or three offers, use fewer cards and skip the recommendation box.