--- title: "BRAND Stripe 2026 · Page: product-marketing" url: https://memocore.ai/memos/6ab61004af51aac421da886a project: "Brand Styles" tags: "brand-stripe" updated_at: "2026-09-25T07:54:09.756Z" --- # BRAND Stripe 2026 · Page: product-marketing HEADER brand: Stripe; design_date: 2026-09; page_type: product-marketing; variants: none yet (other product pages still use the previous design) example_urls: https://stripe.com/billing (live /en-jp/billing 2026-09-25, English copy); evidence: measured from HTML and stylesheets unless marked purpose: explain one product, show it working, and send users to start or contact sales skeleton: content 1264px framed by vertical hairlines; 13 sections; page 10535px at 1440 (content ends at 9093px, then footnotes and footer); 13351px at 390 without footnotes; sidebar: none overrides: header as Overview plus a product sub-nav SECTIONS S1 product sub-nav + hero sub-nav: product name with icon on the left ("Billing"), page links on the right (Overview, feature pages, Pricing, Docs) 14px; dropdown items open drawers (0.36s cubic-bezier(0.65,0.05,0.36,1)); active link #061b31, others #64748d (est); on mobile a static sub-nav bar hero: padding 40px top at 940+ (32px tablet, 24px mobile), 0 bottom; title centered, max 42ch, heading-xl two tones ("Monetize faster with Stripe Billing." + grey continuation), left aligned below 640; buttons centered: "Start now ›" primary + "Contact sales" secondary wave: gradient wave centered behind the hero graphic (1264x772, 639px wide below 640) graphic: large animated product UI below the buttons: rounded app window with pricing plan cards, usage-based plans and an invoice that rise in (from 30-40px below, fading in); plan cards with green badges (#0aad0a on 10% green), lavender pill CTAs (#e6daff, text #6d2bf0), 12px UI text; mobile uses a separate 368x516 animation S2 logo marquee as home S3, logos of billing customers S3 manifesto container max 1024px centered; eyebrow with icon ("The opportunity"); heading max 48ch; body in 2 columns (1 below 640), 32px gap, text-sm/text-md 300 #50617a S4 feature bento - "One platform to price, meter, bill, invoice, and grow." section title two tones cards: 3 large horizontal cards stacked (Subscriptions, Usage-based billing, Invoicing), each with a gradient border card style (1px #e5edf5, 6px radius), text left (title heading-sm, 2-3 lines body, secondary button "Explore ... ›") and a product UI graphic right on a light gradient; graphics offset toward the bottom right S5 feature accordion - "An integrated billing platform for your full quote-to-revenue cycle" section header: title left, short text right accordion: rows with a charm icon, title (heading-xs) and a 40px ui button with a plus that turns into a cross; the open row shows a wide gradient panel with an animated checkout or pricing graphic and 3 columns of feature text with links; closed rows are single lines separated by 1px lines S6 stats - "Stripe Billing scales with you." stats block: 4 stats in a row (2x2 below 940): big light numbers (text-xxl 48px/1/300) + short grey descriptions ("$8.2B", "$14", "350,000+", "99.999%") S7 customer stories carousel - "Trusted by industry leaders." header with title + 2 ui arrow buttons; 3 visible case study cards: square image with logo (6px radius), 1-2 line story, "Read the story ›" link S8 analyst recognition - "Recognized by top analysts as a leader in billing" 2 chippy cards side by side (1 column below 940), 16px column gap, 24px row gap: bordered cards with the analyst logo tile on the left and a one-line claim with a link S9 feature lists - "Key Stripe Billing features and platform capabilities" 4 columns on the grid (Sell, Bill, Collect, Report), each with 1px left and bottom borders, top border across; items in lists 12px apart with small check or dot icons; "Preview" badges (1px border, 1px / 8px padding); subgroups "Powered by Metronome" 32px below S10 ecosystem carousel - "Optimize every step of your revenue cycle with Stripe and Metronome" carousel of feature cards: width clamp(240px, 27.53cqi, 348px) (280-348px at 640-1023, full width minus 40px below 640), 16px gap, snap on mobile; each card: product UI graphic on a soft gradient (6px radius), title and text, link S11 FAQ + resources FAQ: title "Frequently asked questions" + grey subtitle on the left, accordion on the right with plus/cross ui buttons; first item open resources: "More resources" with 3 cards (tag, title, text, link) S12 footer CTA - "Always know what you pay" as Overview footer CTA (Start now / Contact sales + two feature details) S13 footnotes + footer footnotes in 12px grey, then the footer as Overview PAGE COMPONENTS product sub-nav: see S1 feature bento card: see S4 chippy card: see S8 feature list column: see S9 INTERACTIONS header menus: Recipe nav-mega-menu hero graphic: plays a sequence of UI cards rising in; not measured frame by frame accordions: plus rotates to a cross; panel height animates carousels: ui arrow buttons, snap scrolling on mobile STATES loading: graphics animate when they enter the viewport empty, error: n/a SCREENSHOTS - file: stripe_2026_product-marketing_d1440_full.jpg shows: /billing at 1440x900 from the sub-nav to the footer CTA (footnotes and footer cut off); live /en-jp page 2026-09-25, English copy, yen prices in graphics key values: centered hero heading-xl; hero graphic with wave; 3 bento rows; accordion with gradient panel; 4 stats; 3 story cards; 4 feature list columns do not copy: logos, product UI, photos - file: stripe_2026_product-marketing_m390_full.jpg shows: /billing at 390x844 @1x, footnotes and footer hidden for the capture