Diff

Starbucks vs Honda

71 token-level differences between these two design systems.

Role tokens
Background
#f2f0eb #ffffff
Text
rgba(0,0,0,0.87) #35363b
Brand
#006241 #cc0000
Border
#d6dbde #d8d8d8
Display font
SoDoSans HondaGlobalFontEN-Regular
Body size
16px 14px
colors 63 changed
~ bg #f2f0eb #ffffff
~ surface #ffffff #f7f7f7
~ brand #006241 #cc0000
~ text rgba(0,0,0,0.87) #35363b
~ text-faint rgba(0,0,0,0.38) #999999
~ border #d6dbde #d8d8d8
~ border-soft #e7e7e7 #ebebeb
~ link #00754A #cc0000
~ link-hover #006241 #990000
+ bg-elevated #f7f7f7
+ bg-dark #000000
+ surface-hover #ededed
+ surface-strong #e0e0e0
+ surface-on-dark #1a1a1a
+ text-strong #1a1a1a
+ text-display #000000
+ text-body #35363b
+ text-muted #666666
+ brand-hover #b30000
+ brand-active #990000
+ brand-soft #fceaea
+ brand-deep #7a0000
+ accent-blue #0066cc
+ accent-yellow #ffd200
+ border-strong #999999
+ border-on-dark #2a2a2a
+ ring #cc0000
+ success #00854a
+ warning #ff8c00
+ danger #cc0000
+ info #0066cc
bg-white #ffffff
bg-ceramic #edebe9
bg-gold-lightest #faf6ee
bg-feature #1e3932
bg-footer #1e3932
bg-cool #f9f9f9
surface-soft #f9f9f9
brand-accent #00754A
brand-house #1e3932
brand-uplift #2b5148
brand-light #d4e9e2
brand-consent #008248
gold #cba258
gold-light #dfc49d
gold-lightest #faf6ee
text-soft rgba(0,0,0,0.58)
text-rewards #33433d
text-on-dark-soft rgba(255,255,255,0.70)
on-gold #1e3932
black #000000
red #c82014
yellow #fbbc05
red-tint hsl(4 82% 43% / 5%)
green-light-tint hsl(160 32% 87% / 33%)
scrim rgba(0,0,0,0.5)
shadow-card-1 rgba(0,0,0,0.14)
shadow-card-2 rgba(0,0,0,0.24)
shadow-frap-1 rgba(0,0,0,0.24)
shadow-frap-2 rgba(0,0,0,0.14)
shadow-nav-1 rgba(0,0,0,0.10)
shadow-nav-2 rgba(0,0,0,0.06)
shadow-nav-3 rgba(0,0,0,0.07)
typography 5 changed
~ display {"family":"SoDoSans","size":72} {"family":"HondaGlobalFontEN-Regular","size":72}
~ h1 {"family":"SoDoSans","size":24} {"family":"HondaGlobalFontEN-Regular","size":40}
~ h2 {"family":"SoDoSans","size":24} {"family":"HondaGlobalFontEN-Regular","size":32}
~ body {"family":"SoDoSans","size":16} {"family":"HondaGlobalFontEN-Regular","size":14}
~ label {"family":"Monaco","size":11} {"family":"JetBrains Mono","size":11}
radius 3 changed
~ button 8px 6px
~ card 12px 8px
~ pill 50px 9999px
spacing identical
No differences.
↻ Swap direction · Honda → Starbucks