Diff

Telegram vs Disney+

75 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e1735
Text
#000000 #f9f9f9
Brand
#2aabee #0089ec
Border
#dadce0 #2a3170
Display font
Telegram Sans Inspire
Body size
15px 16px
colors 68 changed
~ bg #ffffff #0e1735
~ bg-deep #1c2733 #040714
~ surface #ffffff #1a2151
~ surface-soft #fafafa #0a132a
~ text #000000 #f9f9f9
~ text-strong #000000 #ffffff
~ text-body #222222 #dcddde
~ text-muted #707579 #a0a3a8
~ text-soft #a8b3bd #737582
~ brand #2aabee #0089ec
~ brand-hover #1c8db8 #19a0ff
~ brand-active #0088cc #006bbd
~ brand-deep #0088cc #001f55
~ border #dadce0 #2a3170
~ border-strong #a8b3bd #0089ec
~ success #4fae4e #00b89c
~ warning #f59e0b #ffa500
~ danger #e53935 #ff3b30
~ info #2aabee #0089ec
+ bg-gradient linear-gradient(180deg, #0e1735 0%, #1a2151 50%, #040714 100%)
+ surface-strong #2a3170
+ surface-card transparent
+ surface-overlay rgba(14,23,53,0.85)
+ text-disabled #5c5e6b
+ brand-arc #0089ec
+ brand-purple #5750b0
+ star-yellow #f3c032
+ marvel-red #ed1d24
+ star-wars-yellow #ffe81f
+ pixar-blue #0080ff
+ natgeo-yellow #ffcc00
+ border-soft #1f254a
+ shadow-card rgba(0,0,0,0.6)
+ shadow-billboard rgba(0,0,0,0.85)
+ shadow-glow-blue rgba(0,137,236,0.4)
+ progress-watched #0089ec
+ progress-rail #3a3f5e
+ scrim-bottom linear-gradient(0deg, #0e1735 0%, transparent 100%)
bg-soft #f4f4f5
bg-chat-light #e4ebf2
bg-chat-dark #0e1621
surface-hover #f4f4f5
surface-elevated #ffffff
surface-dark #1c2733
text-faint #cccccc
text-on-brand #ffffff
text-on-light #000000
text-on-dark #ffffff
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
link #2aabee
link-hover #1c8db8
border-subtle #f4f4f5
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":"Inspire","size":72}
~ h1 {"family":"Telegram Sans","size":40} {"family":"Inspire","size":40}
~ h2 {"family":"Telegram Sans","size":32} {"family":"Inspire","size":32}
~ body {"family":"Telegram Sans","size":15} {"family":"Inspire","size":16}
~ label {"family":"Roboto Mono","size":12} {"family":"SFMono-Regular","size":11}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Disney+ → Telegram