Diff

Segment vs Honda

53 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000d25 #35363b
Brand
#1866ee #cc0000
Border
#e1e3ea #d8d8d8
Display font
Whitney SSm A HondaGlobalFontEN-Regular
Body size
16px 14px
colors 48 changed
~ bg-dark #000d25 #000000
~ surface #ffffff #f7f7f7
~ brand #1866ee #cc0000
~ brand-hover #0e58d9 #b30000
~ brand-active #0844a8 #990000
~ brand-deep #0263e0 #7a0000
~ brand-soft #e3eefe #fceaea
~ text #000d25 #35363b
~ text-strong #000817 #1a1a1a
~ text-muted #525463 #666666
~ link #0263e0 #cc0000
~ link-hover #0844a8 #990000
~ border #e1e3ea #d8d8d8
~ border-soft #f0f1f5 #ebebeb
~ border-strong #cdd0da #999999
~ border-on-dark rgba(255,255,255,0.14) #2a2a2a
~ success #0a8754 #00854a
~ warning #a35316 #ff8c00
~ danger #c0322a #cc0000
~ info #1866ee #0066cc
+ bg-elevated #f7f7f7
+ surface-hover #ededed
+ surface-strong #e0e0e0
+ surface-on-dark #1a1a1a
+ text-display #000000
+ text-body #35363b
+ text-faint #999999
+ on-brand #ffffff
+ accent-blue #0066cc
+ accent-yellow #ffd200
+ ring #cc0000
bg-soft #f4f4f4
bg-cool #f6f9fb
surface-dark #000d25
surface-elev #0a1838
brand-pale #cfdcfb
text-soft #7a7d8b
text-on-brand #ffffff
text-on-dark-muted rgba(255,255,255,0.72)
link-on-dark #62aef8
badge-bg #e3eefe
badge-text #0844a8
scrim rgba(0,13,37,0.62)
shadow-card rgba(0,13,37,0.06)
shadow-elev rgba(0,13,37,0.12)
success-soft #dff5ea
warning-soft #fff3dc
danger-soft #fde6e3
typography 5 changed
~ display {"family":"Whitney SSm A","size":72} {"family":"HondaGlobalFontEN-Regular","size":72}
~ h1 {"family":"Whitney SSm A","size":40} {"family":"HondaGlobalFontEN-Regular","size":40}
~ h2 {"family":"Whitney SSm A","size":32} {"family":"HondaGlobalFontEN-Regular","size":32}
~ body {"family":"Whitney SSm A","size":16} {"family":"HondaGlobalFontEN-Regular","size":14}
~ label {"family":"Operator Mono","size":11} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Honda → Segment