Diff

The Washington Post vs Buttondown

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #000000
Brand
#000000 #0069ff
Border
#cccccc #e5e5e5
Display font
Postoni Auto Pro
Body size
18px 16px
colors 52 changed
~ surface #ffffff #fafafa
~ text-muted #444444 #525252
~ text-soft #666666 #737373
~ text-faint #999999 #a3a3a3
~ brand #000000 #0069ff
~ link #2a64a6 #0069ff
~ border #cccccc #e5e5e5
~ border-strong #888888 #d4d4d4
~ success #177a3a #15803d
~ warning #a06200 #b45309
~ danger #cf202f #dc2626
~ info #2a64a6 #0069ff
+ surface-2 #f4f4f5
+ surface-3 #e9e9eb
+ brand-hover #0052cc
+ brand-active #0043a8
+ brand-soft #e6f0ff
+ on-brand #ffffff
+ accent #fef08a
+ accent-soft #fefce8
+ highlight #fef08a
+ success-bg #dcfce7
+ warning-bg #fef3c7
+ danger-bg #fee2e2
+ info-bg #e6f0ff
bg-section #f5f5f5
bg-dark #000000
surface-soft #f8f8f8
surface-strong #eeeeee
surface-quote #f5f0e6
brand-tagline #000000
brand-red #cf202f
brand-red-hover #a8001a
brand-red-soft #ffe5e7
link-hover #173e6e
link-visited #5a5a5a
on-brand-red #ffffff
on-ink #ffffff
border-soft #e0e0e0
border-rule #000000
border-rule-heavy #000000
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.55)
success-soft #e3f2e7
warning-soft #faf0db
danger-soft #ffe5e7
info-soft #e3edf7
live-red #cf202f
live-pulse #ff3344
democracy-tagline-bg #000000
typography 5 changed
~ display {"family":"Postoni","size":72} {"family":"Auto Pro","size":96}
~ h1 {"family":"Postoni","size":28} {"family":"Auto Pro","size":44}
~ h2 {"family":"Postoni","size":22} {"family":"Auto Pro","size":32}
~ body {"family":"Franklin ITC","size":18} {"family":"Auto Pro","size":16}
~ label {"family":"Courier New","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 4px 8px
~ card 14px 12px
spacing 3 changed
~ xs 2px 0px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Buttondown → The Washington Post