Stripe Design System

Overview

Stripe's visual identity is a masterclass in restrained confidence: a pristine {colors.canvas} white field that lets content breathe, anchored by the brand's signature violet ({colors.primary} — #533afd) applied surgically—never wallpapered. The system trusts ultra-light type weights (consistently font-weight: 300 across display through body scales) to carry hierarchy, reserving bolder treatments only for small UI labels and buttons. This creates a distinctive editorial voice that feels simultaneously technical and human, fintech-grade without being cold.

The dominant mood is optimistic precision. Headlines deploy mixed-color inline spans where key value propositions—"your revenue," "services," "from"—shift into {colors.primary}, creating rhythm within otherwise monochrome blocks of {colors.ink} or {colors.muted-soft} text. The hero section's gradient wave backdrop (orange-to-pink-to-violet diagonal sweep) injects energy without competing with typographic clarity; it sits behind the content layer, never overlaid on it.

Shape language leans toward measured softness: corners hover between {rounded.sm} (4px) for compact UI elements and {rounded.lg} (8px) for cards and containers, with {rounded.pill} reserved exclusively for avatar circles and tag-like badges. Buttons sit firmly in the {rounded.md} (5–6px) zone—a sweet spot that feels contemporary without drifting into the over-rounded territory common in SaaS circa-2020.

Sub-systems observed: a marketing dialect (this landing page, pricing, product pages) characterized by large display type and generous vertical rhythm; a dashboard/docs dialect (inferred from component patterns) using denser grids, smaller type tokens, and code-facing surfaces. The navigation system itself is a micro-dialect: transparent-background menu triggers with {colors.nav-ink} text, minimal padding, and chevron indicators for dropdown disclosure.

Key Characteristics:

• Canvas is pure {colors.canvas} white—no off-white warmth, no cool tints. Zero tolerance for cream.
• Brand voltage lives in {colors.primary} violet applied to CTAs ({component.cta-primary}), headline accent spans, and active states only.
• All display and heading typography uses font-weight: 300—never bold, never 400 above the body-sm scale.
• Spacing follows an additive scale rooted in {spacing.lg} (16px) with generous {spacing.section-hero} (71px) vertical breathing room in hero contexts.
• Corner radii cluster tightly: {rounded.sm} for inputs/tags, {rounded.md} for buttons, {rounded.lg} for cards.
• The hero backdrop uses a multi-stop gradient (orange → pink → violet) treated as atmospheric depth, not a content layer.
• Link color defaults to traditional web blue {colors.link} (#0000ee)—deliberately distinct from brand violet.
• Shadows are neutral-toned ({extensions.shadows.md}) and sparingly deployed—cards elevate subtly, modals lift decisively.
• The sohne-var typeface family carries every role; no serif accents, no monospace except in code blocks (not visible here).

Colors

Brand & Accent

• Primary ({colors.primary} — #533afd): The signature Stripe violet. Used on {component.cta-primary} buttons, {component.contact-sales-button} CTAs, headline accent spans in the hero, active/focus ring states, and selected indicators throughout the interface.
• Primary Active ({colors.primary-active} — #4530e0): Darker violet for pressed/active states on primary buttons ({component.cta-primary-active}, {component.contact-sales-button-active`}). Approximately 10% darker than base primary.
• Primary Hover ({colors.primary-hover} — #6350fe): Lighter violet for hover states on interactive elements using the primary brand color.

Surface

• Canvas ({colors.canvas} — #ffffff): The foundational page background. Pure white across all marketing surfaces—hero bands, footer tops, card backgrounds when flat. Non-negotiable purity.
• Surface Soft ({colors.surface-soft} — #e5edf5): Cool pale blue-gray used for card backgrounds ({component.card-surface}), subtle section dividers, and input field backgrounds in form contexts.
• Surface Subtle ({colors.surface-subtle} — #f8fafd): Near-white with faint blue cast. Used for footer backgrounds ({component.footer}), alternating band sections, and very lightly elevated containers.
• Surface Lavender ({colors.surface-lavender} — #e2e4ff): Very pale violet tint. Applied to hover states on ghost buttons ({component.cta-secondary-hover}), selection highlights, and notification backgrounds.
• Surface Lavender Light ({colors.surface-lavender-light} — #e8e9ff): Even paler lavender variant. Used for badge/tag backgrounds and tertiary surface elevations.
• Surface Blue Tint ({colors.surface-blue-tint} — #e3ecf7): Pale sky blue. Appears in bordered container backgrounds and subtle divider fills.
• Surface Warm ({colors.surface-warm} — #ffe0d1): Soft peach-orange tint. Reserved for warm accent surfaces (warning-adjacent contexts, highlight callouts).
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface sitting atop shadow elevation. Used for {component.card-elevated} components, dropdowns, modals, and tooltips that float above the canvas via {extensions.shadows.md}.
• Surface Dark Overlay ({colors.surface-dark-overlay} — rgba(48, 37, 84, 0.19)): Semi-transparent dark violet overlay. Used for modal backdrops, dropdown scrim layers, and focus-trap dimming.

Text / Ink

• Ink ({colors.ink} — #000000): Pure black for maximum contrast. Used on the stripe logo wordmark ({component.logo-wordmark}), primary headlines ({component.hero-headline}), and any text requiring absolute visual weight.
• Body ({colors.body} — #533afd): Violet-colored body text token (unusual assignment—appears in specific marketing copy contexts where brand color carries semantic meaning).
• Nav Ink ({colors.nav-ink} — #061b31): Very dark navy-blue, nearly black. The standard text color for navigation items ({component.nav-menu-item}), {component.sign-in-button} text, and UI labels in header-level contexts.
• Muted ({colors.muted} — #50617a): Mid-tone slate blue. Default body copy color for paragraphs, descriptions, and supporting text that shouldn't compete with headlines.
• Muted Soft ({colors.muted-soft} — #64748d): Lighter slate. Used for stat labels ({component.hero-stat-label}), timestamps, metadata, placeholder text, and truly subordinate information.
• Muted Dark ({colors.muted-dark} — #3c4f69): Darker slate than base muted. Applied to secondary headings, table headers, and emphasized-but-not-primary text runs.
• Text Secondary ({colors.text-secondary} — #273951): Deep navy. Tertiary heading color and card title fallback.
• Text Tertiary ({colors.text-tertiary} — #1a2c44): Dark navy-blue. Used for {component.sign-in-button} text and subdued link states.
• On Primary ({colors.on-primary} — #ffffff): Pure white text on violet backgrounds. Mandatory for all {colors.primary}-backgrounded elements to meet WCAG AA (contrast ratio ~5.2:1 against #533afd).
• On Dark ({colors.on-dark} — #ffffff): White text for any dark-surface context (modals, dark mode surfaces, toast notifications).

Hairlines & Borders

• Hairline ({colors.hairline} — #e5edf5): Matches {colors.surface-soft}. Used for input borders, card outlines, dividers between list items, and subtle separator lines.
• Border Soft ({colors.border-soft} — #e3ecf7): Slightly warmer/blue-tinted hairline variant. Applied to focused input borders, active container outlines, and highlighted dividers.

Semantic

• Link ({colors.link} — #0000ee): Standard web blue for hyperlinks in body text, documentation references, and external navigation cues. Deliberately non-violet to maintain brand color exclusivity.
• Link Active ({colors.link-active} — #0000cc): Darker blue for visited links or pressed link states.
• Error ({colors.error} — #c13515): Red-orange for validation errors, destructive action confirmations, and system alerts.
• Success ({colors.success} — #006400): Dark green for confirmation states, success toasts, and completed action indicators.
• Warning ({colors.warning} — #b8860b): Golden amber for caution states, deprecation notices, and attention-required callouts.
• Info ({colors.info} — #1b61c9): Blue for informational toasts, tips, and non-critical guidance.

Typography

Font Family

The entire system runs on Söhne Var (sohne-var), Stripe's proprietary geometric-humanist typeface, with "SF Pro Display" as the platform fallback and sans-serif as the final catch-all. Söhne occupies both display and body roles—there is no serif counterpoint, no mono accent font in marketing contexts (monospace would appear in code blocks within developer docs, not captured here). The typeface's character is defined by its open apertures, slightly condensed proportions, and exceptional legibility at light weights—which is precisely why Stripe can safely deploy font-weight: 300 at 48px+ sizes without sacrificing readability.

The fallback stack ensures that on systems lacking Söhne (essentially everything outside Stripe's own infrastructure), SF Pro Display (macOS/iOS native) provides the closest match in weight range, letterform geometry, and optical sizing behavior.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 300 | 1.15 | -0.02em | Hero headlines on wide viewports, campaign titles | | {typography.display-lg} | 48px | 300 | 1.15 | -0.02em | Primary hero headline ({component.hero-headline}) | | {typography.display-md} | 40px | 300 | 1.15 | -0.02em | Section headlines on dense pages | | {typography.title-lg} | 36px | 300 | 1.1 | -0.02em | Feature section headings | | {typography.title-md} | 32px | 300 | 1.1 | -0.02em | Section headings ({component.section-heading}), h2 equivalents | | {typography.title-sm} | 26px | 300 | 1.12 | -0.01em | Card titles, subsection headings | | {typography.heading-md} | 20px | 500 | 1.4 | 0 | Navigation logo ({component.logo-wordmark}), prominent labels | | {typography.heading-sm} | 16px | 400 | 1.4 | 0 | h4-level headings, card metadata labels | | {typography.body-lg} | 20px | 300 | 1.5 | -0.01em | Lead paragraphs, feature descriptions | | {typography.body-md} | 32px | 300 | 1.1 | -0.02em | Hero subheadline ({component.hero-subheadline}) | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Standard body copy, card content | | {typography.caption} | 14px | 400 | 1.43 | 0 | Captions, footnotes, timestamp metadata | | {typography.caption-sm} | 13px | 400 | 1.38 | 0 | Legal disclaimers, fine print | | {typography.label-md} | 14px | 500 | 1.43 | 0 | Button text, tags, form labels | | {typography.button} | 14px | 500 | 1.25 | 0 | CTA button text, nav utility buttons | | {typography.nav-link} | 14px | 400 | 1.43 | 0 | Top navigation menu items ({component.nav-menu-item}) | | {typography.stat-label} | 14px | 400 | 1.43 | 0 | Statistical/metric labels ({component.hero-stat-label}) |

Principles

The typography system's defining move is its relentless commitment to weight 300 for everything larger than 16px. At display sizes (48px, 56px), a 300-weight Söhne reads with the presence other systems achieve at 500 or 600—because Söhne's light cut was optically designed for this exact usage. This creates a "floating" quality to headlines: they feel substantial but effortless, technical but approachable. The moment you see a bold headline on a Stripe page, something is either wrong or it's under 20px (where {typography.label-md} at weight 500 takes over).

Hierarchy is carried primarily by size differential, secondarily by color contrast. A {typography.display-lg} headline in {colors.ink} towers visually over its {typography.body-md} subheadline in {colors.muted-soft}—the 16px size gap plus the ink-vs-muted color shift creates roughly 4x perceptual weight difference. Inline color switching (the violet accent words in headlines) adds a third hierarchy lever: it directs the eye to specific value propositions without breaking reading flow.

Letter-spacing is consistently negative at display scales (-0.02em ≈ -1px at 48px), tightening the apparently spacious light-weight glyphs so they don't feel disconnected. This negative tracking disappears entirely below 26px, where default spacing maintains readability in denser text blocks.

There are no uppercase transformations in the system (except possibly in micro-labels not visible here). No .uppercase class, no text-transform: uppercase. Brand voice is sentence-case always, even on buttons ("Get started" not "GET STARTED"). This reinforces the conversational, human tone.

Note on Font Substitutes

Söhne Var is proprietary to Stripe and not publicly available. For reimplementation purposes, the closest Google Fonts equivalent is Inter (particularly its variable font implementation with weight axis access down to 200–300). Inter shares Söhne's geometric skeleton, tall x-height, and excellent light-weight rendering. Alternative fallbacks: DM Sans (more geometric, slightly wider), Plus Jakarta Sans (similar warmth). Define CSS variables mapping the Söhné role names to your substitute's font-family declaration:

:root {
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
}

All {typography.*} token fontFamily values should resolve to var(--font-sans) in your implementation stylesheet.

Layout

Spacing System

• Base unit: 4px (with 2px atomic for edge cases).

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, tight icon gaps, pixel-perfect alignment corrections.
  • {spacing.xs} (4px): Icon-text gaps inside buttons, badge internal padding, checkbox margins.
  • {spacing.sm} (6px): Compact element spacing, inline item gaps in toolbars.
  • {spacing.base-sm} (8px): Small stack gaps, related-element grouping.
  • {spacing.md} (10px): Button padding vertical, input padding vertical, nav-item padding.
  • {spacing.base-md} (12px): Form field gaps, list item padding.
  • {spacing.lg} (16px): Card internal padding baseline, grid gutters, paragraph margins.
  • {spacing.xl} (24px): Section-internal element spacing, card-to-card gaps, block margins.
  • {spacing.xxl} (32px): Large block separation, hero-internal spacing tiers.
  • {spacing.section-internal} (40px): Between major content zones within a section.
  • {spacing.section} (64px): Vertical padding between sections, major band breaks.
  • {spacing.section-hero} (71px): Hero-specific top/bottom padding—the most generous vertical rhythm in the system.
  • {spacing.nav-h} (64px): Fixed navigation bar height.

• Section padding (vertical): {spacing.section-hero} (71px) in hero contexts; {spacing.section} (64px) in standard sections. Both provide substantial breathing room consistent with Stripe's editorial density preferences.

• Card internal padding: {spacing.xl} (24px) for standard {component.card-surface} and {component.card-elevated} components.

• Gutters: Desktop container max-width sits at approximately 1262–1349px centered, with {spacing.lg} (16px) horizontal gutter on mobile reducing to ~40–60px on desktop before the content boundary.

Grid & Container

• Max content width: ~1280px effective (nav inner width 1262px, with outer shell extending to 1440px for full-bleed backgrounds).
• Editorial vs. marketplace density: Strongly editorial. The hero uses a roughly 55/45 text-to-image column split (or 60/40 on narrower viewports). Content columns are generously wide (~700px for text), never cramped into narrow blog-style rails.
• Grid behaviors at desktop: The logo strip ({component.logo-strip}) uses a flex/grid layout distributing logos evenly across the full container width with equal spacing. The hero itself appears to use a CSS Grid or flexbox with the text column constrained to ~600–700px and the gradient wave occupying the remaining space (likely absolute-positioned or via grid-area placement).
• Hero column splits: Text content left-aligned in a ~55% width column; decorative gradient layer right-aligned, bleeding to viewport edge. On the screenshot, the headline text wraps at approximately 700px, confirming a constrained reading-width column.

Whitespace Philosophy

Stripe's layout philosophy is editorial-airy with purposeful compression zones. The hero breathes with 71px vertical padding and generous line heights (1.15 at 48px), while navigation stays compact at 64px height with 0px horizontal padding between menu items (they're spaced by their intrinsic width + margin). This creates a rhythm: vast openness in storytelling sections, surgical efficiency in utility surfaces. Whitespace is never "empty"—it's actively managing attention, directing the eye from stat label → headline → subheadline → CTA in a deliberate Z-pattern.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [stripe]   Products ▾  Solutions ▾  Developers ▾  Resources     │
│                                              Pricing  [Sign in] [Contact sales ▸] │
└─────────────────────────────────────────────────────────────────┘
             ↑                                                    ↑
        flush-left                                        flush-right utilities
        logo wordmark                                     (sign-in ghost, CTA solid)
        
        Max-width: ~1349px centered
        Height: 64px fixed
        Background: {colors.canvas}
        Border-bottom: none (clean float)

Hero Section

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│  Global GDP running on Stripe: 164134139%                            │
│  ↑ {component.hero-stat-label}, {typography.stat-label}              │
│                                                                      │
│  Financial infrastructure to grow your revenue.                      │
│  Accept payments, offer financial services, and                     │
│  implement custom revenue models—from                                │
│  your first transaction to your billionth.                          │
│  ↑ {component.hero-headline}, {typography.display-lg}                │
│    (accent words in {colors.primary})                               │
│                                                                      │
│  ┌──────────────┐  ┌─────────────────────────────┐                  │
│  │ Get started ▸ │  │ 🅺 Sign up with Google       │                  │
│  └──────────────┘  └─────────────────────────────┘                  │
│  ↑ {component.cta-primary}   ↑ {component.google-signup-button}     │
│                                                                      │
│  [gradient wave backdrop: orange→pink→violet, right 60%]            │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘
         ↑ Text column ~55% width          ↑ Decorative, non-interactive
         ↑ Padding: {spacing.section-hero} v/h

Logo Strip Section

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│  [amazon]    [NVIDIA]    [Ford]    [coinbase]    [Google]           │
│                                                       [shopify]      │
│                                                            [mindbody] [Me...] │
│                                                                      │
│  ↑ {component.logo-strip}, flex-even distribution                    │
│    Each: {component.logo-strip-item}, grayscale/color treatment      │
│    Padding: {spacing.xl} vertical                                   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

Next Section (Flexible Solutions)

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│  Flexible solutions for every business model. Grow your              │
│  ↑ {component.section-heading}          ↑ {component.section-heading-accent} │
│    {typography.title-md}                   {typography.body-md}, muted color  │
│    Padding: {spacing.section} top                                  │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, {colors.canvas} background | Page body, hero band, footer base | | 1 – Hairline | 1px {colors.hairline} border, no shadow | Input fields, card outlines, dividers | | 2 – Soft raise | {extensions.shadows.sm} (rgba(23,23,23,0.06) 0 3px 6px) | Hovered cards, subtle lifts | | 3 – Modal/Dropdown | {extensions.shadows.md} (rgba(50,50,93,0.12) 0 16px 32px) | Elevated cards ({component.card-elevated}), dropdown panels, floating tooltips | | 4 – Dialog | {extensions.shadows.lg} (rgba(23,23,23,0.08) 0 15px 35px) | Modal dialogs, persistent overlays | | 5 – Widget | {extensions.shadows.chat} (rgba(0,0,0,0.2) 0 0 32px 8px) | Chat widget, fixed-position floating elements |

Philosophy: Stripe's depth system is layered but color-block-first. Surfaces differentiate themselves via background color shifts ({colors.canvas} → {colors.surface-subtle} → {colors.surface-soft}) before shadows enter the picture. When shadows do appear, they're neutral-cooled—using black-based rgba with slight transparency rather than the warm amber or blue tints some systems employ. The shadow spread is conservative: even the "large" modal shadow doesn't exceed 35px blur, preventing the fuzzy, unfocused look that aggressive box-shadows create. The chat widget shadow ({extensions.shadows.chat}) is the most dramatic, using higher opacity (0.2) and offset spread to make the widget visibly "float" above content.

Decorative Depth

The hero section features gradient-wave atmospheric depth: a multi-stop linear gradient sweeping from upper-right to lower-left, transitioning through orange (#ff8c42 approx) → hot pink (#ff4d8d approx) → violet ({colors.primary} #533afd) → deep indigo. This is implemented as an absolute-positioned pseudo-element or background-layer behind the text column, with opacity/blend-mode treatment ensuring text remains fully readable. It is not a photograph, illustration, or pattern—it's pure CSS gradient serving as emotional backdrop. Similar gradient washes may appear in sub-section hero areas (pricing, product deep-dives).

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 3px | Minimal rounding—rarely used, possibly legacy elements | | {rounded.sm} | 4px | Input fields, tags, small badges, nav menu hit areas | | {rounded.DEFAULT} | 5px | Default component radius—buttons, small cards | | {rounded.md} | 6px | Primary buttons, medium cards, containers | | {rounded.lg} | 8px | Large cards ({component.card-surface}, {component.card-elevated}), chat widget, panels | | {rounded.xl} | 12px | Modals, image containers, featured cards | | {rounded.pill} | 9999px | Avatar circles, pill-shaped tags, status indicators | | {rounded.full} | 9999px | Alias for pill—fully rounded elements |

Photography Geometry

While the current screenshot shows no photographs (relying instead on the gradient wave and vector logos), Stripe's broader imagery system (observed across their ecosystem) employs:

• Aspect ratios: 16:9 for hero illustrations, 4:3 for case study images, 1:1 for avatar/team photos.
• Corner rounding: {rounded.lg} (8px) for contained images within cards; full-bleed images (hero backdrops) have 0 radius.
• Treatment: Product screenshots often sit in browser-chrome frames with {rounded.md} radius and {extensions.shadows.md} elevation. Photography is typically desaturated slightly (reducing saturation ~10%) to harmonize with the cool palette, never filtered heavily.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.cta-primary-active}, {component.cta-secondary-hover}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.cta-primary} — The primary conversion button used for "Get started" actions and main CTAs. Background {colors.primary} violet, text {colors.on-primary} white, type {typography.button} at 14px/500 weight. Rounded {rounded.md} (6px), padding 12px 24px. Features a subtle transition on background-color (240ms, the system-standard easing). Its active state is {component.cta-primary-active} which darkens to {colors.primary-active}. This button never appears without strong visual prominence—it's always the first or sole CTA in its grouping.

{component.cta-primary-active} — Pressed/active state of the primary CTA. Background shifts to {colors.primary-active} (#4530e0), maintaining all other properties (white text, 6px radius, identical padding). Implement as :active pseudo-class or via JavaScript state binding.

{component.cta-secondary} — Ghost/outline-style secondary button. Transparent background (renders as {colors.canvas}), text in {colors.primary} violet, with a 1px border in {colors.primary} or {colors.hairline} (border property not captured in YAML schema—describe here). Type {typography.button}, rounded {rounded.md}, padding matches primary at 12px 24px. Used alongside {component.cta-primary} to offer alternative paths (e.g., "Learn more" next to "Get started").

{component.cta-secondary-hover} — Hover state of the ghost secondary button. Background fills to {colors.surface-lavender} (#e2e4ff), providing tactile feedback without the aggression of a solid color fill. Text remains {colors.primary}.

{component.contact-sales-button} — High-prominence CTA in the navigation rail (top-right position). Solid {colors.primary} background, {colors.on-primary} text, includes a chevron-right icon (›) after the label text "Contact sales". Type {typography.button}, rounded {rounded.md}, tighter horizontal padding 10px 20px to fit the nav bar. Active state documented as {component.contact-sales-button-active}.

{component.contact-sales-button-active} — Active state of the nav CTA, darkening to {colors.primary-active}.

{component.google-signup-button} — Social auth button variant displaying "Sign up with Google". White ({colors.canvas}) background, text in {colors.link} blue (#0000ee), includes the Google "G" favicon/icon to the left of the label. Rounded {rounded.md}, padding 11px 23px (1px less vertical than primary for optical centering with the icon). Has a 1px {colors.hairline} border giving it definition against white backgrounds.

{component.sign-in-button} — Low-prominence authentication link styled as a button. Transparent background, text in {colors.text-tertiary} (#1a2c44), type {typography.button}. Rounded {rounded.md}, padding 10px 16px. Functions as the "Sign in" entry point in the top nav, deliberately understated compared to the sales CTA beside it.

Cards & Containers

{component.card-surface} — Standard raised card component. Background {colors.surface-soft} (#e5edf5), text {colors.ink}, type defaults to {typography.body-sm}. Rounded {rounded.lg} (8px), padding {spacing.xl} (24px) internally. Would carry {extensions.shadows.sm} or {extensions.shadows.md} depending on z-context. Used for feature summaries, pricing tier displays, testimonial blocks.

{component.card-elevated} — Higher-elevation card variant for modals, dropdowns, and floating panels. Background {colors.surface-elevated} (white), elevated via {extensions.shadows.md} shadow. Same radius ({rounded.lg}) and padding as {component.card-surface}. The distinction from surface cards is purely elevation-based—both share dimensions but elevated cards "float" visually above the page.

{component.chat-widget} — Fixed-position floating widget (bottom-right in viewport). White ({colors.canvas}) background, {extensions.shadows.chat} shadow (heaviest in system), rounded {rounded.lg}. Contains an icon (chat bubble) and label "Chat with Stripe sales" in {typography.caption}. Padding {spacing.md} horizontally, {spacing.lg} vertically. This component breaks the typical shadow progression due to its persistent floating nature demanding immediate visual separation from scrolling content.

{component.logo-strip} — Horizontal container for partner/customer logo display. Transparent background, full-viewport width with content constrained to grid. Padding {spacing.xl} vertically. Contains multiple {component.logo-strip-item} children distributed with equal spacing (flex justify-content: space-between or CSS grid auto-fit).

{component.logo-strip-item} — Individual logo mark within the strip. Transparent background, {colors.ink} text (or grayscale filter applied), padding {spacing.base-md} (12px) horizontally, {spacing.lg} (16px) vertically for click target sizing. Logos render at consistent max-height (~24–32px) regardless of source aspect ratio.

Navigation

{component.top-nav} — Fixed/sticky top navigation bar spanning full viewport width. Background {colors.canvas} white (no blur/glassmorphism), height {spacing.nav-h} (64px). Text color {colors.nav-ink} (#061b31) for menu items. Contains {component.logo-wordmark} on the left, {component.nav-menu-item} entries in center-left, {component.sign-in-button} and {component.contact-sales-button} on the right. No bottom border or shadow at rest—it relies on the canvas-to-section background change below to define its lower edge.

{component.logo-wordmark} — "stripe" wordmark in custom logotype (not a font-rendered string, though it maps to {typography.heading-md} metrics). Color {colors.ink} black. Positioned flush-left within the nav's inner content area (which has ~16px padding from viewport edge).

{component.nav-menu-item} — Individual navigation trigger (Products, Solutions, Developers, Resources, Pricing). Transparent background, text {colors.nav-ink}, type {typography.nav-link} (14px/400). Rounded {rounded.sm} (4px) for hit-area shape, padding 12px 0px (vertical-only, horizontal spacing comes from margin-between). Includes a downward chevron (▾) suffix indicating dropdown availability. Active/hover state is {component.nav-menu-item-active} where text shifts to {colors.primary}.

{component.nav-menu-item-active} — Hover or open state of nav menu items. Text color changes to {colors.primary} violet, background may receive {colors.surface-lavender} pill-shaped highlight (inferred from patterns).

Hero & Content Sections

{component.hero-band} — Full-viewport-width hero container. Background {colors.canvas} (white, allowing gradient wave to show through via absolute positioning or pseudo-element), text defaults to {colors.ink}. Typography anchor is {typography.display-lg} (48px/300). Padding {spacing.section-hero} (71px) top and bottom. Contains {component.hero-stat-label}, {component.hero-headline}, {component.hero-subheadline}, and CTA group as children.

{component.hero-stat-label} — Small metric/contextual label appearing above the main headline. Text in {colors.muted-soft} (#64748d), type {typography.stat-label} (14px/400). No background, no padding (inline with flow). Example: "Global GDP running on Stripe: 164134139%".

{component.hero-headline} — Primary H1 headline. Text {colors.ink}, type {typography.display-lg} (48px/300, line-height 1.15, tracking -0.02em). Padding creates {spacing.lg} (16px) gap from preceding element. Critically, this component supports inline color variation: specific words/phrases ("your revenue," "services," "from") render in {colors.primary} via <span> wrappers. This mixed-color technique is a signature Stripe motif.

{component.hero-headline-accent} — Not a standalone component but the inline span style within {component.hero-headline}. Text {colors.primary}, same type metrics as parent headline. Always used for value-proposition keywords, never for entire sentences.

{component.hero-subheadline} — Descriptive paragraph beneath headline. Text {colors.muted-soft}, type {typography.body-md} (32px/300—unusually large for "body" text, functioning as a display-adjacent descriptor). Line-height 1.1, tracking -0.02em. Padding 0 0 {spacing.xl} 0 to space before CTA group.

{component.section-heading} — H2-level section title used below the hero. Text {colors.ink}, type {typography.title-md} (32px/300). Padding {spacing.section} (64px) top margin from previous section, {spacing.lg} bottom. Example: "Flexible solutions for every business model."

{component.section-heading-accent} — Continuation phrase or subtitle paired with {component.section-heading}, often in the same visual block. Text {colors.muted-soft}, type {typography.body-md} (matching hero subheadline size but muted color). Renders inline or immediately below the main heading.

{component.footer} — Page footer container. Background {colors.surface-subtle} (#f8fafd), text {colors.muted}, type {typography.caption-sm} (13px/400). Generous padding {spacing.section} vertically, {spacing.lg} horizontally. Would contain link columns, legal text, and regional selectors (not visible in screenshot but inferred from standard Stripe pattern).

Inputs & Forms

No explicit input or form field components were captured in the screenshot's above-fold content. Based on the extracted CSS data showing {rounded.sm} (4px) as the most frequent radius and {colors.hairline} as the dominant border color, input fields would likely implement:

• Background: {colors.canvas} or {colors.surface-soft}
• Border: 1px solid {colors.hairline}, expanding to 2px {colors.border-soft} or {colors.primary} on focus
• Text: {colors.ink} or {colors.nav-ink}
• Rounded: {rounded.sm} (4px)
• Padding: {spacing.md} (10px) vertical, {spacing.lg} (16px) horizontal
• Height: ~44px (standard touch target)

Focus state would be documented as a separate component (e.g., text-input-focus) were it visible.

Do's and Don'ts

Do

• Do use {typography.display-lg} at font-weight: 300 for all hero headlines—never bump to 400 or 500 at display sizes. The light weight is intentional and on-brand.
• Do apply {colors.primary} violet selectively to 2–3 keywords within a headline via inline <span> elements. Over-coloring dilutes the effect; under-coloring misses the brand moment.
• Do maintain {spacing.section-hero} (71px) vertical padding in hero contexts. The generosity signals confidence and premium positioning.
• Do round buttons to {rounded.md} (6px) and cards to {rounded.lg} (8px). Stay within this two-tier radius vocabulary for consistency.
• Do set link text to {colors.link} (#0000ee) rather than {colors.primary}. The violet is reserved for brand actions, not navigational hyperlinks.
• Do use {colors.nav-ink} (#061b31) for navigation text—not pure {colors.ink} black. The slight navy softens the header's visual weight.
• Do apply {extensions.shadows.md} (neutral 0 16px 32px) to elevated cards and dropdowns. Avoid colored or directional shadows.
• Do keep the canvas at pure {colors.canvas} (#ffffff). Any warmth or tint breaks the sterile-premium aesthetic.
• Do pair {component.cta-primary} with {component.cta-secondary} (or {component.google-signup-button}) in CTA groups. Primary-first ordering is mandatory.
• Do use {typography.stat-label} (14px/400, muted-soft) for metric annotations above headlines. Smaller size + lighter color creates proper subordination.

Don'ts

• Don't bold display or title typography. The entire heading scale (down to 26px) uses weight 300. Bold is exclusive to {typography.button}, {typography.label-md}, and {typography.heading-md} (20px and below).
• Don't substitute {colors.link} blue for {colors.primary} violet in CTAs. Links navigate; CTAs convert—they serve different semantic roles and must look different.
• Don't add gradients or texture overlays to the {component.hero-band} background beyond the decorative gradient wave. The text column sits on pure {colors.canvas}.
• Don't expand corner radii beyond {rounded.xl} (12px) for any component. If you find yourself needing 16px+, you're likely misidentifying the component type (it might be a circle/pill, which uses {rounded.pill}).
• Don't use uppercase text transformations. "Get started" never becomes "GET STARTED." Sentence-case is universal.
• Don't apply {colors.primary} as a background to large surface areas (section backgrounds, card fills). It's strictly for interactive elements and accent text.
• Don't reduce {spacing.section-hero} below 60px in hero contexts. Compressing vertical rhythm makes the page feel rushed and low-trust.
• Don't mix font families within marketing surfaces. sohne-var handles every role; reserve monospace for code blocks in documentation sub-systems.
• Don't add bottom borders or shadows to {component.top-nav} at rest. The clean float against content below is intentional.
• Don't promote the hero gradient wave to a reusable component for every section. It's a one-time atmospheric device; subsequent sections use solid {colors.canvas} or {colors.surface-subtle} backgrounds.

Motion & Animation

Transition Tokens

--transition-opacity: opacity 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95);
--transition-fill: fill 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95);
--transition-color: color 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95),
                   background-color 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95),
                   border-color 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95);
--transition-transform: transform 0.25s cubic-bezier(0.6, 0, 0.2, 0.5);
--transition-complex: opacity cubic-bezier(0.4, 0, 0.2, 0.25),
                      transform cubic-bezier(0.4, 0, 0.2, 0.25);
--transition-stroke: stroke 0.3s cubic-bezier(0.25, 1, 0.5, 1);
--transition-transform-expressive: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);

The system employs two easing families: deceleration-heavy (cubic-bezier(0.45, 0.05, 0.55, 0.95) for 240ms) for color/opacity changes—snappy but not jarring—and spring-aware (cubic-bezier(0.6, 0, 0.2, 0.5) or cubic-bezier(0.25, 1, 0.5, 1) for 250–300ms) for spatial transforms that benefit from slight overshoot/anticipation feel.

Keyframe Animations

No @keyframes declarations were detected in the extracted CSS. Stripe's marketing animations are likely driven by:

• Scroll-triggered JS libraries (GSAP ScrollTrigger, Framer Motion scroll listeners) for fade-up entrance sequences on headlines, stats, and cards.
• CSS transitions (documented above) for hover/focus state changes on interactive elements.
• SVG animation attributes (the --transition-stroke and --transition-fill tokens suggest animated SVG icon paths or illustration strokes).

If implementing scroll-triggered entrances: use 400–600ms duration, ease-out or cubic-bezier(0.25, 1, 0.5, 1) easing, stagger child elements by 80–120ms, and translate Y from 24px→0px with opacity 0→1.

Interaction Patterns

• Color transitions on hover: Nav menu items shift from {colors.nav-ink} to {colors.primary} via --transition-color (240ms). Ghost buttons fill to {colors.surface-lavender} on hover.
• Dropdown reveals: Navigation menus (Products ▾, Solutions ▾, etc.) animate open with --transition-transform (250ms) combining opacity fade and Y-axis translate (−4px → 0).
• Button press feedback: Primary CTAs darken to {colors.primary-active} on :active with instant (0ms delay) color transition, providing tactile response.
• Chat widget entrance: The {component.chat-widget} likely slides up from bottom-right with --transition-complex (opacity + transform) on page load or after delay.
• Gradient wave parallax: The hero background gradient may exhibit subtle parallax movement (translate at 0.3–0.5x scroll rate) to enhance depth perception—implemented via JS scroll listener, not CSS alone.
• Logo strip entrance: Logos likely fade-in sequentially (stagger 50ms) with slight Y-axis lift (8px → 0) on scroll-into-view.
• Focus rings: Interactive elements receive an outline-offset focus ring in {colors.primary} with 2px spread, transitioning via --transition-color.

Imagery Style

• Hero imagery type: Abstract gradient wave (CSS-generated, not raster). Multi-stop linear gradient (orange → pink → violet → indigo) occupying the right 40–60% of the hero viewport. Serves as atmospheric backdrop, never overlapping text.
• Logo treatment: Partner/customer logos rendered in their native brand colors (Amazon orange, NVIDIA green, Ford blue oval, etc.) or desaturated to grayscale depending on context. Consistent max-height (~28px), ample horizontal spacing.
• Illustration style (inferred from Stripe ecosystem): Flat vector illustrations with subtle gradients, isometric or orthographic perspective for product diagrams, organic flowing shapes for abstract concepts. Color palette mirrors brand tokens ({colors.primary} violet accents on cool-gray compositions).
• Photography usage (general Stripe pattern): Authentic workplace/product photography, desaturated 10–15%, shallow depth of field, subjects engaged with screens/interfaces. Never stock-photo-generic; always specific to the use case being described.
• Image-as-depth technique: The gradient wave is the primary example of "imagery as depth"—it replaces what lesser systems would implement as a photo or illustration, achieving vibrance through pure color math.
• Iconography within imagery: Custom SVG icons (chat bubble in widget, Google G favicon) rendered in single color (currentColor or specific brand color), stroke-based construction, 20–24px standard size.
• No textures/patterns: Absence of noise, grain, dot-grid, or geometric pattern overlays. The canvas is intentionally pristine—texture would undermine the precision narrative.
• Screenshot treatment: Product UI screenshots (not shown here but standard in Stripe marketing) appear in rounded rectangles with subtle drop shadows and optional browser chrome frame.

Icon System

• Library: Custom SVG icons (Stripe's internal design system, not mapped to Lucide/Heroicons/Material). The extracted CSS shows no icon font or third-party library references.
• Specific icons observed:
  • Chevron-down (▾) — Navigation menu dropdown indicator
  • Chevron-right (›) — Call-to-action arrow suffix ("Contact sales ›")
  • Chat bubble/message icon — {component.chat-widget} leading icon
  • Google "G" favicon — {component.google-signup-button} prefix icon
  • Partner brand marks — Amazon wordmark, NVIDIA eye-logo, Ford oval, Coinbase wordmark, Google wordmark, Shopify wordmark with bag, mindbody wordmark (partial)
• Treatment: Stroke-based for UI icons (chevrons, chat bubble); fill-based for brand marks and favicons. Color is almost always currentColor inheriting from parent text color, or explicitly set to {colors.primary} / {colors.link} for semantic meaning. Size ranges: 16px (inline chevrons), 20px (button-adjacent icons), 24px (standalone feature icons). Alignment is optically center-aligned with adjacent text (using vertical-align: middle or flexbox centering).

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — SSR-capable, Stripe uses React internally
- Styling:        CSS Modules or Tailwind CSS (with heavy customization) — vanilla-extract also viable
- Fonts:          Self-hosted Söhne Variable (via @font-face from Stripe CDN) with Inter as public fallback
- Animation:      Framer Motion (React) or GSAP (vanilla) for scroll-triggered entrances; CSS transitions for state changes
- Icons:          Custom SVG components (React.createElement or JSX-imported SVG files)
- Component lib:  Custom component library (no shadcn/Radix dependency detected — Stripe builds its own primitives)

Font Setup (for reimplementation without Söhne access):

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Map all typography tokens to var(--font-sans) */
/* Inter's 300 weight closely approximates Söhne Var's light */
/* For true fidelity, request Söhne licensing from Klartype (the foundry) */

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | ≤ 640px | Single-column hero (text stacks above gradient), hamburger nav, logo strip scrolls horizontally, CTAs stack vertically | | Tablet | 641px – 1023px | Two-column hero begins (text ~60%, gradient ~40%), nav items may collapse to "More" menu, reduced {spacing.section-hero} to ~48px | | Desktop | 1024px – 1439px | Full nav visible, optimal hero column split (55/45), max container width ~1280px, logo strip shows 6–8 items | | Wide | ≥ 1440px | Container expands to ~1400px, increased gutter padding, hero headline may scale toward {typography.display-xl} (56px) |

Touch Targets

• {component.cta-primary}: 48px height × variable width (min 120px) — exceeds WCAG AAA 44×44 minimum comfortably.
• {component.sign-in-button}: ~40px height × ~100px width — meets WCAG AA (44×44), borderline AAA. Consider increasing padding to 12px 20px on mobile.
• {component.nav-menu-item}: Hit area extends to ~44px height via padding, full text width — adequate.
• {component.google-signup-button}: ~46px height (11px × 2 padding + ~24px text) — passes AAA minimum.
• {component.chat-widget}: ~48px height (inferred from padding + content) — passes touch guidelines.
• {component.text-input} (projected): Target 44–48px height for mobile forms per WCAG recommendations.

Collapsing Strategy

• Navigation: Below tablet breakpoint, the horizontal nav menu collapses to a hamburger icon (☰) triggering a slide-out drawer or fullscreen overlay. {component.sign-in} and {component.contact-sales-button} remain visible or move into the drawer. Logo stays fixed left.
• Hero columns: Mobile forces single-column stacking: stat label → headline → subheadline → CTA stack → gradient wave moves behind or below (possibly hidden on smallest screens to save bandwidth). Headline size scales down from {typography.display-lg} (48px) to {typography.title-md} (32px) or {typography.title-lg} (36px).
• CTA grouping: Desktop shows {component.cta-primary} and {component.google-signup-button} side-by-side with {spacing.md} (10px) gap. Mobile stacks them vertically: primary on top, Google signup below, each at 100% width.
• Logo strip: Converts from flex-row even-distribution to horizontal scroll (overflow-x: snap) or wraps to 2–3 rows with reduced logo size (~20px max-height). Touch-scroll with momentum enabled.
• Section headings: {typography.title-md} (32px) reduces to {typography.title-sm} (26px) on mobile. Line-height may increase to 1.2 for readability at smaller sizes.
• Chat widget: May convert to a fixed-position FAB (floating action button) showing only the icon (48×48 circle) on mobile, expanding to full widget on tap.

Image Behavior

• Hero gradient wave: On mobile, the gradient may crop to show only the violet-indigo portion (right side of desktop gradient), or compress to a shorter height behind the stacked text. Bandwidth-conscious implementations might replace it with a solid {colors.surface-lavender} or remove it entirely below 480px.
• Partner logos: Scale from 28px (desktop) to 20px (mobile) max-height, maintaining aspect ratio. Grayscale treatment may become more aggressive on mobile to reduce visual competition.
• Screenshots/illustrations (future pages): Responsive images with srcset at 1x/2x/3x densities. Max-width: 100% of container, auto height. Border-radius preserved at {rounded.lg}.

Iteration Guide

1. Build a landing page that closely mimics the design system in this DESIGN.md. Use Next.js with CSS Modules (or Tailwind with a custom theme extension mapping these tokens). Start with the HTML structure before applying styles.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Create CSS custom properties (variables) mirroring the frontmatter structure: --color-primary: #533afd;, --radius-md: 6px;, --space-lg: 16px;, etc. Never hard-code a hex or px value that has a corresponding token.

3. Add state variants (-hover, -active, -focus, -disabled) per your stack's conventions. This spec documents Default and Active/Pressed states explicitly; infer hover from the color palette logic (lighter/darker variants exist for this purpose) and disabled as opacity: 0.5 or dedicated {colors.primary-disabled} token.

4. When adding a new component, decide first which sub-system it belongs to: Marketing (landing pages, campaigns — uses display type, gradient accents, generous spacing) or Product (dashboard, docs — denser grids, smaller type, code surfaces). Don't cross-pollinate patterns arbitrarily.

5. Variants of an existing component live as separate frontmatter entries (cta-primary-active, never nested objects). Your component code should accept a variant prop that switches the CSS class/token reference accordingly.

6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Fix all errors before committing.

7. When in doubt about emphasis: bigger type before bolder type (Stripe's system proves 48px/300 beats 32px/500 for impact), signature surface card before solid accent background (elevation > color-fill for hierarchy), and {colors.primary} violet on CTAs only (preserve scarcity to maintain power).

8. Implement the hero gradient wave as a CSS linear-gradient(135deg, #ff8c42, #ff4d8d, #533afd, #4338ca) on a ::before pseudo-element positioned absolute with z-index: 0, while text content sits at z-index: 1 on {colors.canvas}. Ensure sufficient luminance contrast between gradient and any text that might overlap it (currently none does—text is in the clear left column).

9. Set up the font stack with sohne-var as primary, 'SF Pro Display' as second fallback, and system-ui, sans-serif as safety net. If you cannot obtain Söhne, substitute Inter from Google Fonts and adjust letter-spacing slightly (Inter needs -0.01em extra at light weights to match Söhne's density).

10. Test responsive behavior at 375px (iPhone SE), 768px (iPad portrait), and 1440px (desktop). Verify: nav collapses gracefully, hero text doesn't overflow, CTA buttons remain thumb-friendly (≥44px tap targets), and the gradient doesn't obscure text at any viewport width.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover color/transform values for buttons, nav items, and links are inferred from active-state tokens and system conventions but not extracted from static DOM.
• Loading/skeleton states: No loading spinner, skeleton placeholder, or shimmer animation patterns detected. These would be needed for dashboard sub-system implementations.
• Form validation states: Beyond focus-border indication, error message styling (red text + icon?), success checkmarks, and disabled-input appearance are not visible in the screenshot.
• Dark mode palette: While extensions.mode: "dark" is specified in pre-assigned values, the screenshot is unambiguously light mode. Dark mode surface/text inversions, adjusted primary color luminance, and shadow replacements are not documented here.
• Authenticated/user-specific flows: Dashboard surfaces, settings panels, invoice views, and API key management interfaces are outside scope of this marketing-page extraction.
• Sub-brand palettes: Stripe operates sub-products (Stripe Payments, Stripe Billing, Stripe Connect, Stripe Radar) that may have accent color variations. These aren't visible on the homepage.
• Exact gradient stop values: The hero gradient wave colors (orange, pink, violet coordinates) are estimated from visual sampling, not extracted from CSS linear-gradient() syntax (which wasn't present in the captured stylesheets—likely generated inline or via JS).
• Micro-interaction details: Tooltip positioning logic, dropdown animation curves (beyond timing/easing), carousel swipe behavior, and accordion expand/collapse mechanics require interaction testing beyond screenshot analysis.
• Accessibility markup: ARIA roles, focus-management order, screen-reader-only text, and skip-navigation links are structural/accessibility concerns not discernible from CSS extraction alone.
• Custom font file hosting: Söhne Var is served from Stripe's CDN at a non-public URL path. Reimplementation requires either licensing the font or substituting Inter/DM Sans with the caveats noted in Font Setup.