Diff

Netflix vs Twilio

73 token-level differences between these two design systems.

Role tokens
Background
#141414 #ffffff
Text
#ffffff #0d122b
Brand
#e50914 #f22f46
Border
#404040 #0d122b1f
Display font
Netflix Sans Twilio Sans Display
Body size
16px 16px
colors 61 changed
~ bg #141414 #ffffff
~ surface #1f1f1f #fafafc
~ text #ffffff #0d122b
~ text-strong #ffffff #000000
~ text-muted #b3b3b3 #5b6079
~ text-soft #808080 #8b8e9e
~ brand #e50914 #f22f46
~ brand-active #b81d24 #b8182f
~ border #404040 #0d122b1f
~ border-soft #2a2a2a #0d122b10
~ border-strong #737373 #0d122b33
~ success #46d369 #1bb564
~ warning #ffa00a #f59e0b
~ danger #e87c03 #f22f46
~ info #0080ff #3da9fc
+ bg-soft #f4f4f6
+ bg-blue #e1eeff
+ bg-blue-deep #cee0fa
+ bg-navy #0d122b
+ surface-2 #f7f7f9
+ surface-3 #eeeef2
+ surface-navy #1a1f3a
+ text-faint #b5b8c4
+ text-on-brand #ffffff
+ text-on-navy #ffffff
+ text-on-navy-muted #a8acc1
+ brand-strong #d6203a
+ brand-soft #fde7eb
+ brand-soft-2 #fbd5dc
+ accent #0d122b
+ accent-blue #3da9fc
+ accent-blue-deep #1e7fd9
+ accent-blue-soft #dcefff
+ border-navy-on-dark #22253a
+ border-focus #f22f46
+ success-bg #dcf6e7
+ warning-bg #fef3c7
+ danger-bg #fde7eb
+ info-bg #dcefff
bg-deep #000000
surface-strong #2f2f2f
surface-soft #181818
surface-card #181818
surface-overlay rgba(0,0,0,0.75)
text-body #e5e5e5
text-disabled #737373
brand-hover #f40612
brand-deep #831010
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-card rgba(0,0,0,0.75)
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 5 changed
~ display {"family":"Netflix Sans","size":72} {"family":"Twilio Sans Display","size":80}
~ h1 {"family":"Netflix Sans","size":40} {"family":"Twilio Sans Display","size":44}
~ h2 {"family":"Netflix Sans","size":32} {"family":"Twilio Sans Display","size":36}
~ body {"family":"Netflix Sans","size":16} {"family":"Twilio Sans Text","size":16}
~ label {"family":"SFMono-Regular","size":11} {"family":"Twilio Sans Mono","size":14}
radius 2 changed
~ button 4px 6px
~ card 6px 24px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · Twilio → Netflix