Color Palette
Fill & Gradient Colors (selected)
Typography
Base Font · sohne-var
Sohne Variable
The financial infrastructure to grow your revenue. Millions of businesses of all sizes — from startups to large enterprises — use Stripe.
Light · 300
Regular · 400
Single Font Family — Variable
sohne-var
Stripe uses a single variable font across the entire system — sohne-var — at only two declared weights: Light (300) and Regular (400). All hierarchy is achieved through size, letter-spacing, and color.
No mono font declared
No bold weight
Financial infrastructure
Display Hero · 56px · Light · line-height: 57.68px · letter-spacing: −1.4px
Grow your revenue
Display XL · 48px · Light · line-height: 48px · letter-spacing: −0.96px
Payment processing
Heading XL · 32px · Regular · line-height: 35.2px · letter-spacing: −0.78px
Stripe for Platforms
Heading Large · 26px · Regular · line-height: 29.12px · letter-spacing: −0.64px
Accept payments, send payouts, and automate financial processes
Body Large · 22px · Regular · line-height: 24.2px · letter-spacing: −0.42px
A fully integrated suite of financial and payments products
Body Default · 18px · Regular · line-height: 20px · letter-spacing: −0.33px
Build and scale your payments integration with Stripe's flexible APIs
Body Small · 16px · Regular · line-height: 17.4px · letter-spacing: −0.3px
Last transaction 2 min ago · ₹4,28,000 processed today
Caption · 14px · Regular · line-height: 15px · letter-spacing: −0.081px
Products · Pricing · Docs · Support
Label / Nav · 12px · Regular · line-height: 14px · letter-spacing: 0.036px
Letter Spacing — All negative (Stripe's signature tight tracking)
Stripe
Tight
−1.4px · display hero
Financial Infrastructure
Wider
−0.64px · heading
Accept payments
LS-9
−0.3px · body text
PRODUCTS
LS-15
+0.036px · labels
Spacing
Spacing Scale
Token scale — 0.8px → 340px (sub-pixel precision throughout)
Shadow / Elevation
Shadow Tokens
6 tokens — precise sub-pixel offsets, characteristic blue-tinted shadows
Small
--shadow-sm
rgba(50,50,93,.12) 27px −12.4px + rgba(0,0,0,.05) 16.2px −8.1px · card resting state
Medium
--shadow-md
rgba(0,0,0,.1) 40.374px −20.187px · floating elements
Large
--shadow-lg
rgba(50,50,93,.12) 32px · spread shadow · panels
XL
--shadow-xl
Dual layer — deep plunge + spread · modals, hero cards
Shadow 5
--shadow-shadow-5
rgba(23,23,23,.08) 35px · warm dark ambient glow
Shadow 6
--shadow-shadow-6
rgba(23,23,23,.06) 6px · subtle depth for UI elements
Z-Index
| Token | Value | Usage |
|---|
| --z-1 | -1 | Background layers, decorative canvas elements |
| --z-2 | 1 | Base content layer |
| --z-3 | 2 | Slightly elevated UI elements |
| --z-4 | 3 | Active/focused interactive elements |
Breakpoints
No breakpoints defined
Stripe's design system does not expose responsive breakpoint tokens in its CSS custom properties. The breakpoint object in the DTCG JSON export is empty. Stripe's responsive layout is handled through CSS media queries defined directly in component stylesheets rather than through design token variables.
Opacity
Opacity Tokens
7 tokens — 10% → 90%
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Token | Background Token | Ratio | Rating |
|---|
| Dark Blue | Black | 1.21:1 | Fail |
| Dark Blue | Blue (brand) | 2.81:1 | Fail |
| Dark Blue | White | 17.37:1 | AAA |
| Dark Blue | Light Blue | 5.16:1 | AA |
| Dark Blue | Light Blue 3 | 14.69:1 | AAA |
| Blue 2 | Black | 3.33:1 | AA Large |
| Blue 2 | Blue (brand) | 1.02:1 | Fail |
| Blue 2 | White | 6.3:1 | AA |
| Blue 2 | Light Blue | 1.87:1 | Fail |
| Blue 2 | Light Blue 3 | 5.33:1 | AA |
| Blue 3 | Black | 4.42:1 | AA Large |
| Blue 3 | White | 4.75:1 | AA |
| Blue 3 | Light Blue 3 | 4.01:1 | AA Large |
| Blue 4 (link) | White | 9.4:1 | AAA |
| Light Blue 2 | Black | 6.75:1 | AA |
| Light Blue 2 | White | 3.11:1 | AA Large |
| Light Blue 2 | Light Blue 3 | 2.63:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Blue (brand)--color-blue#533AFD
White--color-white#FFFFFF
Light Blue--color-light-blue#7F7DFC
Light Blue 3--color-light-blue-3#E5EDF5
White 2--color-white-2#F8FAFD
Light Blue 7--color-light-blue-7#E2E4FF
White 12--color-white-12#F2F7FE
Dark Blue 16--color-dark-blue-16#0D1738
Border Brand--color-light-blue-4#B9B9F9
Border Subtle--color-light-blue-5#D6D9FC
Border Default--color-light-blue-6#D4DEE9
Dark Blue--color-dark-blue#061B31
Blue 2--color-blue-2#50617A
Blue 3--color-blue-3#64748D
Dark Blue 2--color-dark-blue-2#3C4F69
Dark Blue 4--color-dark-blue-4#1A2C44
Light Blue 2--color-light-blue-2#7389FF
Orange--color-orange#FF6118
Green--color-green#76B900
Purple 2--color-purple-2#873EFF
Light Purple--color-light-purple#C489FF
Blue 23--color-blue-23#6763E4
Dark Blue 15--color-dark-blue-15#141E4B
Base (variable)--font-family-basesohne-var
Light--font-weight-light300
Regular--font-weight-regular400
Micro--font-size-2xs8px
XS--font-size-xs9px
SM--font-size-sm10px
Base--font-size-base11px
LG--font-size-lg12px
XL--font-size-xl14px
2XL--font-size-2xl16px
3XL--font-size-3xl18px
4XL--font-size-4xl22px
6XL--font-size-6xl26px
32px--font-size-32px32px
48px--font-size-48px48px
56px--font-size-56px56px
Tight--letter-spacing-tight−1.4px
Normal--letter-spacing-normal−0.96px
Wide--letter-spacing-wide−0.78px
Wider--letter-spacing-wider−0.64px
LS-9--letter-spacing-ls-9−0.3px
LS-14--letter-spacing-ls-14−0.081px
LS-15 (+)--letter-spacing-ls-15+0.036px
LS-16 (+)--letter-spacing-ls-16+0.1px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Instant--duration-instant0.1s
Fast--duration-fast0.12s
Normal--duration-normal0.15s
Slow--duration-slow0.2s
D7 (primary)--duration-duration-70.3s
D13--duration-duration-131.2s
Linear--easing-linearlinear
Ease In Out--easing-ease-in-outease-in-out
Background--z-1-1
Base--z-21
Elevated--z-32
Active--z-43
Design System Preview · Stripe (Light) · Generated 18/04/2026