Diff

Honda vs v0

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fafafa
Text
#35363b #262626
Brand
#cc0000 #000000
Border
#d8d8d8 rgba(0, 0, 0, 0.078)
Display font
HondaGlobalFontEN-Regular GeistSans
Body size
14px 14px
colors 49 changed
~ bg #ffffff #fafafa
~ surface #f7f7f7 #f2f2f2
~ surface-strong #e0e0e0 #e6e6e6
~ text #35363b #262626
~ text-strong #1a1a1a #000000
~ text-muted #666666 #7c7c7c
~ text-faint #999999 #cfcfcf
~ brand #cc0000 #000000
~ brand-soft #fceaea rgba(0, 0, 0, 0.08)
~ brand-deep #7a0000 #000000
~ border #d8d8d8 rgba(0, 0, 0, 0.078)
~ border-strong #999999 rgba(0, 0, 0, 0.14)
~ link #cc0000 #000000
~ link-hover #990000 #525252
+ bg-pure #ffffff
+ surface-soft #f0f0f0
+ text-medium #525252
+ text-deep #969696
+ text-soft #bababa
+ selected-bg #f2f2f2
+ disabled #bababa
+ border-subtle rgba(0, 0, 0, 0.05)
+ border-focus #000000
+ success-bg #f0f7f1
+ success-text #1f6b3e
+ warning-bg #fef6e4
+ warning-text #7a5a14
+ danger-bg #fbebec
+ danger-text #9a2c34
+ info-bg #f2f2f2
+ info-text #262626
bg-elevated #f7f7f7
bg-dark #000000
surface-hover #ededed
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-soft #ebebeb
border-on-dark #2a2a2a
ring #cc0000
success #00854a
warning #ff8c00
danger #cc0000
info #0066cc
typography 5 changed
~ display {"family":"HondaGlobalFontEN-Regular","size":72} {"family":"GeistSans","size":48}
~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} {"family":"GeistSans","size":32}
~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} {"family":"GeistSans","size":24}
~ body {"family":"HondaGlobalFontEN-Regular","size":14} {"family":"GeistSans","size":14}
~ label {"family":"JetBrains Mono","size":11} {"family":"GeistMono","size":12}
radius 1 changed
~ card 8px 12px
spacing 5 changed
~ xs 4px 1px
~ sm 8px 2px
~ md 16px 6px
~ lg 32px 12px
~ xl 48px 20px
↻ Swap direction · v0 → Honda