Diff

Wikipedia vs The Economist

54 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#202122 #121212
Brand
#3366cc #e3120b
Border
#a2a9b1 #cccccc
Display font
Linux Libertine EconMilo Display
Body size
14px 17px
colors 48 changed
~ surface-soft #f8f9fa #f7f7f0
~ surface-strong #eaecf0 #e8e8e1
~ brand #3366cc #e3120b
~ brand-hover #2a4b91 #b80f08
~ brand-deep #162d56 #9a0e09
~ text #202122 #121212
~ text-strong #101114 #000000
~ text-muted #54595d #5a5a5a
~ text-soft #72777d #707070
~ text-faint #a2a9b1 #9a9a9a
~ link #3366cc #e3120b
~ link-visited #795cb2 #5a5a5a
~ link-hover #447ff5 #b80f08
~ border #a2a9b1 #cccccc
~ border-strong #54595d #888888
~ border-soft #eaecf0 #e0e0e0
~ success #14866d #1a7f37
~ warning #fc3 #a06200
~ danger #dd3333 #e3120b
~ info #3366cc #1a4972
+ bg-section #f7f7f0
+ bg-dark #121212
+ surface-quote #fff5e6
+ brand-soft #fce5e3
+ border-rule #121212
+ border-rule-red #e3120b
+ 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 #faf0db
+ danger-soft #fce5e3
+ info-soft #e3eaf2
+ podcast-accent #1a4972
+ espresso-accent #5a3000
+ briefing-rule #e3120b
bg-soft #f8f9fa
bg-warm #fefefe
brand-pressed #1f3870
brand-tint #dde6f0
text-on-brand #ffffff
link-red #dd3333
selected-bg #dde6f0
border-brand #3366cc
infobox-header #eaecf0
citation-needed-orange #cc6633
stub-template #cee0f5
typography 5 changed
~ display {"family":"Linux Libertine","size":48} {"family":"EconMilo Display","size":72}
~ h1 {"family":"Linux Libertine","size":28} {"family":"EconMilo Display","size":24}
~ h2 {"family":"Linux Libertine","size":22} {"family":"EconMilo Display","size":20}
~ body {"family":"Linux Libertine","size":14} {"family":"EconMilo Serif","size":17}
~ label {"family":"Inconsolata","size":12} {"family":"Courier New","size":11}
radius identical
No differences.
spacing 1 changed
~ xs 0px 2px
↻ Swap direction · The Economist → Wikipedia