Stripe

Overview

Stripe's design system embodies a **Gradient-Forward Maximalism** aesthetic—a bold departure from austere fintech conventions. The brand celebrates color, motion, and visual energy while maintaining technical precision and trustworthiness. The UI uses vibrant, multi-hued gradients (blues, purples, oranges, pinks) as primary visual anchors, signaling innovation and growth. The palette transitions from cool purples (#533afd, #9966ff) through warm oranges (#ff6118, #ffd601) to hot pinks (#ea2261, #f44bcc), creating a sense of dynamic momentum. This aesthetic serves businesses of all sizes—from startups to enterprises—conveying that financial infrastructure can be both powerful and approachable.

The brand voice is confident, direct, and optimistic without being breathless. Stripe speaks to builders: precise, technical, action-oriented. Vocabulary favors concrete nouns ("payments," "transactions," "revenue models") over abstractions. The tone avoids hype; instead, it emphasizes capability and scale. Example sentence in Stripe's voice: "Accept payments from 195 countries, settle in 135 currencies, and scale from your first transaction to your billionth—all through a single API."

Colors

Stripe's color system is built on a **vibrant primary accent** (#533afd, a saturated indigo-violet) paired with a warm secondary gradient palette. Primary (#533afd) is the signature CTA color, used on all high-priority buttons ("Get started"), links, and interactive focus states. It conveys trust and technical sophistication. Secondary colors—orange (#ff6118), yellow (#ffd601), and hot pink (#ea2261)—are deployed in hero gradients, decorative blobs, and accent highlights to communicate energy and growth. The surface stack is deliberately light: white (#ffffff) for cards and containers, with subtle grays (#f8fafd, #e5edf5, #d4dee9) for depth and hierarchy. Text defaults to near-black (#181818) for maximum readability. Gradients are the brand's signature visual device: the hero background an

Typography

Stripe's type system prioritizes clarity and hierarchy through weight and scale rather than serif/sans-serif contrast. The typeface is **sohne-var** (a custom variable font from Stripe's design system), paired with **SourceCodePro** for code blocks. Display and headline levels use light weights (300–400) at large sizes (48–60px) to convey confidence and breathing room; body text sits at 16px with 400 weight for legibility. The system includes 8 levels: display (60px, 300 weight), headline-lg (48px, 300 weight), headline-md (32px, 400 weight), title-lg (24px, 500 weight), body-lg (18px, 400 weight), body-md (16px, 400 weight), label-md (14px, 500 weight), and label-sm (12px, 500 weight). Letter-spacing is minimal (–0.02em to 0.02em) to maintain tightness and sophistication. On small labels

Layout

Stripe employs a **fluid, content-driven grid** with a max-width of 1280px and a 12-column layout. The page rhythm is generous: section padding uses the lg spacing token (40px) on mobile, scaling to xl (64px) on desktop, creating breathing room between hero, feature sections, and footer. The gutter (24px) is applied consistently to all container margins. Hero sections span full-width with asymmetric layouts—text on the left, gradient blobs on the right—to create visual tension and guide the eye. Cards and containers use md spacing (24px) for internal padding. The layout philosophy prioritizes white space and asymmetry: sections are not always centered; content often aligns to the left or right, with decorative elements (gradients, blobs) occupying the opposite side. This creates a sense of

Elevation & Depth

Stripe uses **subtle, layered shadows** to create depth without heaviness. The elevation system has three levels: (1) **sm** (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle borders and dividers; (2) **md** (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns; (3) **lg** (0 30px 60px -50px rgba(0, 0, 0, 0.1), 0 30px 60px -10px rgba(50, 50, 93, 0.25)) for modals and elevated surfaces. Cards use md elevation by default and transition to lg on hover. Buttons do not use shadows; instead, they rely on color contrast and border-radius (4px) for definition. Dropdowns and select panels use md sh

Shapes

Stripe's shape language is **Technical Minimalism**—sharp, precise, and functional. Border-radius follows a strict scale: sm (3px) for small UI elements like badges and select options, DEFAULT (4px) for buttons and inputs, md (8px) for cards and containers, lg (12px) for larger modals, xl (16px) for hero sections and feature cards, and full (9999px) for circular avatars and pill-shaped badges. The 4px default radius is the most frequent, appearing on all primary buttons, input fields, and dropdown panels. This creates a consistent, slightly softened aesthetic that feels modern without being ov

Components

Action Elements

**Buttons** are the primary interaction mechanism. Primary buttons use backgroundColor: {colors.primary} (#533afd), textColor: white, padding: 15px 24px, height: 48px, rounded: 4px, and typography: label-md (14px, 500 weight). On hover, the background transitions to {colors.primary-fixed-dim} (#635bff) with a 150ms ease-out timing function. Secondary buttons invert the color scheme: white background with a 1px border at {colors.outline-variant} (#d0d0d0), primary text, and the same padding and height. On hover, the background shifts to {colors.surface-container-low} (#f0f4f9). Tertiary (ghost) buttons have transparent backgrounds and primary text; on hover, they gain a subtle background at {colors.surface-container-high} (#d4dee9). All buttons use cursor: pointer and t

Do's and Don'ts

**Do**

• Do use the primary color (#533afd) exclusively for high-priority CTAs and interactive focus states—never dilute it with secondary uses.
• Do apply gradient blobs (blue → purple → orange → pink) as decorative hero elements to convey motion and growth; they are signature brand assets.
• Do maintain the 4px border-radius default on buttons and inputs for a technical, precise appearance; reserve 8px+ for larger containers.
• Do use the lg spacing token (40px) for section separation on desktop to create generous white space and visual breathing room.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns; elevate to lg on hover with a 200ms transition.
• Do use sohne-var at light weights (300–400) for headlines to convey confidence and sophistication; reserve 500+ weight for labels and emphasis.

**Don't**

• Don't use secondary colors (#ff6118, #ffd601, #ea2261) on body text or interactive elements; reserve them for decorative gradients and accent highlights only.
• Don't apply rounded corners larger than 4px to buttons—this softens the technical precision that defines the brand.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #181818 for dark text and #ffffff for light text to maintain brand consistency.
• Don't apply shadows heavier than lg (0 30px 60px) to any element; Stripe's elevation is subtle and refined, never dramatic.
• Don't mix sohne-var with system fonts (Arial, Helvetica) in the same component; always specify the full font stack: sohne-var, 'SF Pro Display', sans-serif.
• Don't use the outline color (#9966ff) for anything other than focus rings and interactive states; it is not a primary or secondary brand color.