Diff

Plaid vs Instacart

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #000000
Brand
#0a85ea #0aad0a
Border
rgba(0, 0, 0, 0.10) #e0e0e0
Display font
Plaid Sans Instacart Sans
Body size
16px 16px
colors 52 changed
~ bg-cream #f3efe6 #f7f4ee
~ surface #f3f5f8 #f6f6f6
~ text-muted #4a5568 #666666
~ text-faint #a0a8b3 #999999
~ brand #0a85ea #0aad0a
~ brand-deep #003c80 #003d2a
~ brand-soft #dceeff #e3f5e3
~ link #0a85ea #0aad0a
~ link-hover #0066c0 #067a06
~ border rgba(0, 0, 0, 0.10) #e0e0e0
~ border-strong rgba(0, 0, 0, 0.20) #999999
~ border-soft rgba(0, 0, 0, 0.06) #ededed
+ bg-elevated #fafafa
+ bg-promo #003d2a
+ surface-hover #ededed
+ surface-strong #e4e4e4
+ surface-on-promo #005a3e
+ text-body #1a1a1a
+ text-on-dark #ffffff
+ brand-hover #089408
+ brand-active #067a06
+ accent-orange #ff7a00
+ accent-yellow #ffce5e
+ accent-red #e6483d
+ ring #0aad0a
+ success #0aad0a
+ warning #ff7a00
+ danger #e6483d
+ info #3b82f6
+ rating-gold #fcb53b
bg-soft #f7f9fb
bg-blue #eaf3ff
bg-ink #000000
surface-soft #fafbfc
surface-cream #faf6ed
text-medium #1a1f29
text-soft #7a8390
brand-strong #0066c0
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":"Instacart Sans","size":72}
~ h1 {"family":"Plaid Sans","size":56} {"family":"Instacart Sans","size":40}
~ h2 {"family":"Plaid Sans","size":44} {"family":"Instacart Sans","size":32}
~ body {"family":"Plaid Sans","size":16} {"family":"Instacart Sans","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 8px 12px
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · Instacart → Plaid