Stripe | Financial Infrastructure to Grow Your Revenue

DesignScan preview · https://stripe.com · 2026-06-13

Colors

primary#533afd
on-primary#ffffff
secondary#e2e4ff
on-secondary#533afd
primary-hover#4032c8
background#ffffff
text#64748d
accent-1#50617a
accent-2#061b31
on-accent-2#ffffff
border#e5edf5
muted-surface#f8fafd
error#d8351e
success#00b261

Typography

display48px · 300 · lh 1.1
The quick brown fox jumps
headline-lg32px · 300 · lh 1.1
The quick brown fox jumps
headline-md26px · 300 · lh 1.1
The quick brown fox jumps
headline-sm22px · 300 · lh 1.1
The quick brown fox jumps
body-lg16px · 400 · lh 1.4
The quick brown fox jumps
body14px · 400 · lh 1.4
The quick brown fox jumps
label12px · 400 · lh 1.4
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
3xl32px

Radius

xs2px
sm4px
md6px
lg8px
xl16px

Layout

sm480px
md600px
lg640px
xl840px
2xl940px
3xl1300px
containermax-width 1266px

Elevation

sm
md
lg
xl

Components

button-primary · :hover #4032c8
button-secondary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
surface-muted
Subtle secondary surface — sidebars, sections, callouts.
link
Inline link example →
badge Badge
feedback messages
error · Something went wrong — please try again.
success · Saved. Your changes are live.