Diff

Honda vs Together AI

73 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fafafa
Text
#35363b #0f1f3d
Brand
#cc0000 #0f1f3d
Border
#d8d8d8 #e5e7eb
Display font
HondaGlobalFontEN-Regular Inter
Body size
14px 16px
colors 69 changed
~ bg #ffffff #fafafa
~ surface #f7f7f7 #ffffff
~ surface-hover #ededed #f4f5f7
~ surface-strong #e0e0e0 #e5e7eb
~ text #35363b #0f1f3d
~ text-strong #1a1a1a #06091a
~ text-muted #666666 #5a627a
~ brand #cc0000 #0f1f3d
~ brand-hover #b30000 #1a2d52
~ brand-soft #fceaea #27314e
~ brand-deep #7a0000 #080f1f
~ accent-blue #0066cc #0070f3
~ border #d8d8d8 #e5e7eb
~ border-soft #ebebeb #f0f1f3
~ border-strong #999999 #cbd0d8
~ success #00854a #10b981
~ warning #ff8c00 #f59e0b
~ danger #cc0000 #ef4444
~ info #0066cc #0070f3
+ bg-pure #ffffff
+ bg-surface #f4f5f7
+ bg-promo #e7f0ff
+ surface-elevated #ffffff
+ surface-soft #f9fafb
+ text-soft #7d839a
+ text-disabled #a8aebd
+ text-on-brand #ffffff
+ text-link #0070f3
+ text-link-hover #0058c2
+ accent-blue-hover #0058c2
+ accent-blue-active #003e8c
+ accent-blue-soft #e7f0ff
+ accent-cyan #00d4ff
+ accent-purple #7c3aed
+ accent-green #10b981
+ accent-orange #f59e0b
+ accent-red #ef4444
+ border-focus #0070f3
+ code-bg-light #f4f5f7
+ code-bg-dark #1a1d29
+ code-text #e5e7eb
+ code-comment #7d839a
+ code-keyword #c084fc
+ code-string #86efac
+ code-function #60a5fa
+ code-variable #fcd34d
+ code-punct #a4adc8
+ code-number #fb923c
+ shadow-card rgba(15,31,61,0.06)
+ shadow-modal rgba(15,31,61,0.2)
+ shadow-popover rgba(15,31,61,0.12)
+ shadow-elevated rgba(15,31,61,0.10)
+ success-soft #d1fae5
+ warning-soft #fef3c7
+ danger-soft #fee2e2
+ info-soft #e7f0ff
bg-elevated #f7f7f7
bg-dark #000000
surface-on-dark #1a1a1a
text-display #000000
text-body #35363b
text-faint #999999
text-on-dark #ffffff
brand-active #990000
accent-yellow #ffd200
border-on-dark #2a2a2a
link #cc0000
link-hover #990000
ring #cc0000
typography 4 changed
~ display {"family":"HondaGlobalFontEN-Regular","size":72} {"family":"Inter","size":64}
~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} {"family":"Inter","size":40}
~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} {"family":"Inter","size":32}
~ body {"family":"HondaGlobalFontEN-Regular","size":14} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Together AI → Honda