Diff

Sierra vs Vodafone

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#302e2d #25282b
Brand
#006838 #e60000
Border
#e4e0dc #cccccc
Display font
GT America Vodafone
Body size
16px 16px
colors 51 changed
~ surface #f6f5f3 #ffffff
~ text #302e2d #25282b
~ brand #006838 #e60000
~ brand-deep #05351d #ac1811
~ text-soft #55524f #bebebe
~ text-muted #a39f99 #7e7e7e
~ link #006838 #3860be
~ link-hover #05351d #3860be
~ border #e4e0dc #cccccc
~ border-strong #d4cfc9 #333333
+ bg-page #ffffff
+ surface-soft #f2f2f2
+ surface-strong #eeeeee
+ surface-dark #25282b
+ surface-translucent rgba(255,255,255,0.1)
+ brand-dim #cc0000
+ brand-band #e60000
+ text-strong #25282b
+ text-form #333333
+ text-on-dark #ffffff
+ text-on-brand #ffffff
+ link-visited #5e2a8c
+ border-soft #e8e8e8
+ border-on-dark rgba(255,255,255,0.25)
+ border-pill-red #e60000
+ scrim rgba(37,40,43,0.5)
+ shadow-card rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.12)
+ success #067f5b
+ warning #a35316
+ danger #e60000
+ info #3860be
bg-cream #f6f5f3
hero-bg #05351d
text-heading #222222
on-hero #ffffff
brand-bright #0a7d46
text-faint #7c7873
glass-cta rgba(255, 255, 255, 0.10)
selected-bg #eef0ec
disabled #a39f99
border-subtle #efece8
border-hero rgba(255, 255, 255, 0.16)
success-bg #e3efe7
success-text #05351d
warning-bg #f6ecd9
warning-text #6b531c
danger-bg #f6e4e1
danger-text #8a3a2e
info-bg #e6edf2
info-text #2c4a5e
typography 5 changed
~ display {"family":"GT America","size":80} {"family":"Vodafone","size":72}
~ h1 {"family":"GT America","size":48} {"family":"Vodafone","size":40}
~ h2 {"family":"GT America","size":32} {"family":"Vodafone","size":32}
~ body {"family":"GT America","size":16} {"family":"Vodafone","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"icomoon","size":11}
radius 3 changed
~ button 8px 6px
~ card 12px 24px
~ pill 9999px 60px
spacing 3 changed
~ xs 0px 2px
~ lg 32px 24px
~ xl 64px 38px
↻ Swap direction · Vodafone → Sierra