Diff

Instacart vs Plaid

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #000000
Brand
#0aad0a #0a85ea
Border
#e0e0e0 rgba(0, 0, 0, 0.10)
Display font
Instacart Sans Plaid Sans
Body size
16px 16px
colors 52 changed
~ bg-cream #f7f4ee #f3efe6
~ surface #f6f6f6 #f3f5f8
~ text-muted #666666 #4a5568
~ text-faint #999999 #a0a8b3
~ brand #0aad0a #0a85ea
~ brand-soft #e3f5e3 #dceeff
~ brand-deep #003d2a #003c80
~ border #e0e0e0 rgba(0, 0, 0, 0.10)
~ border-soft #ededed rgba(0, 0, 0, 0.06)
~ border-strong #999999 rgba(0, 0, 0, 0.20)
~ link #0aad0a #0a85ea
~ link-hover #067a06 #0066c0
+ 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
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
typography 5 changed
~ display {"family":"Instacart Sans","size":72} {"family":"Plaid Sans","size":80}
~ h1 {"family":"Instacart Sans","size":40} {"family":"Plaid Sans","size":56}
~ h2 {"family":"Instacart Sans","size":32} {"family":"Plaid Sans","size":44}
~ body {"family":"Instacart Sans","size":16} {"family":"Plaid Sans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Plaid → Instacart