Design System
Stripe logo

Stripe

Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (#ffffff) with deep navy headings (#061b31) and a signature purple (#533afd) that functions as both brand anchor and interactive accent. This isn't the cold, clinical p

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 300 · 1.25
Design at scale
32px32px · 300 · 1.25
Section heading
heading-lg24px · 300 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
Söhne
Commercial
Klim's flagship grotesk. Used by Stripe, Vercel, OpenAI.
Source · Klim Type Foundry
Monospace
Source Code Pro
Open · OFL
Install via Google Fonts
Primary
SF Pro Display
Commercial
Install via Apple Developer
Primary
SF Mono
Commercial
Apple's monospace. Free for Apple platforms.
Install via Apple Developer
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycomfortable
Base unit8px
Section gap16px
Card padding12px
Element gap8px

Border Radius

ElementValuePreview
fineMicro1px
subtleMicro1px
buttonsStandard4px
inputsStandard4px
badgesStandard4px
cardsStandard4px
standardComfortable5px
navigationRelaxed6px
largerRelaxed6px
featuredLarge8px
heroLarge8px

Borders

ElementValuePreview
Border1px solid #b9b9f9
Border1px solid #e5edf5
Border1px solid #f6f9fc
Focus1px solid #533afd

Elevation

Shadow 1
Shadow 2
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • Use sohne-var with "ss01" on every text element -- the stylistic set IS the brand
  • Use weight 300 for all headlines and body text -- lightness is the signature
  • Apply blue-tinted shadows (rgba(50,50,93,0.25)) for all elevated elements
  • Use #061b31 (deep navy) for headings instead of #000000 -- the warmth matters
  • Keep border-radius between 4px-8px -- conservative rounding is intentional
  • Use "tnum" for any tabular/financial number display
  • Layer shadows: blue-tinted far + neutral close for depth parallax
  • Use #533afd purple as the primary interactive/CTA color

Don't

  • n't use weight 600-700 for sohne-var headlines -- weight 300 is the brand voice
  • n't use large border-radius (12px+, pill shapes) on cards or buttons -- Stripe is conservative
  • n't use neutral gray shadows -- always tint with blue (rgba(50,50,93,...))
  • n't skip "ss01" on any sohne-var text -- the alternate glyphs define the personality
  • n't use pure black (#000000) for headings -- always #061b31 deep navy
  • n't use warm accent colors (orange, yellow) for interactive elements -- purple is primary
  • n't apply positive letter-spacing at display sizes -- Stripe tracks tight
  • n't use the magenta/ruby accents for buttons or links -- they're decorative/gradient only
05

Components

Buttons

Primary Purple
Background`#533afd`
Text`#ffffff`
Radius4px
Padding8px 16px
Font16px sohne-var weight 400, `"ss01"`
Hover`#4434d4` background
Use: Primary CTA ("Start now", "Contact sales")
Ghost / Outlined
Backgroundtransparent
Text`#533afd`
Border`1px solid #b9b9f9`
Radius4px
Padding8px 16px
Font16px sohne-var weight 400, `"ss01"`
Hoverbackground shifts to `rgba(83,58,253,0.05)`
Use: Secondary actions
Transparent Info
Backgroundtransparent
Text`#2874ad`
Border`1px solid rgba(43,145,223,0.2)`
Radius4px
Padding8px 16px
Use: Tertiary/info-level actions
Neutral Ghost
Backgroundtransparent (`rgba(255,255,255,0)`)
Text`rgba(16,16,16,0.3)`
Border`1px solid rgb(212,222,233)`
Radius4px
Padding8px 16px
Use: Disabled or muted actions

Sessions / `.CtaButton` system — `stripe.com/payments` and product surfaces

Sessions Primary
Sessions Primary
Background`#9966ff` (rgb(153, 102, 255) — lighter lavender)
Text`#ffffff`
Radius16.5px (pill-like, much rounder than HDS 4px)
Padding3px 12px 6px 16px (asymmetric)
Font15px / weight **425** / sohne-var (note: 425 is between regular and medium)
Height33px
Use: Product-page primary CTA on stripe.com/payments — "Start accepting payments", "Start now"
Sessions Link
Sessions Link
Backgroundtransparent
Text`#000000`
Radius14px
Padding1px 6px
Font13.3px / 400
Height28px
Use: Carousel prev/next arrows on product pages

Stripe runs a **second button system** on product/payment surfaces, distinct from the HDS marketing chrome. Different color (`#9966ff` lavender vs HDS `#533afd` Deep Violet), different geometry (16.5px pill vs 4px sharp), different weight (425 vs 400).

Badges / Tags / Pills

Neutral
Neutral Pill
Background`#ffffff`
Text`#000000`
Border`1px solid #f6f9fc`
Radius4px
Padding0px 6px
Font11px weight 400
Success
Success Badge
Background`rgba(21,190,83,0.2)`
Text`#108c3d`
Border`1px solid rgba(21,190,83,0.4)`
Radius4px
Padding1px 6px
Font10px weight 300