Diff

Netflix vs KAYAK

81 token-level differences between these two design systems.

Role tokens
Background
#141414 #ffffff
Text
#ffffff #1e2026
Brand
#e50914 #ff690f
Border
#404040 #dadde0
Display font
Netflix Sans Open Sans
Body size
16px 14px
colors 70 changed
~ bg #141414 #ffffff
~ surface #1f1f1f #ffffff
~ surface-strong #2f2f2f #e8e8e8
~ surface-soft #181818 #f4f4f4
~ text #ffffff #1e2026
~ text-strong #ffffff #0a0c10
~ text-body #e5e5e5 #2c2f36
~ text-muted #b3b3b3 #5e6470
~ text-soft #808080 #8a909d
~ brand #e50914 #ff690f
~ brand-hover #f40612 #e85a07
~ brand-active #b81d24 #c54a00
~ brand-deep #831010 #7a3300
~ border #404040 #dadde0
~ border-soft #2a2a2a #eaecef
~ border-strong #737373 #a4a9b4
~ shadow-card rgba(0,0,0,0.75) rgba(0,0,0,0.06)
~ success #46d369 #0a8c3e
~ warning #ffa00a #d97706
~ danger #e87c03 #cc2935
~ info #0080ff #0066cc
+ bg-alt #f8f8f8
+ bg-data #f0f3f5
+ surface-orange-soft #fff2e8
+ surface-graph #fdf3eb
+ surface-deal #fff2e8
+ text-on-brand #ffffff
+ text-on-orange #ffffff
+ brand-light #fff2e8
+ brand-graph #ff690f
+ brand-graph-fill #fdf3eb
+ link #0066cc
+ link-hover #004a99
+ link-visited #5a4392
+ border-input-focus #ff690f
+ divider #dadde0
+ scrim rgba(0,0,0,0.5)
+ shadow-elev rgba(0,0,0,0.14)
+ shadow-deep rgba(255,105,15,0.18)
+ success-soft #e8f6ee
+ success-deep #0a6b32
+ warning-soft #fff7e6
+ danger-soft #fdeaec
+ info-soft #e8f0f8
+ best-flag #0a8c3e
+ cheapest-flag #0a8c3e
+ fastest-flag #9333ea
+ short-stop-flag #0066cc
+ hacker-fare #ff690f
+ pricegraph-stroke #ff690f
+ pricegraph-fill #fdf3eb
+ pricegraph-low #0a8c3e
+ pricegraph-high #cc2935
bg-deep #000000
surface-card #181818
surface-overlay rgba(0,0,0,0.75)
text-disabled #737373
on-brand #ffffff
accent-gold #e5b34a
accent-green #46d369
scrim-top linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%)
scrim-bottom linear-gradient(0deg, #141414 0%, transparent 100%)
shadow-billboard rgba(0,0,0,0.85)
danger-text #b9090b
rating-mature #cc0000
progress-watched #e50914
progress-rail #5a5a5a
player-control rgba(255,255,255,0.9)
player-rail rgba(255,255,255,0.3)
download-fill #0071eb
typography 4 changed
~ display {"family":"Netflix Sans","size":72} {"family":"Open Sans","size":72}
~ h1 {"family":"Netflix Sans","size":40} {"family":"Open Sans","size":40}
~ h2 {"family":"Netflix Sans","size":32} {"family":"Open Sans","size":32}
~ body {"family":"Netflix Sans","size":16} {"family":"Open Sans","size":14}
radius 2 changed
~ button 4px 6px
~ card 6px 8px
spacing 5 changed
~ xs 4px 2px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · KAYAK → Netflix