WR-002 · I. Website References

Stripe

Light site with a signature gradient wave hero, logo wall, and modular pricing cards; contact-sales form as a conversion entry.

Summary

Light site with a signature gradient wave hero, logo wall, and modular pricing cards; contact-sales form as a conversion entry.

What it is

A well-designed public website, captured by us (hero, key pages and a public flow) as a reference.

Who it’s for

Designers and front-end developers studying landing pages, pricing pages and sign-up entry points.

Vibrant gradient Split heroPolished, premium, energeticCommerce

Stripe: hero image — Step 1 · Landing: https://stripe.com/. Captured 2026-10-22 23:13 (UTC+8) with a headless browser at 1440×900 by this library. Fair-use reference capture; content and marks © Stripe, all rights reserved.

Key takeaways

Captured stripe.com: white page with the signature multicolor gradient wave behind a left-aligned headline, a logo wall and modular pricing cards; contact form for sales.
Color: vibrant gradient theme; dominant colors #FFFFFF, #E39B86, #845990 (ESTIMATED from our capture).
Layout: split hero pattern, polished, premium, energetic mood.

Best practices to borrow

Save gradients for hero moments; keep body sections calm.
Put the promise on one side and proof (product, media or illustration) on the other; keep the headline short.
Borrow structure and hierarchy, not brand assets; check contrast on any accent you take.

ESTIMATED

Palette preview

#FFFFFF~47%#E39B86~13%#845990~9%#D4DCEE~8%#FCD2A6~1%

Quick links

Source PDF notes DESIGN.md Images (.zip)

Screenshots and the step-by-step flow are in the Flow tab.

Related entries

WR-001 · Website Reference

ESTIMATED

Dominant palette from our captures

Measured by us from our screenshot(s) of https://stripe.com (median-cut quantization; share = % of pixels). Approximate and not official.

#FFFFFF~47% of pixels#E39B86~13% of pixels#845990~9% of pixels#D4DCEE~8% of pixels#FCD2A6~1% of pixels

Layout pattern: Split hero

Observed by us on the captured page(s). See all entries by layout.

How to apply it: Put the promise on one side and proof (product, media or illustration) on the other; keep the headline short.

Other entries with this layout: Material Design 3, Heroicons, Phosphor Icons, Linear, Notion, DiceBear, Open Peeps, Humaaans, Blush, Linear onboarding flow.

Components

Observed on the captured pages.

Mega-menu nav
Gradient hero
Logo wall
Pricing cards
Contact form

Landing → Pricing → Contact sales entry

Captured with a headless browser. The capture stopped at the sign-up or entry page: no forms were submitted and no login walls were passed. These screenshots are fair-use reference captures; the sites, content and marks belong to their owners.

Mermaid source

flowchart LR
  S1["Landing"] --> S2
  S2["Pricing"] --> S3
  S3["Contact sales entry"]

Stripe step 1: Landing — **Step 1**https://stripe.com/. Captured 2026-10-22 23:13 (UTC+8) with a headless browser at 1440×900 by this library. Fair-use reference capture; content and marks © Stripe, all rights reserved.

Stripe step 2: Pricing — **Step 2**https://stripe.com/pricing. Captured 2026-10-22 23:13 (UTC+8) with a headless browser at 1440×900 by this library. Fair-use reference capture; content and marks © Stripe, all rights reserved.

Stripe step 3: Contact sales entry — **Step 3**https://stripe.com/contact/sales. Captured 2026-10-22 23:13 (UTC+8) with a headless browser at 1440×900 by this library. Fair-use reference capture; content and marks © Stripe, all rights reserved. The dashboard sign-up page (dashboard.stripe.com/register) returned 404 to the headless browser, so the contact-sales form entry was captured instead (not submitted).

Our analysis

Captured stripe.com: white page with the signature multicolor gradient wave behind a left-aligned headline, a logo wall and modular pricing cards; contact form for sales.

Vibrant gradient Split heroPolished, premium, energetic

Similar to this

Ranked by shared color theme, layout, category, type and mood tags.

WR-001 · Website Reference

Linear

Monochrome darkSplit hero

WR-004 · Website Reference

Notion

Monochrome lightSplit hero

WR-006 · Website Reference

Arc

Vibrant gradientCentered hero

AV-007 · Illustration Library

Humaaans

Vibrant gradientSplit hero

Downloads

PDF notes All images (.zip) DESIGN.md

PDF: research notes made for this library; third-party images inside follow the credits in their captions. Screenshots are fair-use reference captures; the sites and their content belong to their owners. License / terms of the source: Screenshots: fair-use reference captures; site content © Stripe

DESIGN.md for AI coding agents

Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.

Download .md All entries

# DESIGN.md · Stripe (WR-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: Vibrant gradient · Layout pattern: Split hero · Mood: Polished, premium, energetic
- License / terms: Screenshots: fair-use reference captures; site content © Stripe

Light site with a signature gradient wave hero, logo wall, and modular pricing cards; contact-sales form as a conversion entry.

### Analysis (ours)
Captured stripe.com: white page with the signature multicolor gradient wave behind a left-aligned headline, a logo wall and modular pricing cards; contact form for sales.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~47%
- `#E39B86` ~13%
- `#845990` ~9%
- `#D4DCEE` ~8%
- `#FCD2A6` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Mega-menu nav
- Gradient hero
- Logo wall
- Pricing cards
- Contact form

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://stripe.com/) → Pricing (https://stripe.com/pricing) → Contact sales entry (https://stripe.com/contact/sales)

## Do’s and don’ts
- Do: Reserve gradients for hero/feature moments; keep body sections calm.
- Don’t: Don’t put body text on busy gradients without a contrast check.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://stripe.com
- Capture: https://stripe.com/
- Capture: https://stripe.com/pricing
- Capture: https://stripe.com/contact/sales
- Library entry: https://design-library-byt.pages.dev/entry/WR-002