Diff

Instacart vs Honda

38 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#000000 → #35363b

Brand

#0aad0a → #cc0000

Border

#e0e0e0 → #d8d8d8

Display font

Instacart Sans → HondaGlobalFontEN-Regular

Body size

16px → 14px

colors 32 changed

~ bg-elevated #fafafa → #f7f7f7

~ surface #f6f6f6 → #f7f7f7

~ surface-strong #e4e4e4 → #e0e0e0

~ text #000000 → #35363b

~ text-strong #000000 → #1a1a1a

~ text-body #1a1a1a → #35363b

~ brand #0aad0a → #cc0000

~ brand-hover #089408 → #b30000

~ brand-active #067a06 → #990000

~ brand-soft #e3f5e3 → #fceaea

~ brand-deep #003d2a → #7a0000

~ accent-yellow #ffce5e → #ffd200

~ border #e0e0e0 → #d8d8d8

~ border-soft #ededed → #ebebeb

~ link #0aad0a → #cc0000

~ link-hover #067a06 → #990000

~ ring #0aad0a → #cc0000

~ success #0aad0a → #00854a

~ warning #ff7a00 → #ff8c00

~ danger #e6483d → #cc0000

~ info #3b82f6 → #0066cc

+ bg-dark #000000

+ surface-on-dark #1a1a1a

+ text-display #000000

+ accent-blue #0066cc

+ border-on-dark #2a2a2a

− bg-promo #003d2a

− bg-cream #f7f4ee

− surface-on-promo #005a3e

− accent-orange #ff7a00

− accent-red #e6483d

− rating-gold #fcb53b

typography 4 changed

~ display {"family":"Instacart Sans","size":72} → {"family":"HondaGlobalFontEN-Regular","size":72}

~ h1 {"family":"Instacart Sans","size":40} → {"family":"HondaGlobalFontEN-Regular","size":40}

~ h2 {"family":"Instacart Sans","size":32} → {"family":"HondaGlobalFontEN-Regular","size":32}

~ body {"family":"Instacart Sans","size":16} → {"family":"HondaGlobalFontEN-Regular","size":14}

radius 2 changed

~ button 12px → 6px

~ card 16px → 8px

spacing identical

No differences.

↻ Swap direction · Honda → Instacart