Diff

Roblox vs The Guardian

95 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#191b1f #121212
Brand
#ed1d24 #052962
Border
#e4e7eb #dcdcdc
Display font
Builder Sans GuardianEgyp
Body size
14px 17px
colors 83 changed
~ surface-soft #f7f8fa #f6f6f6
~ surface-strong #eaecf0 #dcdcdc
~ text #191b1f #121212
~ text-soft #3b4248 #999999
~ text-muted #5c6770 #707070
~ text-faint #8b96a0 #bbbbbb
~ brand #ed1d24 #052962
~ link-hover #d11017 #0c4ea0
~ link-visited #ed1d24 #5a5a5a
~ border #e4e7eb #dcdcdc
~ border-soft #eaecf0 #ebebeb
~ border-strong #ed1d24 #999999
~ scrim rgba(0,0,0,0.6) rgba(0,0,0,0.5)
~ shadow-card rgba(25,27,31,0.08) rgba(0,0,0,0.04)
~ shadow-elev rgba(25,27,31,0.16) rgba(0,0,0,0.08)
~ shadow-modal rgba(25,27,31,0.24) rgba(0,0,0,0.18)
~ success #00b06f #1a7f37
~ warning #ff8a00 #ff7f0f
~ danger #ed1d24 #c70000
~ info #00a2ff #052962
+ bg-section-news #ffffff
+ bg-section-opinion #f6f6f6
+ bg-section-longread #fff4e2
+ bg-section-sport #fff4f2
+ bg-section-culture #fdf0e9
+ bg-section-lifestyle #fbeee7
+ bg-dark #1a1a1a
+ surface-quote #fff4e2
+ brand-light #0c4ea0
+ brand-dark #041c46
+ brand-red #c70000
+ brand-red-hover #a30000
+ brand-yellow #ffe500
+ brand-orange #ff7f0f
+ brand-pink #ed145b
+ brand-blue-sport #0084c6
+ brand-green-environment #509e2f
+ brand-purple-lifestyle #7d0068
+ link #052962
+ on-brand-yellow #121212
+ on-brand-red #ffffff
+ border-rule #052962
+ success-soft #e3f2e7
+ warning-soft #fff0db
+ danger-soft #fde2e2
+ info-soft #e3eaf2
+ live-red #c70000
+ live-pulse #ff3333
+ pillar-news #bb3a3c
+ pillar-opinion #e05e00
+ pillar-sport #0084c6
+ pillar-culture #ab0613
+ pillar-lifestyle #bb3b80
bg-alt #f7f8fa
bg-deep #ffffff
surface-elevated #ffffff
surface-dark #191b1f
surface-dark-soft #232529
text-link #ed1d24
text-disabled #a8b3bd
text-on-dark #ffffff
text-on-dark-soft #cdd2d8
text-on-dark-muted #9ba3ab
brand-hover #d11017
brand-active #a30c11
brand-pale #fcd1d3
brand-deep #7a0a0d
robux-green #00b06f
robux-green-hover #008f59
robux-green-deep #006d44
free-badge-blue #00a2ff
premium-purple #b08aff
premium-purple-deep #7e5cd6
builders-club #ffd000
online-green #00b06f
voice-blue #00a2ff
link-default #ed1d24
border-input #cdd2d8
experience-thumb-1 #0095da
experience-thumb-2 #ff8a00
experience-thumb-3 #9b30ff
rating-thumbs-up #00b06f
rating-thumbs-down #5c6770
typography 5 changed
~ display {"family":"Builder Sans","size":56} {"family":"GuardianEgyp","size":72}
~ h1 {"family":"Builder Sans","size":40} {"family":"GuardianEgyp","size":26}
~ h2 {"family":"Builder Sans","size":32} {"family":"GuardianEgyp","size":22}
~ body {"family":"Builder Sans","size":14} {"family":"GuardianTextEgyptian","size":17}
~ label {"family":"Source Code Pro","size":11} {"family":"Courier New","size":11}
radius 2 changed
~ button 8px 9999px
~ card 12px 14px
spacing 5 changed
~ xs 4px 2px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · The Guardian → Roblox