Diff

Plaid vs NVIDIA

67 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #000000
Brand
#0a85ea #76b900
Border
rgba(0, 0, 0, 0.10) #cccccc
Display font
Plaid Sans NVIDIA-EMEA
Body size
16px 16px
colors 56 changed
~ surface #f3f5f8 #ffffff
~ surface-soft #fafbfc #f7f7f7
~ text-muted #4a5568 #757575
~ text-soft #7a8390 #898989
~ text-faint #a0a8b3 #a7a7a7
~ brand #0a85ea #76b900
~ on-brand #ffffff #000000
~ link #0a85ea #0046a4
~ link-hover #0066c0 #0033b8
~ border rgba(0, 0, 0, 0.10) #cccccc
~ border-strong rgba(0, 0, 0, 0.20) #5e5e5e
~ border-soft rgba(0, 0, 0, 0.06) #e0e0e0
+ bg-hero #000000
+ surface-dark #000000
+ surface-dark-elev #1a1a1a
+ text-body #1a1a1a
+ text-on-dark #ffffff
+ text-on-dark-mute rgba(255,255,255,0.7)
+ brand-active #5a8d00
+ brand-pale #bff230
+ scrim rgba(0,0,0,0.6)
+ hero-overlay rgba(0,0,0,0.5)
+ success #3f8500
+ success-soft #e8f3d3
+ warning #df6500
+ warning-bright #ef9100
+ warning-soft #feeeb2
+ danger #e52020
+ danger-deep #650b0b
+ danger-soft #fce4e4
+ accent-purple #952fc6
+ accent-purple-deep #4d1368
+ accent-purple-pale #f9d4ff
bg-soft #f7f9fb
bg-blue #eaf3ff
bg-cream #f3efe6
bg-ink #000000
surface-cream #faf6ed
text-medium #1a1f29
brand-strong #0066c0
brand-deep #003c80
brand-soft #dceeff
brand-wash rgba(10, 133, 234, 0.08)
accent #000000
accent-soft rgba(10, 133, 234, 0.08)
selected-bg #eaf3ff
disabled #c4cad3
border-blue rgba(10, 133, 234, 0.30)
success-bg #dcf3e3
success-text #1f5d3f
warning-bg #fff0c5
warning-text #7a5e1f
danger-bg #fde0e0
danger-text #8a2828
info-bg #dceeff
info-text #003c80
typography 5 changed
~ display {"family":"Plaid Sans","size":80} {"family":"NVIDIA-EMEA","size":72}
~ h1 {"family":"Plaid Sans","size":56} {"family":"NVIDIA-EMEA","size":40}
~ h2 {"family":"Plaid Sans","size":44} {"family":"NVIDIA-EMEA","size":32}
~ body {"family":"Plaid Sans","size":16} {"family":"NVIDIA-EMEA","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"NVIDIA Sans Mono","size":11}
radius 2 changed
~ button 8px 2px
~ card 12px 14px
spacing 4 changed
~ xs 4px 2px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · NVIDIA → Plaid