---
title: "BRAND Stripe 2026 · Overview"
url: https://memocore.ai/memos/6ab62874af51aac421da88ac
project: "Brand Styles"
tags: "brand-stripe"
updated_at: "2026-09-25T07:55:23.219Z"
---

# 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)