Diff

Riot Games vs Leonardo.Ai

90 token-level differences between these two design systems.

Role tokens
Background
#0a141c #000000
Text
#f0e6d2 #ffffff
Brand
#d13639 #ffffff
Border
#1e2328 #1f1f1f
Display font
Riot Beam ufficioDisplay
Body size
16px 16px
colors 80 changed
~ bg #0a141c #000000
~ bg-alt #091118 #0a0a0a
~ surface #0f1923 #111111
~ text #f0e6d2 #ffffff
~ text-soft #cdbe91 #cfcfcf
~ text-muted #a09b8c #a1a1a1
~ text-faint #5b5a56 #6b6b6b
~ brand #d13639 #ffffff
~ brand-deep #7a0a0d #e5e5e5
~ on-brand #ffffff #000000
~ link-hover #f0e6d2 #cfcfcf
~ link-visited #c89b3c #a1a1a1
~ border #1e2328 #1f1f1f
~ border-strong #d13639 #2e2e2e
~ success #0596aa #22c55e
~ warning #c89b3c #f59e0b
~ danger #d13639 #ef4444
~ info #0596aa #22d3ee
+ surface-deep #080808
+ surface-raised #1a1a1a
+ text-body #ededed
+ brand-soft #1a1a1a
+ accent-violet #8b5cf6
+ accent-violet-soft #1e1633
+ accent-cyan #22d3ee
+ link #ffffff
+ selected #1a1a1a
+ disabled #2a2a2a
+ neutral-50 #fafafa
+ neutral-100 #ededed
+ neutral-300 #a1a1a1
+ neutral-500 #6b6b6b
+ neutral-700 #2a2a2a
+ neutral-900 #111111
+ border-subtle #141414
+ shadow-ambient rgba(0,0,0,0.5)
+ shadow-deep rgba(0,0,0,0.75)
+ shadow-glow rgba(255,255,255,0.06)
+ success-bg #0b1f12
+ success-text #86efac
+ warning-bg #231803
+ warning-text #fcd34d
+ danger-bg #230b0b
+ danger-text #fca5a5
+ info-bg #04222a
+ info-text #a5f3fc
bg-deep #010a13
surface-soft #1e2328
surface-strong #2a3037
surface-elevated #172029
surface-hexmesh rgba(200,155,60,0.04)
text-disabled #3c3c41
text-link #c89b3c
brand-hover #e74049
brand-active #a02125
hextech-gold #c89b3c
hextech-gold-soft #a08838
hextech-gold-bright #f0e6d2
valorant-red #fa4454
valorant-blue #0f1923
lol-blue #0596aa
lol-gold #c89b3c
tft-purple #5b1a86
wildrift-orange #ff9b00
legends-runeterra #9a48ff
link-default #c89b3c
border-soft #2a3037
border-gold #c89b3c
scrim rgba(0,0,0,0.85)
shadow-card rgba(0,0,0,0.6)
shadow-elev rgba(0,0,0,0.8)
shadow-gold-glow rgba(200,155,60,0.4)
rank-iron #5d5a55
rank-bronze #8d603a
rank-silver #a4abb6
rank-gold #c89b3c
rank-platinum #3aaba0
rank-diamond #5d68d6
rank-master #9a48ff
rank-challenger #f0e6d2
typography 5 changed
~ display {"family":"Riot Beam","size":96} {"family":"ufficioDisplay","size":80}
~ h1 {"family":"Riot Beam","size":40} {"family":"ufficioDisplay","size":40}
~ h2 {"family":"Riot Beam","size":32} {"family":"ufficioDisplay","size":32}
~ body {"family":"Spiegel","size":16} {"family":"canvaSans","size":16}
~ label {"family":"Roboto Mono","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 4px 8px
~ card 14px 12px
spacing 3 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
↻ Swap direction · Leonardo.Ai → Riot Games