Diff

The New Yorker vs Southwest Airlines

74 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f4f4f4
Text
#000000 #000000
Brand
#0879bf #ffbf27
Border
#e5e5e5 #000000
Display font
IrvinHeadingPro Southwest Sans
Body size
16px 16px
colors 63 changed
~ bg #ffffff #f4f4f4
~ surface #ffffff #f4f4f4
~ surface-soft #f7f7f7 #ebebeb
~ text-body #000000 #1a1a1a
~ text-muted #5d5d5d #565656
~ text-soft #797979 #767676
~ brand #0879bf #ffbf27
~ brand-hover #065d92 #f0b01c
~ brand-active #04476f #dca110
~ on-brand #ffffff #111b40
~ border #e5e5e5 #000000
~ shadow-card rgba(0,0,0,0.08) rgba(17,27,64,0.08)
~ success #1a7f3c #1a7a3c
~ warning #a8650b #b25f00
~ danger #cc0000 #c4123c
~ info #0879bf #304cb2
+ bg-alt #ffffff
+ surface-white #ffffff
+ surface-navy #111b40
+ surface-blue #304cb2
+ surface-yellow-soft #fff6dd
+ text-on-brand #111b40
+ text-on-navy #ffffff
+ text-on-blue #ffffff
+ blue #304cb2
+ blue-hover #26409c
+ blue-active #1d3380
+ navy #111b40
+ navy-2 #1a2a5e
+ red-heart #d31245
+ link #304cb2
+ link-hover #26409c
+ link-visited #5a3a9e
+ border-soft #d4d4d4
+ border-focus #304cb2
+ divider #d4d4d4
+ scrim rgba(17,27,64,0.55)
+ shadow-elev rgba(17,27,64,0.16)
+ shadow-deep rgba(17,27,64,0.24)
+ success-soft #e6f4ec
+ warning-soft #fff4e3
+ danger-soft #fdeef1
+ info-soft #eaeefb
+ star-rating #ffbf27
bg-cream #fdfaf2
surface-strong #ebebeb
surface-bone #fafafa
surface-overlay rgba(255,255,255,0.97)
text-strong #000000
text-inverse #ffffff
text-faint #a8a8a8
brand-deep #013254
brand-cyan #0879bf
accent-red #cc0000
accent-cream #fdfaf2
accent-cartoon-line #000000
border-subtle #f1f1f1
border-rule #000000
scrim-modal rgba(0,0,0,0.7)
paywall-band #000000
caricature-ink #000000
pull-quote-rule #000000
bullet-square #000000
typography 5 changed
~ display {"family":"IrvinHeadingPro","size":72} {"family":"Southwest Sans","size":80}
~ h1 {"family":"IrvinHeadingPro","size":40} {"family":"Southwest Sans","size":40}
~ h2 {"family":"IrvinHeadingPro","size":32} {"family":"Southwest Sans","size":32}
~ body {"family":"TNYAdobeCaslonPro","size":16} {"family":"Southwest Sans","size":16}
~ label {"family":"Courier New","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 0px 8px
~ card 0px 12px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Southwest Airlines → The New Yorker