Diff

The New York Times vs Southwest Airlines

74 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f4f4f4
Text
#121212 #000000
Brand
#121212 #ffbf27
Border
#dfdfdf #000000
Display font
NYT Cheltenham Southwest Sans
Body size
18px 16px
colors 64 changed
~ bg #ffffff #f4f4f4
~ surface #ffffff #f4f4f4
~ surface-soft #f7f7f7 #ebebeb
~ text #121212 #000000
~ text-muted #5a5a5a #565656
~ text-soft #727272 #767676
~ brand #121212 #ffbf27
~ link #326891 #304cb2
~ link-hover #1a4972 #26409c
~ link-visited #5a5a5a #5a3a9e
~ border #dfdfdf #000000
~ border-soft #ebebeb #d4d4d4
~ border-strong #9a9a9a #000000
~ shadow-card rgba(0,0,0,0.04) rgba(17,27,64,0.08)
~ shadow-elev rgba(0,0,0,0.08) rgba(17,27,64,0.16)
~ scrim rgba(0,0,0,0.5) rgba(17,27,64,0.55)
~ success #1a7f37 #1a7a3c
~ success-soft #e7f4ec #e6f4ec
~ warning #b27c00 #b25f00
~ warning-soft #fbf3e0 #fff4e3
~ danger #d0021b #c4123c
~ danger-soft #ffe5e8 #fdeef1
~ info #326891 #304cb2
~ info-soft #e7eef5 #eaeefb
+ bg-alt #ffffff
+ surface-white #ffffff
+ surface-navy #111b40
+ surface-blue #304cb2
+ surface-yellow-soft #fff6dd
+ text-body #1a1a1a
+ text-on-brand #111b40
+ text-on-navy #ffffff
+ text-on-blue #ffffff
+ brand-hover #f0b01c
+ brand-active #dca110
+ on-brand #111b40
+ blue #304cb2
+ blue-hover #26409c
+ blue-active #1d3380
+ navy #111b40
+ navy-2 #1a2a5e
+ red-heart #d31245
+ border-focus #304cb2
+ divider #d4d4d4
+ shadow-deep rgba(17,27,64,0.24)
+ star-rating #ffbf27
bg-section #f7f7f5
bg-dark #121212
surface-strong #ededed
surface-quote #fbf6e9
text-strong #000000
text-faint #999999
brand-red #d0021b
brand-red-hover #a8001a
brand-red-soft #ffe5e8
on-brand-red #ffffff
on-ink #ffffff
border-rule #121212
shadow-modal rgba(0,0,0,0.18)
live-red #d0021b
live-pulse #ff334b
cooking-orange #cc4b00
games-blue #6493b0
wirecutter-yellow #ffd400
typography 5 changed
~ display {"family":"NYT Cheltenham","size":72} {"family":"Southwest Sans","size":80}
~ h1 {"family":"NYT Cheltenham","size":30} {"family":"Southwest Sans","size":40}
~ h2 {"family":"NYT Cheltenham","size":24} {"family":"Southwest Sans","size":32}
~ body {"family":"NYT Imperial","size":18} {"family":"Southwest Sans","size":16}
~ label {"family":"NYT Karnak Condensed","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 · Southwest Airlines → The New York Times