Diff

The Guardian vs Blur

91 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#121212 #ffffff
Brand
#052962 #ff8700
Border
#dcdcdc #262626
Display font
GuardianEgyp JetBrains Mono
Body size
17px 13px
colors 78 changed
~ bg #ffffff #000000
~ text #121212 #ffffff
~ text-muted #707070 #878787
~ brand #052962 #ff8700
~ link #052962 #ff8700
~ link-hover #0c4ea0 #ffa84d
~ on-brand #ffffff #000000
~ border #dcdcdc #262626
~ border-soft #ebebeb #1a1a1a
~ border-strong #999999 #3d3d3d
~ scrim rgba(0,0,0,0.5) rgba(0,0,0,0.80)
+ bg-elev-1 #0d0d0d
+ bg-elev-2 #1a1a1a
+ bg-elev-3 #252525
+ surface-card #0d0d0d
+ surface-row-hover #1a1a1a
+ text-body #cccccc
+ text-subtle #5a5a5a
+ brand-hover #cc6c00
+ brand-active #a35700
+ brand-soft #ff87001a
+ brand-glow rgba(255,135,0,0.40)
+ border-brand #ff8700
+ semantic-up #22c55e
+ semantic-up-soft #22c55e1a
+ semantic-down #ef4444
+ semantic-down-soft #ef44441a
+ semantic-warning #fbbf24
+ semantic-info #3b82f6
+ bid-pool-orange #ff8700
+ rare-trait #ff8700
+ focus-ring rgba(255,135,0,0.50)
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 #ffffff
surface-soft #f6f6f6
surface-strong #dcdcdc
surface-quote #fff4e2
text-strong #000000
text-soft #999999
text-faint #bbbbbb
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-visited #5a5a5a
on-brand-yellow #121212
on-brand-red #ffffff
border-rule #052962
shadow-card rgba(0,0,0,0.04)
shadow-elev rgba(0,0,0,0.08)
shadow-modal rgba(0,0,0,0.18)
success #1a7f37
success-soft #e3f2e7
warning #ff7f0f
warning-soft #fff0db
danger #c70000
danger-soft #fde2e2
info #052962
info-soft #e3eaf2
live-red #c70000
live-pulse #ff3333
pillar-news #bb3a3c
pillar-opinion #e05e00
pillar-sport #0084c6
pillar-culture #ab0613
pillar-lifestyle #bb3b80
typography 5 changed
~ display {"family":"GuardianEgyp","size":72} {"family":"JetBrains Mono","size":72}
~ h1 {"family":"GuardianEgyp","size":26} {"family":"JetBrains Mono","size":40}
~ h2 {"family":"GuardianEgyp","size":22} {"family":"JetBrains Mono","size":32}
~ body {"family":"GuardianTextEgyptian","size":17} {"family":"JetBrains Mono","size":13}
~ label {"family":"Courier New","size":11} {"family":"JetBrains Mono","size":11}
radius 3 changed
~ button 9999px 0px
~ card 14px 0px
~ pill 9999px 0px
spacing 5 changed
~ xs 2px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Blur → The Guardian