Diff

Valorant vs ElevenLabs

57 token-level differences between these two design systems.

Role tokens
Background
#0f1923 #ffffff
Text
#ece8e1 #0a0a0a
Brand
#ff4655 #9fe870
Border
rgba(236, 232, 225, 0.15) #0000001a
Display font
Tungsten-Bold InterDisplay
Body size
15px 16px
colors 45 changed
~ bg #0f1923 #ffffff
~ surface #1a242e #ffffff
~ brand #ff4655 #9fe870
~ brand-active #a81e29 #76c349
~ on-brand #ffffff #0a0a0a
~ text #ece8e1 #0a0a0a
~ text-strong #ffffff #000000
~ text-muted #9aa6b1 #525252
~ text-faint #6c7780 #a3a3a3
~ text-on-brand #ffffff #0a0a0a
~ link #ff4655 #0a0a0a
~ border rgba(236, 232, 225, 0.15) #0000001a
~ border-strong rgba(236, 232, 225, 0.30) #00000033
~ success #22c55e #16a34a
~ warning #f5a524 #d97706
~ danger #ff4655 #dc2626
~ info #9aa6b1 #0a0a0a
+ bg-soft #fafafa
+ bg-band #f5f5f4
+ surface-soft #fafafa
+ surface-hover #f5f5f4
+ text-display #0a0a0a
+ text-soft #737373
+ brand-hover #8ad65e
+ brand-soft #d4f0c2
+ brand-faint #e2f6d5
+ accent #0e0f0c
+ accent-warm #f5f5f4
+ border-soft #0000000d
+ success-bg #dcfce7
+ warning-bg #fef3c7
+ danger-bg #fee2e2
+ info-bg #f5f5f4
bg-deep #1a242e
bg-section #212d39
surface-strong #212d39
surface-translucent rgba(15, 25, 35, 0.85)
brand-deep #d62836
brand-tint rgba(255, 70, 85, 0.15)
bone #ece8e1
bone-soft rgba(236, 232, 225, 0.7)
bone-faint rgba(236, 232, 225, 0.4)
link-hover #ffffff
selected-bg rgba(255, 70, 85, 0.20)
border-brand #ff4655
typography 5 changed
~ display {"family":"Tungsten-Bold","size":144} {"family":"InterDisplay","size":128}
~ h1 {"family":"Tungsten-Bold","size":56} {"family":"InterDisplay","size":64}
~ h2 {"family":"Tungsten-Bold","size":40} {"family":"InterDisplay","size":48}
~ body {"family":"Inter","size":15} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"JetBrains Mono","size":13}
radius 2 changed
~ button 4px 8px
~ card 6px 16px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 24px 16px
~ xl 40px 24px
↻ Swap direction · ElevenLabs → Valorant