Diff

Accenture vs T-Mobile

55 token-level differences between these two design systems.

Role tokens
Background
#0a0a0a #f5f5f5
Text
#ffffff #141414
Brand
#a600ff #e20074
Border
#2e2e2e #000000
Display font
Graphik TeleNeo Web
Body size
16px 16px
colors 49 changed
~ bg #0a0a0a #f5f5f5
~ surface #141414 #f5f5f5
~ surface-soft #1c1c1c #fafafa
~ surface-strong #262626 #ebebeb
~ text #ffffff #141414
~ text-strong #ffffff #000000
~ text-muted #a3a3a3 #6e6e6e
~ text-soft #6b6b6b #a8a8a8
~ brand #a600ff #e20074
~ brand-bright #be4bff #ff1ea3
~ brand-deep #7d00c4 #a30055
~ on-brand #ffffff #fbfbfb
~ border #2e2e2e #000000
~ border-strong #4d4d4d #141414
~ link #ffffff #e20074
~ link-hover #a600ff #a30055
~ scrim rgba(0,0,0,0.7) rgba(20,20,20,0.55)
~ success #3ad29f #1f8a3a
~ warning #ffb800 #cc7a00
~ danger #ff5252 #c5002a
~ info #a600ff #0073d1
+ bg-page #f5f5f5
+ bg-white #ffffff
+ surface-dark #141414
+ surface-magenta #e20074
+ surface-magenta-soft #fce6f1
+ brand-dim #bd0061
+ text-on-dark #fbfbfb
+ text-on-brand #fbfbfb
+ text-magenta #e20074
+ link-visited #7a2160
+ border-soft #d4d4d4
+ border-magenta #e20074
+ border-on-dark rgba(255,255,255,0.18)
+ shadow-card rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.12)
bg-pure #000000
surface-light #ffffff
surface-light-soft #f2f2f2
text-body #e6e6e6
text-on-light #0a0a0a
text-on-light-mute #525252
brand-soft rgba(166,0,255,0.12)
border-on-light #e0e0e0
focus #a600ff
success-soft rgba(58,210,159,0.14)
warning-soft rgba(255,184,0,0.14)
danger-soft rgba(255,82,82,0.14)
info-soft rgba(166,0,255,0.12)
typography 4 changed
~ display {"family":"Graphik","size":80} {"family":"TeleNeo Web","size":80}
~ h1 {"family":"Graphik","size":40} {"family":"TeleNeo Web","size":40}
~ h2 {"family":"Graphik","size":32} {"family":"TeleNeo Web","size":32}
~ body {"family":"Graphik","size":16} {"family":"TeleNeo Web","size":16}
radius identical
No differences.
spacing 2 changed
~ lg 32px 24px
~ xl 64px 48px
↻ Swap direction · T-Mobile → Accenture