Diff

Honda vs Instacart

38 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#35363b #000000
Brand
#cc0000 #0aad0a
Border
#d8d8d8 #e0e0e0
Display font
HondaGlobalFontEN-Regular Instacart Sans
Body size
14px 16px
colors 32 changed
~ bg-elevated #f7f7f7 #fafafa
~ surface #f7f7f7 #f6f6f6
~ surface-strong #e0e0e0 #e4e4e4
~ text #35363b #000000
~ text-strong #1a1a1a #000000
~ text-body #35363b #1a1a1a
~ brand #cc0000 #0aad0a
~ brand-hover #b30000 #089408
~ brand-active #990000 #067a06
~ brand-soft #fceaea #e3f5e3
~ brand-deep #7a0000 #003d2a
~ accent-yellow #ffd200 #ffce5e
~ border #d8d8d8 #e0e0e0
~ border-soft #ebebeb #ededed
~ link #cc0000 #0aad0a
~ link-hover #990000 #067a06
~ ring #cc0000 #0aad0a
~ success #00854a #0aad0a
~ warning #ff8c00 #ff7a00
~ danger #cc0000 #e6483d
~ info #0066cc #3b82f6
+ bg-promo #003d2a
+ bg-cream #f7f4ee
+ surface-on-promo #005a3e
+ accent-orange #ff7a00
+ accent-red #e6483d
+ rating-gold #fcb53b
bg-dark #000000
surface-on-dark #1a1a1a
text-display #000000
accent-blue #0066cc
border-on-dark #2a2a2a
typography 4 changed
~ display {"family":"HondaGlobalFontEN-Regular","size":72} {"family":"Instacart Sans","size":72}
~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} {"family":"Instacart Sans","size":40}
~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} {"family":"Instacart Sans","size":32}
~ body {"family":"HondaGlobalFontEN-Regular","size":14} {"family":"Instacart Sans","size":16}
radius 2 changed
~ button 6px 12px
~ card 8px 16px
spacing identical
No differences.
↻ Swap direction · Instacart → Honda