Stripe

Overview

Stripe's design system embodies 'Vibrant Minimalism'—a movement that pairs energetic, multi-color gradient backgrounds with clean, functional interface elements. The brand serves global businesses of all sizes, from startups to enterprises, enabling them to accept payments and manage revenue with confidence. The aesthetic evokes dynamism and forward momentum through flowing color transitions (blues to purples to oranges to yellows), while maintaining technical precision and trustworthiness through crisp typography and clear information hierarchy. The UI personality is confident yet approachable: precise, data-driven, and never condescending. Example sentence in brand voice: 'Your revenue is growing at 23% month-over-month—here's what's driving it.'

Colors

The color system is anchored by a vibrant primary accent (#635bff, a rich periwinkle-violet) used on all primary CTAs, active states, and brand-critical interactive elements. This primary is paired with a secondary accent (#533afd, a deeper indigo) for supporting actions and secondary navigation. A tertiary accent (#ffd601, a bold golden yellow) highlights status badges, success states, and accent highlights. The surface stack progresses from pure white (#ffffff) through subtle grays (#f6f9fc, #e5edf5, #d4dee9) to create depth without darkness. Text defaults to near-black (#181818) for maximum legibility. The hero section employs a dynamic gradient background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 25%, #ec4899 50%, #f97316 75%, #fbbf24 100%), animating at 15s intervals to evoke motio

Typography

The type system uses sohne-var (a variable font loaded from Stripe's CDN) as the primary typeface, with 'SF Pro Display' and system fonts as fallbacks. Display and headline levels employ light to semi-bold weights (300–600) with generous negative letter-spacing (-0.04em to -0.01em) to create visual impact and sophistication. Body text uses regular weight (400) at 16px with 24px line-height for comfortable reading. Labels and small text use 600 weight at 12–14px with 0.01–0.02em letter-spacing for clarity. Code snippets use SourceCodePro (a monospace font) at 14px, 500 weight. On small labels over busy gradient backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. The type pairing communicates precision and modernity: light headlines convey confidence and space

Layout

The layout uses a fluid 12-column grid with a max-width of 1280px (matching Stripe's observed container widths of 1263–1299px). The page rhythm is built on a semantic spacing scale: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section spans full-width with 36px padding on mobile, 40px on tablet, and 64px on desktop, creating breathing room around the gradient background. Card-based content sections use md (24px) padding internally and lg (40px) spacing between sections. Container margins follow the gutter token (24px) on mobile, scaling to 40px on larger viewports. White-space is used generously to avoid cognitive overload: section separators in

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base): flat surfaces with no shadow, using surface-container colors (#e5edf5 to #d4dee9) for subtle differentiation. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with background #ffffff and a 1px border at rgba(0, 0, 0, 0.1). Level 3 (Elevated/Modals): box-shadow: 0 30px 60px -50px rgba(0, 0, 0, 0.1), 0 30px 60px -10px rgba(50, 50, 93, 0.25), creating a pronounced lift. Interactive elements (buttons, inputs) use no shadow at rest, gaining a Level 2 shadow o

Shapes

The shape philosophy is 'Technical Precision'—favoring subtle, functional border-radius values over organic curves. Buttons and inputs use 4px (DEFAULT) radius, creating a modern, slightly softened square that feels contemporary without sacrificing clarity. Cards and containers use 12px (lg) radius for a more approachable appearance. Badges and pills use 9999px (full) radius for maximum roundness, signaling status and non-interactive content. Navigation dropdowns and modals use 8px (md) radius as a middle ground. This hierarchy—sharp for interactive, softer for containers—guides visual scannin

Components

Action Elements Buttons follow a three-tier system: primary (solid #635bff, white text, 48px height, 14px 24px padding), secondary (frosted white at rgba(255, 255, 255, 0.65) with primary text, same dimensions), and tertiary (transparent with 1px border). All buttons use 4px border-radius and transition background-color over 200ms on hover. The primary button darkens to #5348e8 on hover and #4a3fd9 on active, maintaining contrast ratios ≥4.5:1. Secondary buttons lighten to rgba(255, 255, 255, 0.8) on hover. Focus states add a 3px box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1) for accessibility.

Containers & Surfaces Cards use 24px padding, 12px border-radius, 1px border at #d0d0d0, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background shifts to #f3f5f8 and shadow e

Do's and Don'ts

**Do**

• Do use the primary accent (#635bff) exclusively on CTAs, active states, and brand-critical interactions—never on passive elements or backgrounds.
• Do apply the gradient hero background only to hero sections and full-width hero images; never tile or repeat it in smaller components.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) between related elements to preserve visual rhythm.
• Do use the three-tier shadow system consistently: no shadow for base, Level 2 for cards, Level 3 for modals—never mix shadow styles.
• Do pair light headline weights (300–400) with generous negative letter-spacing (-0.02em to -0.04em) for visual sophistication.
• Do test all interactive elements with focus states: 3px box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1) for keyboard navigation accessibility.

**Don't**

• Don't use secondary (#533afd) or tertiary (#ffd601) accents on primary CTAs—reserve them for supporting actions, badges, and highlights only.
• Don't apply border-radius values larger than 12px to buttons or inputs; the system uses 4px (DEFAULT) for precision and 12px (lg) for containers.
• Don't hardcode color values in component styles—always reference the color tokens (e.g., {colors.primary}, {colors.surface-container-low}) to maintain system consistency.
• Don't use shadows without transitions; all shadow changes must animate over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) to feel responsive.
• Don't place text directly over the gradient hero background without a semi-transparent overlay or text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) for legibility.
• Don't mix typefaces; sohne-var is the primary brand font—use SourceCodePro only for code blocks and technical content, never for UI labels or body text.