Diff

Riot Games vs Databricks

92 token-level differences between these two design systems.

Role tokens
Background
#0a141c #ffffff
Text
#f0e6d2 #1b3139
Brand
#d13639 #EB1600
Border
#1e2328 #dde2e6
Display font
Riot Beam DM Sans
Body size
16px 16px
colors 80 changed
~ bg #0a141c #ffffff
~ bg-deep #010a13 #0a0a0a
~ surface #0f1923 #f6f7f9
~ text #f0e6d2 #1b3139
~ text-muted #a09b8c #a3b1bc
~ brand #d13639 #EB1600
~ brand-deep #7a0a0d #E0250F
~ link-hover #f0e6d2 #073f7c
~ border #1e2328 #dde2e6
~ border-soft #2a3037 #eceff2
~ border-strong #d13639 #bcc5cd
+ bg-dark #1b3139
+ bg-surface #f6f7f9
+ bg-soft #fafbfc
+ bg-feature #fff4f1
+ text-charcoal #243640
+ text-slate #445566
+ text-steel #5e7382
+ text-stone #7a8b97
+ text-on-brand #ffffff
+ on-dark #ffffff
+ on-dark-muted #a3b1bc
+ brand-pressed #B71D08
+ brand-dark #9B1A07
+ brand-soft #ffe1da
+ brand-teal-deep #1b3139
+ brand-teal #243d48
+ brand-teal-light #2f5260
+ accent-orange #FF8B4A
+ accent-amber #FFB400
+ accent-violet #8B5CF6
+ accent-cyan #00A1C9
+ link #0a5fb8
+ border-dark #2f5260
+ semantic-success #00875A
+ semantic-warning-bg #fff7e0
+ semantic-warning-text #7a5a00
+ semantic-error #D7263D
+ semantic-info #0a5fb8
bg-alt #091118
surface-soft #1e2328
surface-strong #2a3037
surface-elevated #172029
surface-hexmesh rgba(200,155,60,0.04)
text-strong #ffffff
text-soft #cdbe91
text-faint #5b5a56
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
link-visited #c89b3c
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
success #0596aa
warning #c89b3c
danger #d13639
info #0596aa
typography 5 changed
~ display {"family":"Riot Beam","size":96} {"family":"DM Sans","size":80}
~ h1 {"family":"Riot Beam","size":40} {"family":"DM Sans","size":48}
~ h2 {"family":"Riot Beam","size":32} {"family":"DM Sans","size":36}
~ body {"family":"Spiegel","size":16} {"family":"DM Sans","size":16}
~ label {"family":"Roboto Mono","size":11} {"family":"JetBrains Mono","size":13}
radius 2 changed
~ button 4px 8px
~ card 14px 12px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Databricks → Riot Games