Stripe | Financial Infrastructure to Grow Your Revenue

https://stripe.com 2408 elements 5/15/2026
29
Colors
1
Font Families
13
Spacing Values
5
Shadows
5
Border Radii
10
Components
79%
A11y Score

Color Palette

Brand Colors

#533afd
Primary
899 uses
#e5edf5
Secondary
57 uses
#ffe0d1
Accent
2 uses

Neutrals

#000000
2620 uses
#50617a
330 uses
#ffffff
210 uses
#64748d
172 uses
#101010
6 uses
#f2f7fe
1 uses

Full Palette

#000000
text, border, background
2620 uses
#533afd
text, border, background
899 uses
#50617a
text, border
330 uses
#061b31
text, border, background
283 uses
#ffffff
background, text, border
210 uses
#64748d
text, border
172 uses
#0000ee
text, border
90 uses
#e5edf5
background, border
57 uses
#7f7dfc
text, border, background
37 uses
#3c4f69
text, border
36 uses
#273951
text, border
32 uses
#7389ff
text, border
30 uses
#1a2c44
text, border
28 uses
#ff6118
text, border
28 uses
#b9b9f9
border
22 uses
#6480b2
text, border
14 uses
#d6d9fc
border
10 uses
#839bc8
text, border
8 uses
#101010
text, border
6 uses
#a3b5d6
text, border
6 uses

Gradients

Typography

Font Families

sohne-var (all, 2408x)

Type Scale

56px The quick brown fox 300 / 57.68px
48px The quick brown fox 300 / 55.2px
32px The quick brown fox 300 / 35.2px
26px The quick brown fox 400 / normal
22px The quick brown fox 300 / 24.2px
20px The quick brown fox 300 / 28px
18px The quick brown fox 300 / 25.2px
16px The quick brown fox 400 / normal
14px The quick brown fox 400 / 14px
12px The quick brown fox 400 / normal
11px The quick brown fox 300 / 16px
10px The quick brown fox 300 / 15px

Spacing Scale (base: 2px)

1px
28px
32px
40px
48px
52px
60px
64px
72px
80px
96px
340px
366px

Box Shadows

md
lg
xl
xl
xl

Border Radii

1px
xs
4px
sm
8px
md
16px
lg
100px
full

Accessibility

79%
WCAG Contrast Score
11 passing / 3 failing color pairs

Color Pair Analysis

Sample
#ffffff on #e3ecf7
1.19:1
FAIL
3x
Sample
#ffffff on #533afd
6.19:1
AA
8x
Sample
#635bff on #ffffff
4.7:1
AA
2x
Sample
#533afd on #ffffff
6.19:1
AA
1x