Diff

The Economist vs The New York Times

42 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#121212 #121212
Brand
#e3120b #121212
Border
#cccccc #dfdfdf
Display font
EconMilo Display NYT Cheltenham
Body size
17px 18px
colors 37 changed
~ bg-section #f7f7f0 #f7f7f5
~ surface-soft #f7f7f0 #f7f7f7
~ surface-strong #e8e8e1 #ededed
~ surface-quote #fff5e6 #fbf6e9
~ text-soft #707070 #727272
~ text-faint #9a9a9a #999999
~ brand #e3120b #121212
~ link #e3120b #326891
~ link-hover #b80f08 #1a4972
~ border #cccccc #dfdfdf
~ border-soft #e0e0e0 #ebebeb
~ border-strong #888888 #9a9a9a
~ success-soft #e3f2e7 #e7f4ec
~ warning #a06200 #b27c00
~ warning-soft #faf0db #fbf3e0
~ danger #e3120b #d0021b
~ danger-soft #fce5e3 #ffe5e8
~ info #1a4972 #326891
~ info-soft #e3eaf2 #e7eef5
+ brand-red #d0021b
+ brand-red-hover #a8001a
+ brand-red-soft #ffe5e8
+ on-brand-red #ffffff
+ on-ink #ffffff
+ live-red #d0021b
+ live-pulse #ff334b
+ cooking-orange #cc4b00
+ games-blue #6493b0
+ wirecutter-yellow #ffd400
brand-hover #b80f08
brand-soft #fce5e3
brand-deep #9a0e09
on-brand #ffffff
border-rule-red #e3120b
podcast-accent #1a4972
espresso-accent #5a3000
briefing-rule #e3120b
typography 5 changed
~ display {"family":"EconMilo Display","size":72} {"family":"NYT Cheltenham","size":72}
~ h1 {"family":"EconMilo Display","size":24} {"family":"NYT Cheltenham","size":30}
~ h2 {"family":"EconMilo Display","size":20} {"family":"NYT Cheltenham","size":24}
~ body {"family":"EconMilo Serif","size":17} {"family":"NYT Imperial","size":18}
~ label {"family":"Courier New","size":11} {"family":"NYT Karnak Condensed","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · The New York Times → The Economist