Diff

Honda vs ASUS

80 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0a0a0a
Text
#35363b #ffffff
Brand
#cc0000 #c6f432
Border
#d8d8d8 #2a2a2a
Display font
HondaGlobalFontEN-Regular Saira
Body size
14px 16px
colors 74 changed
~ bg #ffffff #0a0a0a
~ surface #f7f7f7 #141414
~ surface-strong #e0e0e0 #2a2a2a
~ text #35363b #ffffff
~ text-strong #1a1a1a #ffffff
~ text-faint #999999 #6e6e6e
~ border #d8d8d8 #2a2a2a
~ border-soft #ebebeb #1a1a1a
~ border-strong #999999 #cd0000
~ link-hover #990000 #ffffff
~ success #00854a #00b050
~ warning #ff8c00 #ffd700
~ danger #cc0000 #cd0000
~ info #0066cc #0073e6
+ bg-pure #000000
+ bg-deep #1a1a1a
+ bg-zenbook #ffffff
+ bg-zenbook-soft #f5f5f5
+ surface-soft #1f1f1f
+ surface-elevated #1a1a1a
+ surface-product-band #000000
+ surface-input #1f1f1f
+ text-soft #a8a8a8
+ text-disabled #4a4a4a
+ text-on-light #0a0a0a
+ text-link #cd0000
+ brand-rog #cd0000
+ brand-rog-bright #ff1a1a
+ brand-rog-deep #8b0000
+ brand-rog-glow rgba(205,0,0,0.5)
+ brand-rog-gradient linear-gradient(135deg, #ff1a1a 0%, #cd0000 50%, #8b0000 100%)
+ brand-tuf-yellow #ffd700
+ brand-tuf-deep #b8860b
+ brand-asus-blue #003a78
+ brand-asus-blue-bright #0073e6
+ brand-zenbook #3b3a36
+ brand-proart #1a1a1a
+ brand-rog-strix #ff1a1a
+ cta-primary #cd0000
+ cta-primary-hover #ff1a1a
+ cta-zenbook #0a0a0a
+ link-default #cd0000
+ link-visited #cd0000
+ border-zenbook #e0e0e0
+ scrim rgba(0,0,0,0.85)
+ shadow-card rgba(0,0,0,0.6)
+ shadow-elev rgba(0,0,0,0.8)
+ shadow-rog-glow rgba(205,0,0,0.4)
+ badge-new #cd0000
+ badge-rog #cd0000
+ badge-tuf #ffd700
+ badge-pre-order #ff1a1a
+ badge-out-of-stock #6e6e6e
+ price #ffffff
+ price-discount #cd0000
+ rating-star #ffd700
bg-elevated #f7f7f7
bg-dark #000000
surface-hover #ededed
surface-on-dark #1a1a1a
text-display #000000
text-body #35363b
text-muted #666666
text-on-dark #ffffff
brand #cc0000
brand-hover #b30000
brand-active #990000
brand-soft #fceaea
brand-deep #7a0000
accent-blue #0066cc
accent-yellow #ffd200
border-on-dark #2a2a2a
link #cc0000
ring #cc0000
typography 5 changed
~ display {"family":"HondaGlobalFontEN-Regular","size":72} {"family":"Saira","size":80}
~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} {"family":"Saira","size":40}
~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} {"family":"Saira","size":32}
~ body {"family":"HondaGlobalFontEN-Regular","size":14} {"family":"Saira","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"Roboto Mono","size":11}
radius 1 changed
~ button 6px 4px
spacing identical
No differences.
↻ Swap direction · ASUS → Honda