Diff

Pitch vs Vodafone

51 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #25282b
Brand
#5318eb #e60000
Border
#e4e2ee #cccccc
Display font
Mark Pro Bold Vodafone
Body size
16px 16px
colors 40 changed
~ surface #0a0a0a #ffffff
~ text #000000 #25282b
~ text-muted #5b5b66 #7e7e7e
~ brand #5318eb #e60000
~ link #0000ee #3860be
~ link-hover #3a0fab #3860be
~ border #e4e2ee #cccccc
~ border-strong #cbc8da #333333
~ success #16a34a #067f5b
~ warning #d97706 #a35316
~ danger #dc2626 #e60000
~ info #5318eb #3860be
+ bg-page #ffffff
+ surface-soft #f2f2f2
+ surface-strong #eeeeee
+ surface-dark #25282b
+ surface-translucent rgba(255,255,255,0.1)
+ brand-deep #ac1811
+ brand-dim #cc0000
+ brand-band #e60000
+ text-strong #25282b
+ text-form #333333
+ text-soft #bebebe
+ 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)
bg-hero #000000
surface-light #f6f5fb
text-on-hero #ffffff
text-muted-on-hero #a8a8b3
brand-hover #4512c9
brand-active #3a0fab
brand-tint #ebe3fe
border-on-hero #26262e
typography 5 changed
~ display {"family":"Mark Pro Bold","size":180} {"family":"Vodafone","size":72}
~ h1 {"family":"Mark Pro Bold","size":56} {"family":"Vodafone","size":40}
~ h2 {"family":"Mark Pro Bold","size":40} {"family":"Vodafone","size":32}
~ body {"family":"Mark Pro","size":16} {"family":"Vodafone","size":16}
~ label {"family":"SFMono-Regular","size":14} {"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 → Pitch