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