Diff

Southwest Airlines vs The New York Times

74 token-level differences between these two design systems.

Role tokens
Background
#f4f4f4 #ffffff
Text
#000000 #121212
Brand
#ffbf27 #121212
Border
#000000 #dfdfdf
Display font
Southwest Sans NYT Cheltenham
Body size
16px 18px
colors 64 changed
~ bg #f4f4f4 #ffffff
~ surface #f4f4f4 #ffffff
~ surface-soft #ebebeb #f7f7f7
~ text #000000 #121212
~ text-muted #565656 #5a5a5a
~ text-soft #767676 #727272
~ brand #ffbf27 #121212
~ link #304cb2 #326891
~ link-hover #26409c #1a4972
~ link-visited #5a3a9e #5a5a5a
~ border #000000 #dfdfdf
~ border-soft #d4d4d4 #ebebeb
~ border-strong #000000 #9a9a9a
~ scrim rgba(17,27,64,0.55) rgba(0,0,0,0.5)
~ shadow-card rgba(17,27,64,0.08) rgba(0,0,0,0.04)
~ shadow-elev rgba(17,27,64,0.16) rgba(0,0,0,0.08)
~ success #1a7a3c #1a7f37
~ success-soft #e6f4ec #e7f4ec
~ warning #b25f00 #b27c00
~ warning-soft #fff4e3 #fbf3e0
~ danger #c4123c #d0021b
~ danger-soft #fdeef1 #ffe5e8
~ info #304cb2 #326891
~ info-soft #eaeefb #e7eef5
+ 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
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
typography 5 changed
~ display {"family":"Southwest Sans","size":80} {"family":"NYT Cheltenham","size":72}
~ h1 {"family":"Southwest Sans","size":40} {"family":"NYT Cheltenham","size":30}
~ h2 {"family":"Southwest Sans","size":32} {"family":"NYT Cheltenham","size":24}
~ body {"family":"Southwest Sans","size":16} {"family":"NYT Imperial","size":18}
~ label {"family":"SFMono-Regular","size":13} {"family":"NYT Karnak Condensed","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 14px
spacing 3 changed
~ xs 0px 2px
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · The New York Times → Southwest Airlines