Diff

Deloitte vs T-Mobile

54 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f5f5f5
Text
#000000 #141414
Brand
#86bc25 #e20074
Border
#e3e3e3 #000000
Display font
Open Sans TeleNeo Web
Body size
16px 16px
colors 48 changed
~ bg #ffffff #f5f5f5
~ surface #ffffff #f5f5f5
~ surface-soft #f5f5f5 #fafafa
~ surface-strong #e3e3e3 #ebebeb
~ surface-dark #333333 #141414
~ text #000000 #141414
~ text-muted #666666 #6e6e6e
~ text-soft #767676 #a8a8a8
~ text-on-dark #ffffff #fbfbfb
~ brand #86bc25 #e20074
~ brand-deep #5c8a1a #a30055
~ on-brand #000000 #fbfbfb
~ border #e3e3e3 #000000
~ border-strong #666666 #141414
~ border-on-dark #5e5e5e rgba(255,255,255,0.18)
~ link #1076a8 #e20074
~ link-hover #0c5d85 #a30055
~ scrim rgba(0,0,0,0.55) rgba(20,20,20,0.55)
~ success #86bc25 #1f8a3a
~ warning #ed8b00 #cc7a00
~ danger #da291c #c5002a
~ info #1076a8 #0073d1
+ bg-page #f5f5f5
+ bg-white #ffffff
+ surface-magenta #e20074
+ surface-magenta-soft #fce6f1
+ brand-bright #ff1ea3
+ brand-dim #bd0061
+ text-on-brand #fbfbfb
+ text-magenta #e20074
+ link-visited #7a2160
+ border-soft #d4d4d4
+ border-magenta #e20074
+ shadow-card rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.12)
surface-dark-elev #4a4a4a
text-body #000000
text-on-dark-mute #cccccc
brand-soft #eef7e0
accent #1076a8
accent-hover #0c5d85
accent-soft #e7f1f6
on-accent #ffffff
focus #1076a8
success-soft #eef7e0
warning-soft #fdf0dc
danger-soft #fbe9e7
info-soft #e7f1f6
typography 4 changed
~ display {"family":"Open Sans","size":64} {"family":"TeleNeo Web","size":80}
~ h1 {"family":"Open Sans","size":40} {"family":"TeleNeo Web","size":40}
~ h2 {"family":"Open Sans","size":32} {"family":"TeleNeo Web","size":32}
~ body {"family":"Open Sans","size":16} {"family":"TeleNeo Web","size":16}
radius identical
No differences.
spacing 2 changed
~ lg 32px 24px
~ xl 64px 48px
↻ Swap direction · T-Mobile → Deloitte