Diff

The Guardian vs Astro

88 token-level differences between these two design systems.

Role tokens
Background
#ffffff #060913
Text
#121212 #f2f6fa
Brand
#052962 #ff5d01
Border
#dcdcdc #ffffff14
Display font
GuardianEgyp Mona Sans
Body size
17px 16px
colors 76 changed
~ bg #ffffff #060913
~ surface #ffffff #11162a
~ surface-strong #dcdcdc #1a2040
~ text #121212 #f2f6fa
~ text-muted #707070 #bfc1c9
~ text-soft #999999 #8a8fa3
~ text-faint #bbbbbb #5a5e72
~ brand #052962 #ff5d01
~ link #052962 #bfc1c9
~ link-hover #0c4ea0 #ff5d01
~ border #dcdcdc #ffffff14
~ border-strong #999999 #ffffff26
~ success #1a7f37 #17c964
~ warning #ff7f0f #f5a524
~ danger #c70000 #f31260
~ info #052962 #a374ff
+ bg-soft #0d1117
+ bg-deep #02040a
+ surface-elevated #222850
+ brand-hover #e54e00
+ brand-deep #c43f00
+ accent #a374ff
+ accent-hover #8e5dff
+ accent-soft #7611a6
+ accent-deep #4c0c70
+ gradient-from #a374ff
+ gradient-to #ff5d01
+ gradient-mid #d465a8
+ selected-bg #1a2040
+ disabled #5a5e72
+ border-subtle #ffffff0a
+ border-brand rgba(255, 93, 1, 0.40)
+ success-bg rgba(23, 201, 100, 0.12)
+ warning-bg rgba(245, 165, 36, 0.14)
+ danger-bg rgba(243, 18, 96, 0.14)
+ info-bg rgba(163, 116, 255, 0.14)
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-soft #f6f6f6
surface-quote #fff4e2
text-strong #000000
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-soft #ebebeb
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)
scrim rgba(0,0,0,0.5)
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
typography 5 changed
~ display {"family":"GuardianEgyp","size":72} {"family":"Mona Sans","size":96}
~ h1 {"family":"GuardianEgyp","size":26} {"family":"Mona Sans","size":64}
~ h2 {"family":"GuardianEgyp","size":22} {"family":"Mona Sans","size":48}
~ body {"family":"GuardianTextEgyptian","size":17} {"family":"Inter","size":16}
~ label {"family":"Courier New","size":11} {"family":"IBM Plex Mono","size":13}
radius 2 changed
~ button 9999px 8px
~ card 14px 16px
spacing 5 changed
~ xs 2px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 24px 12px
~ xl 40px 20px
↻ Swap direction · Astro → The Guardian