Diff

Telegram vs Uber Eats

81 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #000000
Brand
#2aabee #000000
Border
#dadce0 #eeeeee
Display font
Telegram Sans Uber Move
Body size
15px 16px
colors 74 changed
~ surface-soft #fafafa #f6f6f6
~ text-muted #707579 #545454
~ text-soft #a8b3bd #757575
~ brand #2aabee #000000
~ brand-hover #1c8db8 #1f1f1f
~ brand-active #0088cc #3d3d3d
~ link #2aabee #000000
~ link-hover #1c8db8 #000000
~ border #dadce0 #eeeeee
~ border-strong #a8b3bd #cccccc
~ success #4fae4e #06c167
~ warning #f59e0b #ffc043
~ danger #e53935 #e11900
~ info #2aabee #276ef1
+ bg-page #ffffff
+ surface-strong #eeeeee
+ surface-cream #f7f5f2
+ surface-input #f6f6f6
+ brand-pale #cccccc
+ brand-text-on #ffffff
+ text-disabled #aaaaaa
+ text-inverse #ffffff
+ border-soft #f6f6f6
+ border-input #cccccc
+ border-card transparent
+ star-fill #000000
+ star-empty #cccccc
+ uberone-green #06c167
+ uberone-bg #000000
+ uberone-text #ffffff
+ free-delivery-green #06c167
+ promo-pink #cae0bc
+ bestseller-bg #f6f6f6
+ bestseller-text #000000
+ scrim rgba(0,0,0,0.6)
+ shadow-card rgba(0,0,0,0.08)
+ shadow-elev rgba(0,0,0,0.18)
+ shadow-deep rgba(0,0,0,0.24)
+ success-soft #e6f9ee
+ warning-soft #fff8e6
+ danger-soft #fde8e6
+ info-soft #e8efff
bg-soft #f4f4f5
bg-deep #1c2733
bg-chat-light #e4ebf2
bg-chat-dark #0e1621
surface-hover #f4f4f5
surface-elevated #ffffff
surface-dark #1c2733
text-body #222222
text-faint #cccccc
text-on-brand #ffffff
text-on-light #000000
text-on-dark #ffffff
brand-deep #0088cc
brand-soft rgba(42,171,238,0.08)
brand-light #daf0fa
outgoing-bubble-light #effdde
outgoing-bubble-dark #766ac8
incoming-bubble-light #ffffff
incoming-bubble-dark #182533
border-subtle #f4f4f5
on-brand #ffffff
on-bg #000000
shadow-color rgba(0,0,0,0.08)
shadow-elevated rgba(0,0,0,0.16)
unread-badge #4fae4e
status-online #4fae4e
status-away #f59e0b
reaction-bg #daf0fa
message-time #707579
reply-quote #2aabee
call-active #4fae4e
message-read #2aabee
typography 5 changed
~ display {"family":"Telegram Sans","size":56} {"family":"Uber Move","size":72}
~ h1 {"family":"Telegram Sans","size":40} {"family":"Uber Move","size":40}
~ h2 {"family":"Telegram Sans","size":32} {"family":"Uber Move","size":32}
~ body {"family":"Telegram Sans","size":15} {"family":"Uber Move Text","size":16}
~ label {"family":"Roboto Mono","size":12} {"family":"Uber Move Mono","size":11}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Uber Eats → Telegram