Diff

PayPal vs Datadog

73 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#001c64 #212529
Brand
#003087 #632ca6
Border
#cbd2d6 #e5e7eb
Display font
PayPal Sans Big NationalWeb
Body size
16px 16px
colors 61 changed
~ bg-cool #f5f7fa #f4f5f7
~ surface #ffffff #eef1f5
~ surface-strong #eaeced #dde1e7
~ text #001c64 #212529
~ text-muted #545d68 #555555
~ brand #003087 #632ca6
~ link #0070ba #632ca6
~ link-hover #003087 #52248a
~ border #cbd2d6 #e5e7eb
~ border-strong #9da3a6 #cbd5e0
~ border-soft #eaeced #f0f0f0
+ bg-soft #f7f7f7
+ surface-hover #e2e6eb
+ bg-dark #262626
+ bg-deep #1a1a1a
+ bg-darker #0c0c0c
+ text-strong #0c0c0c
+ text-soft #6b7280
+ text-faint #9ca3af
+ text-on-dark #f3f4f6
+ text-on-dark-muted #a1a1aa
+ brand-hover #52248a
+ brand-deep #411a6e
+ brand-soft #f0e8fa
+ brand-tint rgba(99, 44, 166, 0.10)
+ chart-purple #632ca6
+ chart-blue #3b6ec7
+ chart-teal #1aa1b6
+ chart-green #3eb049
+ chart-yellow #f1c40f
+ chart-orange #f59f3a
+ chart-red #e74c3c
+ chart-pink #d65297
+ border-dark rgba(255,255,255,0.10)
+ success #16a34a
+ warning #f59f3a
+ danger #dc2626
+ info #3b6ec7
bg-navy #003087
bg-midnight #001c64
surface-soft #f5f7fa
surface-cool #dee3ea
surface-navy-elevated #0a3d97
text-body #2c2e2f
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-soft rgba(0, 28, 100, 0.10)
shadow-hard rgba(0, 28, 100, 0.18)
typography 5 changed
~ display {"family":"PayPal Sans Big","size":72} {"family":"NationalWeb","size":68}
~ h1 {"family":"PayPal Sans Big","size":40} {"family":"NationalWeb","size":48}
~ h2 {"family":"PayPal Sans Big","size":32} {"family":"NationalWeb","size":36}
~ body {"family":"PayPal Sans Small","size":16} {"family":"NationalWeb","size":16}
~ label {"family":"PayPal Mono","size":11} {"family":"Monaco","size":13}
radius 2 changed
~ button 12px 6px
~ card 16px 8px
spacing 5 changed
~ xs 4px 2px
~ sm 8px 4px
~ md 16px 8px
~ lg 32px 20px
~ xl 64px 32px
↻ Swap direction · Datadog → PayPal