Diff

StackBlitz vs PayPal

76 token-level differences between these two design systems.

Role tokens
Background
#1c1f25 #ffffff
Text
#ffffff #001c64
Brand
#1574ef #003087
Border
rgba(255,255,255,0.08) #cbd2d6
Display font
Manrope PayPal Sans Big
Body size
16px 16px
colors 64 changed
~ bg #1c1f25 #ffffff
~ surface #24272e #ffffff
~ text #ffffff #001c64
~ text-body #e4e7ec #2c2e2f
~ text-muted #9ba3b4 #545d68
~ brand #1574ef #003087
~ border rgba(255,255,255,0.08) #cbd2d6
~ border-strong rgba(255,255,255,0.14) #9da3a6
~ border-soft rgba(255,255,255,0.04) #eaeced
~ link #1574ef #0070ba
~ link-hover #2b80f0 #003087
~ shadow-soft rgba(0,0,0,0.25) rgba(0, 28, 100, 0.10)
+ bg-cool #f5f7fa
+ bg-navy #003087
+ bg-midnight #001c64
+ surface-soft #f5f7fa
+ surface-strong #eaeced
+ surface-cool #dee3ea
+ surface-navy-elevated #0a3d97
+ text-subtle #6c7378
+ text-on-cool #2c2e2f
+ brand-bright #009cde
+ brand-bright-hover #0070ba
+ brand-deep-hover #001c64
+ brand-disabled #aab7c4
+ on-navy #ffffff
+ on-navy-soft #aab7c4
+ border-on-navy rgba(255,255,255,0.20)
+ semantic-success #108043
+ semantic-warning #f5a623
+ semantic-danger #d20000
+ semantic-info #009cde
+ focus-ring rgba(0,156,222,0.45)
+ shadow-ambient rgba(0, 28, 100, 0.06)
+ shadow-hard rgba(0, 28, 100, 0.18)
bg-deep #15181d
bg-darker #101216
surface-high #2c3038
surface-low #1f2127
surface-elev #363b45
text-strong #ffffff
text-soft #7d8694
text-faint #565d6b
text-on-brand #ffffff
brand-hover #2b80f0
brand-deep #0f5fcc
brand-soft rgba(21,116,239,0.16)
brand-tint rgba(21,116,239,0.08)
accent-bolt #1574ef
accent-purple #8b5cf6
accent-purple-soft rgba(139,92,246,0.16)
accent-cyan #22d3ee
border-brand rgba(21,116,239,0.45)
signin-bg rgba(49,61,94,0.24)
signin-text rgba(255,255,255,0.8)
success #34d399
success-bg rgba(52,211,153,0.15)
warning #fbbf24
warning-bg rgba(251,191,36,0.15)
danger #f87171
danger-bg rgba(248,113,113,0.15)
info #1574ef
shadow-deep rgba(0,0,0,0.45)
shadow-glow rgba(21,116,239,0.28)
typography 5 changed
~ display {"family":"Manrope","size":94} {"family":"PayPal Sans Big","size":72}
~ h1 {"family":"Manrope","size":48} {"family":"PayPal Sans Big","size":40}
~ h2 {"family":"Manrope","size":36} {"family":"PayPal Sans Big","size":32}
~ body {"family":"Inter","size":16} {"family":"PayPal Sans Small","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"PayPal Mono","size":11}
radius 2 changed
~ button 8px 12px
~ card 10px 16px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · PayPal → StackBlitz