Stripe

Overview

Stripe is a global financial infrastructure platform that empowers businesses of all sizes to accept payments, manage billing, and scale revenue. The design system embodies "Vibrant Minimalism"—a movement that pairs technical precision with energetic, gradient-driven visual language. The aesthetic combines a clean, light-neutral canvas (white #ffffff, off-white #f8fafd) with bold, saturated accent colors (primary purple #533afd, secondary yellow #ffd601, tertiary magenta #ee30fb) that evoke innovation, accessibility, and forward momentum. The UI conveys confidence and reliability through generous whitespace, deliberate typography hierarchy, and smooth micro-interactions. Voice: direct, confident, and human. Stripe speaks in clear, outcome-focused language without jargon. Example: "Accept payments from anywhere. Scale faster with tools built for growth."

Colors

The color system is anchored by a vibrant primary purple (#533afd) used exclusively for primary CTAs, interactive states, and brand-critical moments. This accent appears on the "Get started" button (rgba(255, 255, 255, 0.65) overlay on white for secondary CTAs; solid #533afd for primary). Secondary yellow (#ffd601) and tertiary magenta (#ee30fb) provide supporting energy for highlights, badges, and accent elements. The surface stack is deliberately light: white (#ffffff) as the base, with progressive container layers (surface-container-low #f8fafd, surface-container #e5edf5, surface-container-high #e2e4ff) creating subtle visual separation without darkness. Text hierarchy is enforced through on-surface (#000000 for primary text) and on-surface-variant (#32325d for secondary text). The outl

Typography

The typography system uses sohne-var (a custom variable font family loaded from Stripe's CDN) paired with SourceCodePro for code blocks. The hierarchy spans from display (60px, fontWeight 300, lineHeight 68px, letterSpacing -0.02em) for hero headlines down to label-sm (12px, fontWeight 500, lineHeight 16px, letterSpacing 0.05em) for micro-labels. The body-md (16px, fontWeight 400, lineHeight 24px) is the default reading size, while body-lg (18px, fontWeight 300, lineHeight 28px) is used for larger content blocks. Headline weights are consistently light (300) to convey sophistication and approachability, while labels and buttons use heavier weights (500–600) for emphasis. The letterSpacing is tightened on large headlines (-0.02em to -0.01em) to create visual impact, while body text remains

Layout

The layout uses a responsive 8-column grid (4 columns on mobile, 8 on tablet/desktop) with a max-width container of 1280px. The page margin is 24px on desktop, reducing to 16px on mobile for edge-to-edge content. Section spacing follows a consistent rhythm: 40px (lg spacing) between major sections, 24px (md spacing) between subsections, and 12px (sm spacing) within component groups. The hero section occupies the full viewport height with a vibrant multi-color gradient background (blue → purple → pink → orange) that dynamically shifts behind the content. Cards and containers use 24px internal padding (md spacing) with 12px gaps between nested elements. The gutter between grid columns is 24px, ensuring content breathes without feeling sparse. Container max-width is enforced at 1280px to main

Elevation & Depth

Depth is conveyed through a restrained shadow system and layered backgrounds rather than dramatic drop shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards/Containers): 1px solid border at {colors.outline} (#d4dee9) with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation. Level 3 (Modals/Dropdowns): box-shadow 0 -30px 60px -12px rgba(50, 50, 93, 0.25), 0 -18px 36px -18px rgba(0, 0, 0, 0.3), producing a pronounced floating effect. Interactive elements (buttons, inputs) use the Level 2 shadow on default sta

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied consistently but conservatively to maintain a professional, trustworthy appearance. Buttons and inputs use border-radius 4px (0.25rem, rounded.DEFAULT), creating a subtle softness that feels modern without appearing playful. Cards and containers use 12px (0.75rem, rounded.md) for slightly more breathing room. Modals and elevated surfaces use 16px (1rem, rounded.lg) to emphasize their prominence. Badges and pills use 9999px (rounded.full) for a fully rounded appearance, signaling secondary or supplementary information. The rea

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary (background #533afd, text white, padding 14.5px 24px 15.5px, height 44px, border-radius 4px) is used for primary CTAs like "Get started" and "Contact sales". On hover, the background transitions to #4032c8 (button-primary-hover) with a 200ms ease-out timing. The button-secondary (background white, text #533afd, border 1px solid #d4dee9) is used for secondary actions like "Sign in" and "Sign up with Google". On hover, the background shifts to #f8fafd (surface-container-low) while maintaining the purple text. Both button variants use label-md typography (14px, fontWeight 600, lineHeight 20px) for consistency. The button-ghost variant removes the background entirely, using only text color (#533afd) and a tra

Do's and Don'ts

**Do**

• Do use primary purple (#533afd) exclusively for primary CTAs and focus states—it is the signature brand accent and must remain visually distinct.
• Do apply the full 8-column grid with 24px gutters on desktop to maintain consistent rhythm and alignment across all pages.
• Do pair light typography weights (300–400) with generous line-height (1.4–1.5) for body text to ensure readability and a premium feel.
• Do use the surface-container stack (surface-container-low #f8fafd, surface-container #e5edf5, surface-container-high #e2e4ff) to create visual separation without introducing dark backgrounds.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-out timing to feel responsive and polished.
• Do apply the 1px solid border (#d4dee9) to all cards and containers—it is the visual signature of the Stripe design system.
• Do use secondary yellow (#ffd601) and tertiary magenta (#ee30fb) sparingly for highlights, badges, and accent moments to maintain visual hierarchy.

**Don't**

• Don't use dark backgrounds or near-black surfaces—Stripe's aesthetic is light, clean, and premium. Maintain white (#ffffff) or light off-white (#f8fafd) as the primary canvas.
• Don't apply border-radius larger than 16px (rounded.lg) on interactive elements; it dilutes the technical precision of the brand.
• Don't use shadows larger than the Level 3 specification (0 -30px 60px -12px rgba(50, 50, 93, 0.25)) as it creates visual clutter and reduces clarity.
• Don't mix primary purple (#533afd) with secondary yellow (#ffd601) or tertiary magenta (#ee30fb) on the same button or interactive element—use one accent color per component.
• Don't apply text-shadow or text-stroke to body text; reserve these techniques for small labels (12px or smaller) overlaid on gradient backgrounds.
• Don't use system fonts (system-ui, -apple-system) as fallbacks; always specify sohne-var or SourceCodePro with explicit font-family declarations.
• Don't reduce the container max-width below 1280px on desktop, as it compromises the breathing room and premium feel of the layout.