BRAND Stripe 2026 · Overview

HEADER brand: Stripe; domain: stripe.com; industry: payments, financial infrastructure; design_date: 2026-09 (redesign launched early 2026) captured: live https://stripe.com (United States, English, selected in the footer region switcher) and /billing, 2026-09-25; evidence: measured from the site's design tokens (hds CSS custom properties), stylesheet rules and HTML unless marked scope: the new design system (hds) runs on the home page and /billing; most other pages (/payments, /connect, /pricing, /customers, /startups, /enterprise) still run the previous 2020-2025 system and are not part of this set style_tags: editorial fintech, aurora-gradient, bento-grid viewports: desktop 1440, mobile 390; breakpoints: 640px (tablet), 940px (desktop); layout width steps at 1051px (Guide me item), 1264px and 1300px pages: BRAND Stripe 2026 · Page: home; BRAND Stripe 2026 · Page: product-marketing recipes: BRAND Stripe 2026 · Recipe: hero-wave; BRAND Stripe 2026 · Recipe: nav-mega-menu; BRAND Stripe 2026 · Recipe: bento-dialogs rebuild check: not done RECOGNITION KEYS 1 Everything in one light grotesk at weight 300 (Söhne; Inter Display 300 as substitute), 400 only for buttons, links and labels; never bold. 2 Headlines are long sentences in two tones at the same size: #061b31 lead, #64748d continuation. 3 One accent #533afd for filled buttons and links; hover #4032c8 (fills) and #2e2b8c (text). 4 Buttons are 4px rectangles, 48px tall on desktop, with a chevron that grows a shaft and slides 6px on hover. 5 White page framed by 1px #e5edf5 vertical hairlines around a 1264px column; dashed hairlines between rows. 6 Shadows are soft and blue-tinted (#003770 / #003b89 alphas), never grey. 7 One grainy warm gradient wave in the hero (orange, pink, violet), a second wave in the dark developer band. 8 Dark bands are deep indigo navy #0d1738 with white text and #7389ff links. GUARDRAILS no weight above 400; no pure black text; no grey-only shadows; no borders thicker than 1px (2px only in focus rings); no pill buttons; one filled button color; decorative colors never on controls; no positive letter-spacing on headings; no emoji or mascots; gradients only in the waves, product graphics, bento and input borders on hover and stat numbers; the 2020-2025 skewed gradient band is not part of this design; the stats globe graphic exists only as a subtle background in the stats band TOKENS /* color, light mode (hds-mode--light) */ --color-primary: #533afd; --color-primary-hover: #4032c8; --color-on-primary: #ffffff; --color-link: #533afd; --color-link-hover: #2e2b8c; --color-heading: #061b31; --color-heading-subdued: #64748d; --color-text: #061b31; --color-text-soft: #50617a; --color-text-subdued: #64748d; --color-text-quiet: #7d8ba4; --color-text-disabled: #95a4ba; --color-surface: #ffffff; --color-surface-subdued: #f8fafd; --color-surface-subdued-adaptive: #1658bc08; --color-border: #e5edf5; --color-border-adaptive: #a8c3de4d; --color-border-strong: #d4dee9; --color-action-quiet: #e8e9ff; --color-action-quiet-hover: #d6d9fc; --color-action-subdued: #e2e4ff; --color-action-subdued-hover: #b9b9f9; --color-action-border-quiet: #d6d9fc; --color-action-border-subdued: #b9b9f9; --color-icon-solid: #273951; --color-icon-subdued: #64748d; --color-icon-quiet: #bac8da; --color-success: #00b261; --color-error: #d8351e; /* brand scale */ --brand-25: #f5f5ff; --brand-50: #e8e9ff; --brand-75: #e2e4ff; --brand-100: #d6d9fc; --brand-200: #b9b9f9; --brand-300: #9a9afe; --brand-400: #7f7dfc; --brand-500: #665efd; --brand-600: #533afd; --brand-700: #4032c8; --brand-800: #2e2b8c; --brand-900: #1c1e54; --brand-950: #161741; --brand-975: #0f1137; /* neutral scale */ --neutral-25: #f8fafd; --neutral-50: #e5edf5; --neutral-100: #d4dee9; --neutral-200: #bac8da; --neutral-300: #95a4ba; --neutral-400: #7d8ba4; --neutral-500: #64748d; --neutral-600: #50617a; --neutral-700: #3c4f69; --neutral-800: #273951; --neutral-900: #1a2c44; --neutral-990: #061b31; /* decorative, never on controls */ --orange-350: #ff6118; --lemon-200: #f9b900; --magenta-350: #f44bcc; --ruby-400: #ea2261; --magenta-50: #ffe6f5; --orange-50: #ffe5da; /* dark mode (hds-mode--dark), only changed roles */ --dark-surface: #0d1738; --dark-surface-subdued: #122054; --dark-border: #182659; --dark-heading: #ffffff; --dark-heading-subdued: #839bc8; --dark-text-soft: #a3b5d6; --dark-text-quiet: #6480b2; --dark-link: #7389ff; --dark-link-hover: #a8bfff; --dark-primary-hover: #5d64fe; /* font */ --font: "sohne-var", "SF Pro Display", sans-serif; --font-mono: "SourceCodePro", "SFMono-Regular", monospace; --weight-normal: 300; --weight-bold: 400; /* type scale: size/line-height/weight/tracking at 940+; comments: 640-939 | below 640 */ --type-hero: clamp(34px, 6lvh, 48px)/1.15/300; /* 640-939: max 40px | below 640: 34px/1.03; max-width 32ch */ --type-heading-xxl: 56px/1.03/300/-0.025em; /* 48px/1.03/-0.02em | 34px/1.03/-0.02em */ --type-heading-xl: 48px/1.03/300/-0.02em; /* 34px/1.05/-0.02em | 28px/1.07/-0.01em */ --type-heading-hero-lg: 40px/1.2/300/-0.02em; /* 40px/1.12 | 28px/1.1/-0.01em */ --type-heading-lg: 32px/1.1/300/-0.02em; /* 28px/1.07/-0.01em | 22px/1.2/-0.01em */ --type-heading-md: 26px/1.12/300/-0.01em; /* 22px/1.1 | 20px/1.2 */ --type-heading-sm: 22px/1.1/300/-0.01em; /* 20px/1.12 | 18px/1.25/0 */ --type-heading-xs: 16px/1.2/400/0; --type-heading-xxs: 14px/1.2/400/0; --type-text-xl: 20px/1.4/300/-0.01em; /* 18px/1.4/0 | 18px/1.4/0 */ --type-text-lg: 18px/1.4/300; /* 18px | 16px/1.35 */ --type-text-md: 16px/1.4/300; --type-text-sm: 14px/1.4/300; --type-text-xs: 14px/1.4/300; /* 12px/1.45 below 940 */ --type-text-xxs: 12px/1.45/300; --type-text-xxl: 48px/1/300/-0.02em; /* 34px/1.03 | 28px/1.07 */ --type-quote: 26px/1.12/300/-0.01em; /* 18px/1.4 below 940 */ --type-button: 16px/1/400/0; --type-nav: 14px/400; --type-input: 16px/1/300; --type-label: 14px/1.3/400; /* space: 4px base */ --space: 0 1 2 4 6 8 12 16 20 24 28 32 36 40 44 48 56 64 72 80 88 96 104 112 120 128 ... 200; --content-max: 1264px; /* frame with borders 1266px */ --columns: 12; /* 8 at 640-939, 4 below 640 */ --gutter: 16px; --content-margin: 16px; --page-margin: 16px; /* 0 below 640 */ --section-pad: 96px; /* 64px at 640-939, 56px below 640; many sections use 80 / 56 / 48px */ --section-row-gap-lg: 48px; --stack-gap-xl: 64px; /* 40px below 640 */ --button-height: 48px; /* 44px below 940 */ /* shape */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 16px; --radius-xl: 32px; --radius-round: 99999px; --radius-button: 4px; /* compact buttons 2px */ --radius-input: 4px; --radius-card: 6px; --radius-dialog: 16px; --border: 1px solid #e5edf5; --border-dashed: 1px dashed #e5edf5; /* depth, all blue-tinted */ --shadow-xs: 0 2px 10px #0037700f, 0 1px 4px #003b890a; --shadow-sm: 0 5px 14px #00377014, 0 2px 8px #003b890d; --shadow-md: 0 6px 22px #0037701a, 0 4px 8px #003b8905; --shadow-lg: 0 15px 40px -2px #0037701a, 0 5px 20px -2px #003b890a; --shadow-xl: 0 20px 80px -16px #00377024, 0 10px 60px -16px #003b890f; --shadow-popover: 0 18px 36px -18px rgba(0,0,0,0.1), 0 30px 45px -30px rgba(50,50,93,0.25); /* motion */ --ease: cubic-bezier(0.25,1,0.5,1); --dur: 300ms; /* buttons, links, inputs, icons */ --ease-nav: cubic-bezier(0.45,0.05,0.55,0.95); --dur-nav: 240ms; --dur-nav-slow: 300ms; --ease-card: cubic-bezier(0.165,0.84,0.44,1); --dur-card: 800ms; --ease-emphasis: cubic-bezier(0.16,1,0.3,1); /* focus */ --focus-outline: 3px solid #5452fbbf; --focus-offset: 3px; /* 1px on buttons */ --input-focus: border #665efd + 3px outline #a3a7ff40 dark_mode: none as a site mode; dark sections use hds-mode--dark (values above) FONTS all text: Söhne variable (sohne-var, Klim Type Foundry, commercial), weights 300 (normal) and 400 (bold role); ss01 on; tabular figures for numbers (tabular-nums). Japanese pages render buttons at 600 with wght axis 400. Alternative: Inter Display (OFL) at 300 and 400, tracking about 0.01em tighter; do not enable Inter ss01. Second alternative: Geist 300. mono: Source Code Pro (fallback SFMono-Regular). TYPOGRAPHY RULES Weight 300 for all headings and body; 400 for buttons, links, nav, labels, eyebrows. Section titles: one paragraph in two tones: a short statement in --color-heading followed by a longer continuation in --color-heading-subdued, same size (heading-xl on sections, heading-lg on subsections). Hero H1: same two-tone pattern, fluid size clamp(34px, 6lvh, 48px), max 32ch, text-wrap pretty. Sentence case everywhere; no caps labels. Numbers: tabular; big stats 48px/1 with gradient fills on dark. Title widths: 544 / 648 / 752 / 856 / 920px for 5-9 column titles. COLOR RULES White page with navy ink and slate secondary text; #533afd under 3% of the area (est). Two dark bands on home (stats, developers) in #0d1738 with white headings, #839bc8 subdued text, #7389ff links. Decorative colors appear only inside graphics, waves, the mega-menu group underlines, hover glows and stat gradients. Overlays behind dialogs are light: rgb(229,237,245) at 0.9 (0.7 on some browsers) with soft colored orbs. LAYOUT container: content 1264px (frame 1266px incl. borders), centered; side margin 16px; gutter 16px; 12 / 8 / 4 columns frame: every section container has 1px #e5edf5 borders left and right from 640px up, forming continuous vertical hairlines; section header dividers run full width; many rows are separated by 1px dashed #e5edf5 section rhythm: 96 / 64 / 56px default; hero-adjacent and feature sections 80 / 56 / 48px; row gap inside sections 48-64px section header: title spanning 5-9 columns on the left, optional button group or short text on the right (grid on 12 columns from 940px) density: comfortable; alignment: left (hero and product heroes centered on product pages); composition: editorial columns, bento, list rows SHAPE AND DEPTH radius: buttons and inputs 4px; small cards, bento cards, images, query box 6px; dialogs and large cards 16px; big panels 32px borders: 1px #e5edf5 everywhere; dashed variant for row separators; hover borders in brand tints shadows: xs on small UI fragments; sm/md on floating product UI; lg/xl on hero graphics; popover shadow on menus materials: none; the header is transparent until hovered textures: grain only inside the waves COMPONENTS button-primary: bg #533afd, text white 16px/1/400, radius 4px, padding 15.5px / 16.5px vertical (13.5 / 14.5px below 640), side padding about 24px (est), gap 8px to the icon, height 48px; icon: chevron that on hover grows a 6px shaft into an arrow and slides 6px right hover: bg #4032c8; background-color, color, outline-color and border 300ms cubic-bezier(0.25,1,0.5,1) focus-visible: 3px solid #5452fbbf, 1px offset disabled: bg #a8c3de4d, text #95a4ba button-secondary: transparent (hero variant rgba(255,255,255,0.65)), text #533afd, 1px #b9b9f9 border; hover: text and border #2e2b8c (border #4032c8 when not focused) button-secondary-on-quiet: border #d6d9fc button-compact: padding 11.5 / 12.5px vertical, height 40px, radius 2px-4px, 14px text in the header button-transparent: no bg, text #533afd, hover #2e2b8c button-ui (icon button): 40px square, radius 4px, bg #e8e9ff, hover #d6d9fc, icon #533afd; used for carousel arrows, dialog close, accordion toggles, mobile menu toggle button group: flex, 8px gap; buttons stretch full width below 640px text link: 400 weight, #533afd, hover #2e2b8c, 300ms; focus 3px outline with 3px offset; optional arrow icon as in buttons; secondary link: inherits color, underline 2px offset input: height 48px, radius 4px, 1px #d4dee9bf border, bg #ffffff40, text 16px/300 #273951, padding 15.5 / 16.5px and 16px sides; placeholder #7d8ba4; hover border #b9b9f9; focus border #665efd + 3px #a3a7ff40 outline; error border #d8351e with #ffafa24d focus ring; 300ms transitions textarea: min height 96px, radius 4px, padding 12px 16px gradient border input (query box): 1px border drawn as a #d4dee9 background with 6px radius; hover: a radial gradient (#533afd 20% -> rgba(244,75,204,0.75) 50% -> transparent) follows the pointer inside the border (opacity 300ms, move 200ms ease-out); focus: border #9a9afe + 2px #533afd40 outline, 200ms cubic-bezier(0,0,0.2,1); one shimmer pass 1.85s after load (1s) charm icon: 40px square, radius 4px, 1px #d6d9fc border, brand-colored icon inside card (bento, stories, images): radius 6px, 1px #e5edf5 border drawn as a 1px background inset, white inner; no shadow at rest dialog: Recipe bento-dialogs accordion: rows separated by 1px lines; summary with a 40px ui button showing a plus that turns into a cross; content opens with height transition carousel: header row with title and two ui buttons (prev, next), 8px apart; cards 6px radius stats: value + description centered, description max 180px GLOBAL CHROME header: 76px tall, max 1349px wide, padding 16px 24px, items 28px apart; logo; menu triggers Products, Solutions, Developers, Resources (14px/400 #061b31 with small chevrons that rotate into an up chevron when open), Pricing link; from 1051px a "Guide me" item (sparkle icon + label, 14px/400) after a 1px x 19px vertical divider 20px to its left; right: "Sign in" (compact outline) and "Contact sales ›" (compact primary, 40px, padding 0 20px) at rest: transparent; on hover after 0.1s a white rounded card (radius 6px) fades in behind the header, inset 6px vertically, shadow 0 30px 60px -50px #0000001a, 0 30px 60px -10px #32325d40, 240ms cubic-bezier(0.45,0.05,0.55,0.95) Sign in at rest: transparent with 1px white border, its label cut out so the wave shows through; on header hover: white bg, #533afd text not sticky; menus: Recipe nav-mega-menu mobile header (below 940): logo left, 40px square menu toggle on the right (white with a #533afd three-line icon over the wave; bg #e8e9ff with a cross when open); opens a full-screen white sheet: items 18px/300 ink, padding 16px 0, separated by 1px dashed #e5edf5, chevrons #533afd on items with submenus; a bordered callout card "See all products"; Start now and Contact sales pinned at the bottom in an 80px bar; submenus slide in from 20% right footer CTA band: 2 halves on the 12-col grid: left headline ("Ready to get started?") + text + Start now / Contact sales; right two feature details with charm icons ("See what you'll pay", "Start building") and links; dashed border below footer: 4 quarter columns separated by dashed vertical hairlines, 64px vertical padding; group titles 14px/400 ink; links 16px/1.25/300 #50617a, hover #061b31, 4px apart; bottom row: region and language switcher (flag + "United States (English)") left, copyright, logo glyph right cookie: "Cookie settings" link in the footer; a small toast suggests the local site to visitors from other countries (third party to the design) IMAGERY AND ICONS hero: live WebGL gradient wave (Recipe hero-wave) product graphics: DOM-built fragments of Stripe UI (checkout, plans, charts, invoices, cards, maps) with blue-tinted shadows on warm gradient backgrounds photography: editorial aerial and product photos in customer stories (6px radius), stage photos (Sessions), bold graphic key art in startup cards logos: customer logos in their own colors in a single-row marquee (items 172px wide, 64px tall; 72px from 940px) icons: 16px line icons in #533afd inside charm squares; checkmark bullets; ui buttons with plus, cross, chevrons; sparkle icon for Guide me data art: gradient number fills; a light-trail globe graphic in the stats band MOTION intensity: functional with signature canvas effects hover policy: color changes 300ms cubic-bezier(0.25,1,0.5,1); arrow icon grows and slides 6px; bento cards and the query box show a pointer-following gradient border; no image zoom, no bounce scroll reveal: graphics animate when they enter the viewport (lazy-animation); no text reveals (est) signature motion: hero wave (Recipe hero-wave); header card and morphing mega-menu (Recipe nav-mega-menu); bento cards and dialogs (Recipe bento-dialogs); stats band recoloring by time of day (Page: home S7); live GDP counter rolling digits (Page: home S2) reduced motion: waves static, transitions off, bento and stats transitions 0s RESPONSIVE below 1051: no Guide me item below 940: hamburger sheet; section header stacks; columns 8; buttons 44px; stats band transitions off below 640: 4 columns; page margin 0 with 16px content margin; no vertical hairlines; button groups stretch; section padding 56px (48px on many); hero H1 34px/1.03 without the grey continuation; dialogs become bottom sheets home height: 15112px at 1440, 20361px at 390 CONTENT AND VOICE headline style: full declarative sentences, first clause as the claim, second clause (grey) as the explanation; 10-30 words tone: precise, confident, calm CTA labels: "Get started ›", "Start now ›", "Contact sales ›", "Sign up with Google", "Read the story ›", "Watch now ›", "View developer docs ›" numbers: exact and big ("$1.9T", "99.999%", "135+") SUBSTITUTIONS Inter Display 300/400 instead of Söhne; a blurred multi-stop ribbon image with grain instead of the WebGL wave; placeholder UI fragments; placeholder logos; no Stripe wordmark or parallelogram. TECH Next.js (mkt-ssr-statics on b.stripecdn.com); in-house design system "hds" with CSS custom properties and cascade layers (@layer base, app); some sections and their stylesheets load client-side; WebGL canvases for waves and the news carousel; CMS images from images.stripeassets.com SCREENSHOTS - file: stripe_2026_home_d1440_top-us.jpg shows: US home first screen at 1440x900, live, 2026-09-25 key values: header 76px transparent with Guide me; counter 1.72...%; H1 48px/300 two tones #061b31 / #64748d with hard-light overlap on the wave; buttons 48px radius 4px; logo marquee 72px in brand colors; vertical hairlines at the content frame do not copy: logos, wave rendering - file: stripe_2026_home_m390_top-us.jpg shows: US home first screen at 390x844 @2x, live: menu toggle over the wave, H1 34px lead clause only, stacked full-width buttons, logo marquee, start of the bento - file: stripe_2026_overview_d1440_states.png shows: hero buttons default; primary hover (bg #4032c8, arrow); secondary hover (#2e2b8c); primary keyboard focus (3px #5452fbbf ring) - file: stripe_2026_overview_m390_menu-open.jpg shows: mobile menu sheet: 18px items with dashed dividers, callout card, pinned Start now / Contact sales - file: stripe_2026_home_d1536_default_top_light.jpg shows: home first screen at 1536 with the live wave and a 5-column logo grid (Japanese locale variant)