Diff

Substack vs The New Yorker

52 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#363737 #000000
Brand
#ff6719 #0879bf
Border
rgba(0, 0, 0, 0.10) #e5e5e5
Display font
Cahuenga IrvinHeadingPro
Body size
19px 16px
colors 45 changed
~ bg-cream #fbf9f4 #fdfaf2
~ text #363737 #000000
~ text-strong #1a1a1a #000000
~ text-soft #666c70 #797979
~ text-muted #878787 #5d5d5d
~ brand #ff6719 #0879bf
~ brand-hover #e85412 #065d92
~ brand-deep #cc4a0e #013254
~ border rgba(0, 0, 0, 0.10) #e5e5e5
~ border-strong rgba(0, 0, 0, 0.20) #000000
~ success #0d8050 #1a7f3c
~ warning #d97706 #a8650b
~ danger #dc2626 #cc0000
~ info #2563eb #0879bf
+ surface-soft #f7f7f7
+ surface-strong #ebebeb
+ surface-bone #fafafa
+ surface-overlay rgba(255,255,255,0.97)
+ text-body #000000
+ text-inverse #ffffff
+ brand-active #04476f
+ brand-cyan #0879bf
+ accent-red #cc0000
+ accent-cream #fdfaf2
+ accent-cartoon-line #000000
+ border-subtle #f1f1f1
+ border-rule #000000
+ shadow-card rgba(0,0,0,0.08)
+ scrim-modal rgba(0,0,0,0.7)
+ paywall-band #000000
+ caricature-ink #000000
+ pull-quote-rule #000000
+ bullet-square #000000
bg-elev #fafaf7
bg-soft #f6f6f3
surface-warm #fafaf7
text-link #363737
brand-tint rgba(255, 103, 25, 0.10)
brand-tint-strong rgba(255, 103, 25, 0.18)
border-soft rgba(0, 0, 0, 0.06)
border-warm rgba(0, 0, 0, 0.08)
selection-bg rgba(255, 103, 25, 0.20)
shadow-soft rgba(0, 0, 0, 0.06)
shadow-medium rgba(0, 0, 0, 0.10)
reading-rule rgba(0, 0, 0, 0.08)
typography 5 changed
~ display {"family":"Cahuenga","size":56} {"family":"IrvinHeadingPro","size":72}
~ h1 {"family":"Cahuenga","size":40} {"family":"IrvinHeadingPro","size":40}
~ h2 {"family":"Cahuenga","size":32} {"family":"IrvinHeadingPro","size":32}
~ body {"family":"Spectral","size":19} {"family":"TNYAdobeCaslonPro","size":16}
~ label {"family":"Monaco","size":13} {"family":"Courier New","size":11}
radius 2 changed
~ button 6px 0px
~ card 12px 0px
spacing identical
No differences.
↻ Swap direction · The New Yorker → Substack