Diff

Netflix vs Apple TV+

46 token-level differences between these two design systems.

Role tokens
Background
#141414 #000000
Text
#ffffff #ffffff
Brand
#e50914 #0070e0
Border
#404040 #38383a
Display font
Netflix Sans Inter
Body size
16px 17px
colors 40 changed
~ bg #141414 #000000
~ surface #1f1f1f #1c1c1e
~ surface-strong #2f2f2f #2c2c2e
~ surface-soft #181818 #0a0a0a
~ surface-card #181818 #1c1c1e
~ surface-overlay rgba(0,0,0,0.75) rgba(0,0,0,0.85)
~ text-body #e5e5e5 #ebebf5
~ text-muted #b3b3b3 #ebebf599
~ text-soft #808080 #ebebf57a
~ text-disabled #737373 #ebebf54d
~ brand #e50914 #0070e0
~ brand-hover #f40612 #1a86f0
~ brand-active #b81d24 #005fbf
~ brand-deep #831010 #003c8f
~ accent-green #46d369 #34c759
~ border #404040 #38383a
~ border-soft #2a2a2a #1c1c1e
~ border-strong #737373 #48484a
~ scrim-bottom linear-gradient(0deg, #141414 0%, transparent 100%) linear-gradient(0deg, #000000 0%, transparent 100%)
~ shadow-card rgba(0,0,0,0.75) rgba(0,0,0,0.7)
~ shadow-billboard rgba(0,0,0,0.85) rgba(0,0,0,0.9)
~ success #46d369 #34c759
~ warning #ffa00a #ff9f0a
~ danger #e87c03 #ff453a
~ info #0080ff #0070e0
~ progress-watched #e50914 #ffffff
~ progress-rail #5a5a5a rgba(255,255,255,0.3)
+ brand-tv #cd0000
+ accent-pink #ff375f
+ accent-orange #ff9f0a
+ accent-purple #bf5af2
+ rating-badge #ffffff
+ liquid-glass-tint rgba(255,255,255,0.18)
accent-gold #e5b34a
scrim-top linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%)
danger-text #b9090b
rating-mature #cc0000
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":"Inter","size":72}
~ h1 {"family":"Netflix Sans","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Netflix Sans","size":32} {"family":"Inter","size":32}
~ body {"family":"Netflix Sans","size":16} {"family":"Inter","size":17}
radius 2 changed
~ button 4px 8px
~ card 6px 12px
spacing identical
No differences.
↻ Swap direction · Apple TV+ → Netflix