Diff

The Guardian vs Descript

91 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fff7fa
Text
#121212 #1a1a1a
Brand
#052962 #651a39
Border
#dcdcdc #0000001a
Display font
GuardianEgyp Brett
Body size
17px 17px
colors 80 changed
~ bg #ffffff #fff7fa
~ text #121212 #1a1a1a
~ text-strong #000000 #26171d
~ text-muted #707070 #c9b9bf
~ text-soft #999999 #7a6770
~ text-faint #bbbbbb #a8949c
~ brand #052962 #651a39
~ link #052962 #651a39
~ link-hover #0c4ea0 #4a1129
~ border #dcdcdc #0000001a
~ border-strong #999999 #00000026
+ bg-soft #fffafc
+ bg-tertiary #fef0f4
+ surface-rose #f7e8ed
+ text-medium #4a3540
+ brand-hover #4a1129
+ brand-deep #3a0d20
+ brand-soft #fde2eb
+ brand-tint #f5cdda
+ accent-red #f73b3b
+ accent-orange #ff5340
+ accent-orange-soft #ffd6cc
+ accent-coral #ff7a5c
+ accent-rose #ff4d7c
+ selected-bg #fde2eb
+ disabled #c9b9bf
+ border-subtle #00000010
+ border-brand rgba(101, 26, 57, 0.30)
+ success-bg #d9eedb
+ success-text #1f4d2c
+ warning-bg #fff0d6
+ warning-text #7a4a00
+ danger-bg #fde2eb
+ danger-text #651a39
+ info-bg #e6e8f5
+ info-text #2a2a4a
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-strong #dcdcdc
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-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 #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":"Brett","size":96}
~ h1 {"family":"GuardianEgyp","size":26} {"family":"Brett","size":72}
~ h2 {"family":"GuardianEgyp","size":22} {"family":"Brett","size":48}
~ body {"family":"GuardianTextEgyptian","size":17} {"family":"Booton","size":17}
~ label {"family":"Courier New","size":11} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 9999px 12px
~ card 14px 16px
spacing 4 changed
~ xs 2px 1px
~ sm 4px 2px
~ md 12px 8px
~ xl 40px 48px
↻ Swap direction · Descript → The Guardian