Switch between the rendered Visual preview and the Raw DESIGN.md.
Stripe's design system embodies modern enterprise sophistication with a bold, forward-thinking aesthetic. The visual language combines deep navy and purple tones to convey trust and innovation, layered with vibrant accent colors that energize key interactions. The typography is clean and geometric, emphasizing clarity and precision—essential for fintech interfaces where accuracy and confidence matter. Subtle shadows and carefully orchestrated whitespace create depth without clutter, while dynamic gradient overlays (orange-to-purple) add visual richness and modern energy. This is a design system built for serious enterprises that demand both power and elegance.
Key Characteristics
#533AFD): Core brand color, primary call-to-action buttons, interactive states, and accent highlights throughout the interface#0A2540): Primary text, headings, and foundational dark elements conveying trust and authority#635BFF): Secondary interactive states, hover effects, and accent text#0000EE): Tertiary accent, explore links, and exploratory UI elements#0073E6): Data visualization, chart highlights, and secondary action states#533AFD): Main button backgrounds, primary links, and key conversion elements#635BFF): Hover states, alternative actions, and secondary CTAs#0000EE): Underlined links and explore navigation elements#FFFFFF): Card backgrounds, container fills, and content areas#000000): Critical text, strong emphasis, and high-contrast typography#425466): Secondary body text, captions, and supporting content#3C4F69): Tertiary text and muted labels#F6F9FC): Subtle background tints and section separations#E5EDF5): Card borders, dividers, and container boundaries#E7ECF1): Secondary border treatment and subtle divisions#F8FAFD): Ultra-light background for secondary sectionsrgba(0, 0, 0, 0.1) and rgba(50, 50, 93, 0.25) for depth and elevationPrimary: Sohne Variable (sohne-var, sans-serif)
Fallback Stack: sohne-var, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif
Sohne Variable is a geometric, modern typeface with excellent readability and professional presence across all weights and sizes.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero Heading | Sohne Variable | 32px | 700 | 40px | 0px | Large, bold statements on landing pages |
| Heading (h2) | Sohne Variable | 15px | 425 | 20px | 0px | Section headers and card titles |
| Body Text | Sohne Variable | 14px | 300 | 19.6px | 0px | Standard reading content |
| Button / Label | Sohne Variable | 14px | 400 | 14px | 0px | Interactive elements and UI labels |
| List Item | Sohne Variable | 16px | 300 | normal | 0px | Bulleted and numbered lists |
| Caption / Small | Sohne Variable | 12px | 300 | 16px | 0px | Metadata, timestamps, and auxiliary text |
| Link (inline) | Sohne Variable | 14px | 400 | 14px | 0px | Hyperlinked text within content |
normal or 1.2x for headings#533AFD#FFFFFF14px40012px 24px 14px 24px4px0px none40px14px#635BFF, shadow rgba(50, 50, 93, 0.25) 0px 4px 12px#3C4F69, no shadownonetransparent#533AFD14px40012px 24px 14px 24px4px2px solid #533AFD40px14px#F6F9FC, border 2px solid #635BFF, text #635BFF#E5EDF5, border 2px solid #3C4F69transparent#42546614px40012px 12px 14px 12px0px0px none40px14px#533AFD, background transparentnone#533AFD#FFFFFF15px4253px 12px 5px 12px16px0px none32px24px#635BFF, shadow rgba(50, 50, 93, 0.25) 0px 4px 12px#FFFFFF1px solid #E5EDF58px24pxrgba(0, 0, 0, 0.1) 0px 8px 16px -8px, rgba(50, 50, 93, 0.25) 0px 13px 27px -12px#42546614px300normal#FFFFFF1px solid #E5EDF58px32pxrgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px#425466#F6F9FC0px none8px24pxnone#425466#FFFFFF1px solid #E5EDF54px12px 16px14px300#42546614px2px solid #533AFD, box-shadow 0px 0px 0px 3px rgba(83, 58, 253, 0.1)2px solid #D32F2F, background #FFEBEE#FFFFFF1px solid #E5EDF54px12px 16px14px300#4254661px solid #D9E0E6, box-shadow rgba(0, 0, 0, 0.1) 0px 18px 36px -18px12px400#3C4F698pxblocktransparent or #0A2540 (dark mode)64px0px 32pxflexcenter40px#42546614px3008px 0px0px solid transparentpointer#533AFD, border-bottom 2px solid #533AFD#533AFD, font-weight 400, border-bottom 2px solid #533AFD#FFFFFF#0A254014px4008px 20px4px0px none#F6F9FC, box-shadow rgba(50, 50, 93, 0.25) 0px 4px 12pxBase Unit: 4px
Spacing Scale:
4px (xs): Micro-spacing between icon and text, tight groupings8px (sm): Padding inside compact components, small gaps12px (md): Input fields, button padding (vertical)16px (base): Standard padding, section dividers20px (lg): Gap between components in lists, moderate sections24px (xl): Card padding, section padding, prominent spacing32px (2xl): Gap between major sections, large card padding40px (3xl): Gap between major layout blocks, hero section spacing48px (4xl): Large section padding, whitespace emphasis164px (custom): Margin adjustments for specific hero or showcase layoutsUsage Context:
12px vertical, 24px horizontal24px internal padding, 20px–40px between cards32px–48px vertical spacing24px below heading, 16px below subheading1264px (standard content container)16px gutters800px for headline24px gapGenerous whitespace is foundational to the design system. Every section is surrounded by at least 32px of breathing room. Cards and components float in white space rather than touching edges. Typography is set with ample line-height and margin-bottom to prevent cognitive overload. The page reads as composed and premium, not crowded or anxious.
0px: Minimal rounding for inputs, borders4px: Buttons, cards, and light UI elements6px: Alternative button style, secondary components8px: Primary cards, containers, and elevated components14px: Larger card containers, hero image frames50%: Fully circular elements (avatars, toggles)| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, box-shadow: none | Navigation, backgrounds, base layers |
| Raised (Level 1) | rgba(0, 0, 0, 0.1) 0px 8px 16px -8px, rgba(50, 50, 93, 0.25) 0px 13px 27px -12px | Standard cards, floating elements, hover states |
| Elevated (Level 2) | rgba(0, 0, 0, 0.1) 0px 18px 36px -18px, rgba(50, 50, 93, 0.25) 0px 30px 45px -30px | Dropdowns, popovers, secondary modals |
| Modal (Level 3) | rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px | Modals, dialogs, top-level overlays |
| Overlay (Level 4) | rgba(0, 0, 0, 0.1) 0px 41px 60px -40px, rgba(50, 50, 93, 0.15) 0px 40px 100px 0px | Full-screen modals, critical alerts, custom overlays |
Shadow Philosophy: Shadows are subtle and sophisticated, using layered semi-transparent values rather than harsh black. The primary shadow always includes a softer, larger blur (rgba(50, 50, 93, 0.25)) paired with a crisper, closer offset (rgba(0, 0, 0, 0.1)). This dual-layer approach creates depth without visual weight. Shadows increase in spread and blur radius as elevation increases, guiding the user's eye to hierarchically important elements. Avoid using shadows on every element; reserve them for cards, interactive states, and modal overlays.
#533AFD) for all primary call-to-action buttons to establish clear conversion points and maintain visual consistency#0A2540) with white (#FFFFFF) for maximum contrast in headings and critical text4px for inputs/buttons, 8px for cards1.4x or greater for body text, always test on smaller screens#0000EE, #0073E6) sparingly for secondary actions and exploratory links#0A2540) as a button background; reserve it for text and foundational layers24px–40px breathing room8px on input fields or buttons; keep interactions looking sharp and precise| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile (sm) | 320px–640px | Single column, full-width cards, stacked navigation, 16px padding |
| Tablet (md) | 641px–1024px | 2-column grid, side navigation collapses, 24px padding |
| Desktop (lg) | 1025px–1264px | 3-column grid, full navigation visible, max-width container |
| Large Desktop (xl) | 1265px+ | 4-column grid, max-width 1264px centered, hero expands to viewport |
Responsive Typography:
28px on mobile, 32px on desktop14px on mobile, 15px on desktop14px consistent across all breakpoints44px × 44px for all interactive elements (buttons, links, input fields)8px to prevent accidental taps12px vertical, 16px horizontal for comfortable touch16px margins) on mobile48px sections on desktop to 32px on tablet, 24px on mobile800px max-width on desktop14px for body text; prefer increasing line-height for mobile readability#533AFD)#635BFF)#0000EE)#FFFFFF) or Light Gray (#F6F9FC)#0A2540)#0A2540)#425466)#E5EDF5)#0073E6)#3C4F69)#533AFD) background, 40px height, 4px border-radius, 12px 24px padding#FFFFFF background, 8px border-radius, 1px solid #E5EDF5 border, and apply the sm-level shadow (rgba(0, 0, 0, 0.1) 0px 8px 16px -8px, rgba(50, 50, 93, 0.25) 0px 13px 27px -12px)#425466); headings use weight 700 for display, weight 425 for h28px for small gaps, 16px for standard padding, 24px for card interiors, 32px–48px for section spacing#635BFF and add shadow; focus states add 0px 0px 0px 3px rgba(83, 58, 253, 0.1) ring#425466, turn #533AFD on hover with 2px solid #533AFD underline, and use #FFFFFF text on dark backgrounds1px solid #E5EDF5 border, 4px radius, 12px 16px padding; focus adds 2px solid #533AFD border and purple ring8px border-radius on desktop, 4px on mobile; maintain aspect ratios and never scale below 50% of container width16px gutters, max-width 1264px on desktop, responsive to 80% on tablet, full-width with 16px margins on mobile