Diff

Valorant vs Inngest

56 token-level differences between these two design systems.

Role tokens
Background
#0f1923 #0c0a09
Text
#ece8e1 #f6f6f6
Brand
#ff4655 #cbb26a
Border
rgba(236, 232, 225, 0.15) #27241f
Display font
Tungsten-Bold Whyte
Body size
15px 16px
colors 48 changed
~ bg #0f1923 #0c0a09
~ bg-deep #1a242e #070605
~ surface #1a242e #16130f
~ brand #ff4655 #cbb26a
~ on-brand #ffffff #1a161c
~ text #ece8e1 #f6f6f6
~ text-muted #9aa6b1 #a8a39b
~ text-faint #6c7780 #57534e
~ link #ff4655 #4078f2
~ border rgba(236, 232, 225, 0.15) #27241f
~ border-strong rgba(236, 232, 225, 0.30) #ffffff1f
~ border-brand #ff4655 #cbb26a66
~ success #22c55e #3ecf8e
~ warning #f5a524 #cbb26a
~ danger #ff4655 #ef4444
~ info #9aa6b1 #4078f2
+ surface-alt #1a161c
+ surface-muted #211c16
+ brand-hover #d8c285
+ brand-pressed #b89a55
+ brand-soft #cbb26a1f
+ accent #cbb26a
+ selected #cbb26a26
+ disabled #211c16
+ disabled-text #6b665f
+ text-heading #fafaf9
+ text-soft #7c7770
+ border-soft #ffffff0f
+ shadow-ambient rgba(0,0,0,0.4)
+ shadow-standard rgba(0,0,0,0.55)
+ shadow-elevated rgba(0,0,0,0.7)
+ success-bg #0f2a1d
+ warning-bg #2a2310
+ danger-bg #2a1414
+ info-bg #101a2e
bg-section #212d39
surface-strong #212d39
surface-translucent rgba(15, 25, 35, 0.85)
brand-deep #d62836
brand-active #a81e29
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)
text-strong #ffffff
text-on-brand #ffffff
link-hover #ffffff
selected-bg rgba(255, 70, 85, 0.20)
typography 5 changed
~ display {"family":"Tungsten-Bold","size":144} {"family":"Whyte","size":84}
~ h1 {"family":"Tungsten-Bold","size":56} {"family":"Whyte","size":72}
~ h2 {"family":"Tungsten-Bold","size":40} {"family":"Whyte","size":40}
~ body {"family":"Inter","size":15} {"family":"Circular XX","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"SFMono-Regular","size":13}
radius 3 changed
~ button 4px 0px
~ card 6px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Inngest → Valorant