Diff

Meta vs Honda

53 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1c2b33 #35363b
Brand
#0467df #cc0000
Border
#dddfe2 #d8d8d8
Display font
Optimistic Display HondaGlobalFontEN-Regular
Body size
16px 14px
colors 46 changed
~ surface #ffffff #f7f7f7
~ surface-strong #ebedf0 #e0e0e0
~ text #1c2b33 #35363b
~ text-strong #0a1014 #1a1a1a
~ text-muted #65676b #666666
~ brand #0467df #cc0000
~ brand-hover #0356b8 #b30000
~ brand-active #024187 #990000
~ brand-soft #e7f3ff #fceaea
~ border #dddfe2 #d8d8d8
~ border-soft #e4e6eb #ebebeb
~ border-strong #1c2b33 #999999
~ link #0467df #cc0000
~ link-hover #0356b8 #990000
~ success #42b72a #00854a
~ warning #f7b928 #ff8c00
~ danger #fa3e3e #cc0000
~ info #0467df #0066cc
+ bg-elevated #f7f7f7
+ bg-dark #000000
+ surface-hover #ededed
+ surface-on-dark #1a1a1a
+ text-display #000000
+ text-body #35363b
+ text-faint #999999
+ brand-deep #7a0000
+ accent-blue #0066cc
+ accent-yellow #ffd200
+ border-on-dark #2a2a2a
+ ring #cc0000
bg-deep #1c2b33
bg-soft #f5f5f5
surface-soft #f5f5f5
surface-tint #f0f4fa
text-soft #8a8d91
text-on-dark-muted #b0b3b8
accent-instagram #e4405f
accent-whatsapp #25d366
accent-quest #000000
accent-threads #000000
scrim rgba(28,43,51,0.7)
shadow-card rgba(0,0,0,0.08)
success-soft #e9f7e2
warning-soft #fff8e1
danger-soft #ffeaea
info-soft #e7f3ff
typography 5 changed
~ display {"family":"Optimistic Display","size":96} {"family":"HondaGlobalFontEN-Regular","size":72}
~ h1 {"family":"Optimistic Display","size":40} {"family":"HondaGlobalFontEN-Regular","size":40}
~ h2 {"family":"Optimistic Display","size":32} {"family":"HondaGlobalFontEN-Regular","size":32}
~ body {"family":"Meta Sans","size":16} {"family":"HondaGlobalFontEN-Regular","size":14}
~ label {"family":"Optimistic Mono","size":11} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Honda → Meta