Diff

Honda vs HP

69 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#35363b #1c1c1c
Brand
#cc0000 #0096d6
Border
#d8d8d8 #e0e6ed
Display font
HondaGlobalFontEN-Regular Forma DJR Display
Body size
14px 16px
colors 64 changed
~ surface #f7f7f7 #ffffff
~ surface-strong #e0e0e0 #e0e6ed
~ text #35363b #1c1c1c
~ text-strong #1a1a1a #000000
~ text-faint #999999 #8a939d
~ brand #cc0000 #0096d6
~ brand-hover #b30000 #0080b8
~ brand-active #990000 #005d83
~ brand-deep #7a0000 #005d83
~ border #d8d8d8 #e0e6ed
~ border-soft #ebebeb #f0f4f8
~ border-strong #999999 #0096d6
~ link-hover #990000 #0080b8
~ success #00854a #2d8659
~ warning #ff8c00 #ff9500
~ danger #cc0000 #e60000
~ info #0066cc #0096d6
+ bg-soft #f7f7f7
+ bg-cool #f0f4f8
+ bg-deep #1c1c1c
+ bg-omen #000000
+ surface-soft #f7f7f7
+ surface-cool #f0f4f8
+ surface-input #ffffff
+ text-soft #5d6770
+ text-disabled #b8c0c8
+ text-link #0096d6
+ brand-light #33acdd
+ brand-darkest #002d4c
+ brand-gradient linear-gradient(135deg, #0096d6 0%, #005d83 100%)
+ cta-primary #0096d6
+ cta-primary-hover #0080b8
+ omen-red #e60000
+ omen-red-hover #c40000
+ omen-deep #1c1c1c
+ z-charcoal #3c4148
+ link-default #0096d6
+ link-visited #0096d6
+ scrim rgba(0,0,0,0.5)
+ shadow-soft rgba(0,90,150,0.06)
+ shadow-card rgba(0,90,150,0.1)
+ shadow-elev rgba(0,90,150,0.15)
+ shadow-modal rgba(0,0,0,0.25)
+ badge-new #0096d6
+ badge-deal #e60000
+ badge-eco #2d8659
+ badge-energy-star #1d4f9e
+ price #1c1c1c
+ price-strikethrough #8a939d
+ price-discount #e60000
+ rating-star #ff9500
bg-elevated #f7f7f7
bg-dark #000000
surface-hover #ededed
surface-on-dark #1a1a1a
text-display #000000
text-body #35363b
text-muted #666666
brand-soft #fceaea
accent-blue #0066cc
accent-yellow #ffd200
border-on-dark #2a2a2a
link #cc0000
ring #cc0000
typography 4 changed
~ display {"family":"HondaGlobalFontEN-Regular","size":72} {"family":"Forma DJR Display","size":64}
~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} {"family":"Forma DJR Display","size":40}
~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} {"family":"Forma DJR Display","size":32}
~ body {"family":"HondaGlobalFontEN-Regular","size":14} {"family":"Forma DJR Text","size":16}
radius 1 changed
~ card 8px 12px
spacing identical
No differences.
↻ Swap direction · HP → Honda