Diff

Steam vs GitLab

84 token-level differences between these two design systems.

Role tokens
Background
#1b2838 #ffffff
Text
#c7d5e0 #171321
Brand
#66c0f4 #fc6d26
Border
#000000 #171321
Display font
Motiva Sans GitLab Sans
Body size
14px 18px
colors 74 changed
~ bg #1b2838 #ffffff
~ surface #16202d #ffffff
~ surface-soft #2a3f5a #f2f1f5
~ text #c7d5e0 #171321
~ text-strong #ffffff #171321
~ text-soft #8f98a0 #4d4a57
~ text-faint #67707b #9b99a3
~ brand #66c0f4 #fc6d26
~ link-hover #ffffff #5a3aa8
~ border #000000 #171321
~ border-soft #3d4450 #dcd9e3
+ bg-soft #f2f1f5
+ surface-ink #171321
+ text-muted #6e6b78
+ brand-red #e24329
+ brand-purple #6e49cb
+ brand-soft rgba(252, 109, 38, 0.10)
+ brand-gradient linear-gradient(135deg, #fc6d26 0%, #e24329 50%, #6e49cb 100%)
+ cta-bg #171321
+ cta-text #ffffff
+ cta-hover #2b2640
+ cta-light-bg #ffffff
+ cta-light-text #171321
+ link #6e49cb
+ border-faint #ece9f1
+ semantic-success #108548
+ semantic-warning #c17d10
+ semantic-danger #dd2b0e
+ semantic-info #6e49cb
+ shadow-tint rgba(23, 19, 33, 0.10)
bg-deep #171a21
bg-darkest #0e141b
surface-strong #3d4450
surface-elevated #1b3346
surface-store-band #0f1c25
surface-community #101822
surface-input #316282
text-link #66c0f4
text-disabled #56707f
brand-hover #9bd2f8
brand-active #1a9fff
brand-deep #417a9b
cta-install #5c7e10
cta-install-hover #739c1a
cta-install-bright #a4d007
cta-buy #5c7e10
cta-buy-hover #739c1a
cta-add-cart #588a1b
link-default #66c0f4
link-visited #66c0f4
border-strong #66c0f4
scrim rgba(0,0,0,0.85)
shadow-card rgba(0,0,0,0.5)
shadow-elev rgba(0,0,0,0.7)
free-to-play #5c7e10
early-access #dba520
vr-supported #1a9fff
controller #5491cf
achievement #ffd900
review-positive #66c0f4
review-overwhelming #1a9fff
review-mixed #a3a375
review-negative #a34c25
discount-bg #4c6b22
discount-text #beee11
price-original #56707f
price-final #beee11
price-default #acdbf5
badge-trading #dba520
workshop-orange #dba520
success #5c7e10
warning #dba520
danger #a34c25
info #66c0f4
typography 5 changed
~ display {"family":"Motiva Sans","size":32} {"family":"GitLab Sans","size":96}
~ h1 {"family":"Motiva Sans","size":40} {"family":"GitLab Sans","size":48}
~ h2 {"family":"Motiva Sans","size":32} {"family":"GitLab Sans","size":40}
~ body {"family":"Motiva Sans","size":14} {"family":"GitLab Sans","size":18}
~ label {"family":"Lucida Console","size":11} {"family":"GitLab Mono","size":14}
radius 2 changed
~ button 3px 8px
~ card 4px 12px
spacing 3 changed
~ xs 2px 0px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · GitLab → Steam