Diff

Epic Games vs Pitch

63 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffff
Text
#ffffff #000000
Brand
#0078f2 #5318eb
Border
#3a3a3e #e4e2ee
Display font
Brutal Type Mark Pro Bold
Body size
14px 16px
colors 53 changed
~ bg #000000 #ffffff
~ surface #202024 #0a0a0a
~ text #ffffff #000000
~ text-muted #9ca0a4 #5b5b66
~ brand #0078f2 #5318eb
~ brand-hover #1a8cf7 #4512c9
~ brand-active #0061c4 #3a0fab
~ link-hover #1a8cf7 #3a0fab
~ border #3a3a3e #e4e2ee
~ border-strong #0078f2 #cbc8da
~ success #3ad481 #16a34a
~ warning #ff9c2a #d97706
~ danger #ff4248 #dc2626
~ info #0078f2 #5318eb
+ bg-hero #000000
+ surface-light #f6f5fb
+ text-on-hero #ffffff
+ text-muted-on-hero #a8a8b3
+ brand-tint #ebe3fe
+ link #0000ee
+ border-on-hero #26262e
bg-alt #0a0a0a
bg-deep #000000
surface-soft #2a2a2e
surface-strong #3a3a3e
surface-elevated #1a1a1e
surface-charcoal #171717
surface-bright #f5f5f5
text-soft #dadada
text-faint #6e7177
text-disabled #4a4d51
text-link #0078f2
brand-deep #005ab8
brand-pale #9bcaff
cta-bg #0078f2
cta-text #ffffff
free-game-yellow #ffce00
free-game-bg #382e00
fortnite-yellow #ffce00
fortnite-blue #0078f2
unreal-engine #00b2ff
rocket-league #0066ff
fall-guys #ff5cff
link-default #0078f2
link-visited #0078f2
border-soft #202024
scrim rgba(0,0,0,0.85)
shadow-card rgba(0,0,0,0.6)
shadow-elev rgba(0,0,0,0.8)
shadow-blue-glow rgba(0,120,242,0.4)
discount-bg #26bbff
discount-text #000000
achievement #ffce00
typography 5 changed
~ display {"family":"Brutal Type","size":80} {"family":"Mark Pro Bold","size":180}
~ h1 {"family":"Brutal Type","size":40} {"family":"Mark Pro Bold","size":56}
~ h2 {"family":"Brutal Type","size":32} {"family":"Mark Pro Bold","size":40}
~ body {"family":"Inter","size":14} {"family":"Mark Pro","size":16}
~ label {"family":"Roboto Mono","size":11} {"family":"SFMono-Regular","size":14}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing 3 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
↻ Swap direction · Pitch → Epic Games