BRAND Stripe 2026 · Page: home

HEADER brand: Stripe; design_date: 2026-09; page_type: home; variants: localized homes change sections (e.g. the Japan site adds a Japanese support banner, a pricing block and a 3-step onboarding block, and shows the logos as a 5-column grid) example_urls: https://stripe.com (United States, English), live 2026-09-25; evidence: measured from HTML and stylesheets (including client-loaded stylesheets) unless marked purpose: explain Stripe in one sentence and get sign-ups or sales contacts skeleton: content 1264px framed by vertical hairlines; 11 sections; total height 15112px at 1440, 20361px at 390; sidebar: none overrides: none SECTIONS S1 header / transparent, mega-menu as Overview; the wave runs behind it S2 hero / text left, wave right - one-sentence value proposition and sign-up background: #ffffff; wave canvas behind the right side and under the header (Recipe hero-wave); 1px #e5edf5 full-bleed lines at the header bottom (from 640px) and at the hero bottom (mix-blend-mode multiply) height: min-height min(68svh, 826px) from 640px; padding 36px top and bottom at 940+, 72 / 88px below 640 layout: 12-column grid, 16px column gap, 40px row gap (32px below 640); eyebrow, H1 and buttons span columns 2-11 at 940+ (full width below) elements: eyebrow: "Global GDP running on Stripe:" 14px/400 #061b31 + a live percentage in 300 #64748d, tabular, min width 12ch; digits roll vertically inside a mask that fades top and bottom 20% H1: clamp(34px, 6lvh, 48px)/1.15/300, max 32ch, text-wrap pretty; lead clause #061b31, continuation #64748d; rendered twice: a background copy and a foreground copy with mix-blend-mode hard-light, so letters over the wave pick up its colors; below 640 only the lead clause is shown (34px/1.03) buttons: button group 8px gap: primary "Get started ›", secondary "Sign up with Google" (Google G icon, bg rgba(255,255,255,0.65)); full width below 640 copy: H1 about 25 words (lead 7 words) motion: wave idles; counter ticks; no text entrance responsive: below 640 the wave fills the top of the page behind the header and hero S3 logo marquee - trust layout: full-width strip between 1px #e5edf5 lines top and bottom, no vertical padding elements: customer logos in their own brand colors, each item 172px wide and 64px tall (72px at 940+), centered; the row scrolls continuously and can be dragged (cursor grab); logo fill changes 300ms cubic-bezier(0.25,1,0.5,1) on hover; 2 logos visible at 390 variant (some locales): a static grid of logos, 3 columns below 940 (cells 64px), 5 columns at 940+ (cells 72px) S4 bento - "Flexible solutions for every business model." section title: heading-xl two tones ("Flexible solutions for every business model." + grey "Grow your business with a comprehensive set of payments and financial tools—designed to work individually or together.") bento: 6 cards, 16px gap: Payments 816x676 + Billing 400x676; Agentic commerce, Issuing ("Create a card issuing program"), Crypto 400x676 each; Connect ("Embed payments in your platform") 1232x450 full width; 2 columns at 640-939, 1 column below (max height 576px) details, hover and dialogs: Recipe bento-dialogs S5 product recommendations (query box) - "Get Stripe product recommendations" loaded client-side after the bento, inside the same framed column layout: centered column max 768px, 24px gap between header and input header: title 26px/29px/300 #061b31 centered (ss01); subtitle 16px/22px/300 #50617a ("Enter your company's URL, or tell us what you sell and how you sell it.") input: box 131px tall, radius 6px, gradient border input (Overview COMPONENTS): textarea 16px/24px/300 with padding 11px 17px and #64748d placeholder; character counter 12px tabular #64748d at the bottom right; submit button 32px square #533afd with a white arrow at the bottom right (disabled: #e9e9e9); a progress ring 20px when running below the input: a row of small example chips and a strength indicator (est); a 12px legal disclaimer with links motion: one shimmer of the gradient border 1.85s after load; hover glow follows the pointer S6 promo banner - Stripe Sessions on demand padding: 80px (56px tablet, 48px mobile) elements: full-width image card (stage photo with a violet-orange light backdrop), headline on the image in white ("Building the economic infrastructure for AI"), light button "Watch now ›", "stripe sessions" logo bottom right; radius about 6px (est) S7 stats band (dark) - "The backbone of global commerce" background: hds dark mode; color theme follows the visitor's local time: pre-dawn #8a35df, sunrise #c42fa5, daytime #0810bf, dusk #2874ad, sunset #4304ea, night #fcfdfe on deep indigo; each theme sets text, border and tab colors; theme changes animate 1.2s cubic-bezier(0.65,0,0.35,1) (off below 940) padding: 80px top (56px below 940), 0 bottom title: heading centered, max 16ch stats: 4 items: "135+ currencies and payment methods supported", "$1.9T in payments volume processed in 2025", "99.999% historical uptime for Stripe services", "200M+ active subscriptions managed on Stripe Billing"; values large and light, descriptions max 180px, centered; on desktop the stats form a 4-tab menu with 40px top padding, and a colored indicator bar slides to the active tab (0.4s cubic-bezier(0.4,0,0.2,1)) graphic: a glowing light-trail globe rising from the bottom of the band, full content width; a thin gradient line across 74% of the width S8 business sizes - "Powering businesses of all sizes." section title: two tones ("Powering businesses of all sizes." + grey "Run your business on a reliable platform that adapts to your needs.") enterprise: subsection header (title "Transform your enterprise with agile financial infrastructure", button "Stripe for enterprises", short text right); customer stories list: 4 rows separated by 1px dashed lines, each row: logo, one-line story ("Hertz unifies commerce with Stripe."), and a 40px square ui button (plus) that expands to "Read the story" (width 0.4s cubic-bezier(0.3,0,0.2,1)); the first row is open by default and shows a wide 6px-radius photo and a data row (countries, locations, products used; 1fr 1fr 2fr at 940+); below 640 rows stack as sticky white cards offset 32px each services: "Realize value faster with dedicated experts": 3 feature details with charm icons (Professional services, Stripe-certified experts, Support plans), each with a link startups: subsection header + button "Stripe for startups"; carousel of tall image cards (6px radius, bold key art with the customer logo) with short captions and "Read ... story ›" links, 2 ui arrow buttons; two program cards (Startups program, Atlas) with gradient art on the right platforms: subsection header + button "Stripe for platforms"; wide product UI graphic on a warm gradient; 3 feature details; centered testimonial (quote 26px/300, 48px round avatar, name and role, link); logo row S9 developers band (dark) - "Reliable, extensible infrastructure for every stack." background: #0d1738 elements: title two tones + buttons "View developer docs ›" (primary) and "View Stripe's GitHub" (secondary); "Connect to existing systems." with an animated diagram of connected systems (min height 386px, 530px below 640); "Scale with confidence." with a second wave canvas (460px tall, 420px below 640); 3 big stats 48px/1/-0.02em (34px below 940) with gradient text fills (orange-pink, pink-violet, violet): "500M+ API requests per day", "10K+ API requests per second", "150K+ transactions per minute"; "Choose an integration path." with 3 graphic cards (no-code payment link, app marketplace logos, code editor) and short texts with links S10 news - "What's happening" header: title + grey subtitle "See the latest from Stripe." left, 2 ui arrow buttons right (hidden below 640) carousel: canvas "squeezy carousel" 1232x460 (870px wide scroll below 940): the current item is a wide image, the next items are squeezed into narrow vertical slices on the right; under it the current item's copy (max width 818px) and a secondary button, swapping with a 120ms fade mobile: card carousel where side cards scale down 5% and fade book of the week: title "Book of the week" + grey "Entrepreneurship starts with ideas."; card on the 12-column grid: image area columns 1-5 with a #f2f7fe background, book cover centered (62.7% width); title, author and text on the right with "Stripe Press" and "Works in Progress" links; a round seal graphic at the top right S11 footer CTA + footer CTA: as Overview (left: "Ready to get started?" + text + Start now / Contact sales; right: "See what you'll pay", "Start building" with charm icons and links) footer: as Overview PAGE COMPONENTS rolling counter: digits in inline-block spans; the next value slides in from above or below inside a vertical mask logo marquee: see S3 query box: see S5 customer story row: see S8 INTERACTIONS header menus: Recipe nav-mega-menu bento cards and dialogs: Recipe bento-dialogs stats tabs: click a stat to switch the graphic and indicator carousels: ui arrow buttons, drag on touch STATES loading: static wave image until the canvas is ready; graphics animate when they enter the viewport; the query box shows a bordered grey placeholder while loading empty, error: query box counter turns #d8351e over the limit SCREENSHOTS - file: stripe_2026_home_d1440_full-us.jpg shows: whole US home at 1440x900, live 2026-09-25, all graphics rendered key values: page 15112px; hero with wave; logo marquee; bento 816/400/1232; query box; Sessions banner; dark stats band with globe; business sizes; dark developers band with wave; news carousel; book of the week; CTA; footer do not copy: logos, photos, product UI, key art - file: stripe_2026_home_m390_full-us-1.jpg shows: US home at 390x844 @1x, live: S1-S8 and the footer (later sections hidden for the capture) - file: stripe_2026_home_m390_full-us-2.jpg shows: US home at 390x844 @1x, live: S9-S11 (earlier sections and the header hidden for the capture) First screens: stripe_2026_home_d1440_top-us.jpg and stripe_2026_home_m390_top-us.jpg on the Overview.