---
version: alpha
name: Stripe landing-page reference
description: A financial-infrastructure landing page with an expansive orange-pink-violet
  ribbon, lightweight editorial typography, detailed product mosaics, ruled grids
  and a contrasting midnight-blue developer section. Captured in its German locale.
colors:
  primary: '#533AFD'
  surface: '#FFFFFF'
  on-surface: '#061B31'
  secondary: '#64748D'
  dark-surface: '#0D1738'
typography:
  headline-display:
    fontFamily: sohne-var
    fontSize: 44px
    fontWeight: 300
    lineHeight: 50.6px
    letterSpacing: -0.88px
  headline-md:
    fontFamily: sohne-var
    fontSize: 44px
    fontWeight: 300
    lineHeight: 50.6px
    letterSpacing: -0.88px
  headline-mobile:
    fontFamily: sohne-var
    fontSize: 34px
    fontWeight: 300
    lineHeight: 35.02px
    letterSpacing: -0.34px
  body-md:
    fontFamily: sohne-var
    fontSize: 32px
    fontWeight: 300
    lineHeight: 35.2px
    letterSpacing: -0.64px
---

# Stripe landing-page reference

## Overview

Observed at https://stripe.com/de on 2026-09-18 at 1440px desktop and 390px mobile widths. A financial-infrastructure landing page with an expansive orange-pink-violet ribbon, lightweight editorial typography, detailed product mosaics, ruled grids and a contrasting midnight-blue developer section. Captured in its German locale. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Preserve the light-weight type and fine rules beside expressive color.

## Typography

The visible display sample uses sohne-var, 44px size, 50.6px line height and weight 300. Tracking is -0.88px. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Use a long editorial sequence: gradient hero and customer logos, a product mosaic, scale statistics, case studies, modular financial services, a dark developer chapter, resource cards, final actions and dense footer. At 1440px the hero headline occupies a measured 1008px region beginning at x=208; section content extends further toward the edges. Fine vertical rules anchor the changing grids.

At 390px the header collapses to a menu, the hero simplifies to a short promise, and the two hero actions stack at nearly full width. The sampled hero text becomes 34px with roughly 35px line height and 16px side gutters. Locale is German; do not silently substitute English copy when matching this capture. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

Use layered miniature product windows and subtle panel shadows against largely flat light backgrounds. The dark developer chapter uses tonal contrast for depth. The ribbon is rendered artwork; its gradient stops and animation timing were not measured.

## Shapes

Keep product interface panels rectangular with gentle rounding, compact rectangular buttons and thin grid dividers. The enormous curved color ribbon supplies the organic counterpoint; it should not replace the grid. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

Pair one saturated primary action with a quieter secondary sign-in action. Mix product demonstrations, figures with small labels, customer stories, developer diagrams and compact resource teasers. The hero uses painted multi-color text layers; a single sampled H1 foreground is not the rendered text palette.

## Do's and Don'ts

Preserve the light-weight type and fine rules beside expressive color. Keep miniature product screens legible. Do not turn every section into a gradient or infer a single solid hero-text color from the layered DOM.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.