Diff

Honda vs Plaid

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#35363b #000000
Brand
#cc0000 #0a85ea
Border
#d8d8d8 rgba(0, 0, 0, 0.10)
Display font
HondaGlobalFontEN-Regular Plaid Sans
Body size
14px 16px
colors 54 changed
~ surface #f7f7f7 #f3f5f8
~ text #35363b #000000
~ text-strong #1a1a1a #000000
~ text-muted #666666 #4a5568
~ text-faint #999999 #a0a8b3
~ brand #cc0000 #0a85ea
~ brand-soft #fceaea #dceeff
~ brand-deep #7a0000 #003c80
~ border #d8d8d8 rgba(0, 0, 0, 0.10)
~ border-soft #ebebeb rgba(0, 0, 0, 0.06)
~ border-strong #999999 rgba(0, 0, 0, 0.20)
~ link #cc0000 #0a85ea
~ link-hover #990000 #0066c0
+ bg-soft #f7f9fb
+ bg-blue #eaf3ff
+ bg-cream #f3efe6
+ 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 #f7f7f7
bg-dark #000000
surface-hover #ededed
surface-strong #e0e0e0
surface-on-dark #1a1a1a
text-display #000000
text-body #35363b
text-on-dark #ffffff
brand-hover #b30000
brand-active #990000
accent-blue #0066cc
accent-yellow #ffd200
border-on-dark #2a2a2a
ring #cc0000
success #00854a
warning #ff8c00
danger #cc0000
info #0066cc
typography 5 changed
~ display {"family":"HondaGlobalFontEN-Regular","size":72} {"family":"Plaid Sans","size":80}
~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} {"family":"Plaid Sans","size":56}
~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} {"family":"Plaid Sans","size":44}
~ body {"family":"HondaGlobalFontEN-Regular","size":14} {"family":"Plaid Sans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing identical
No differences.
↻ Swap direction · Plaid → Honda