Diff

Apple TV+ vs HBO Max

46 token-level differences between these two design systems.

Role tokens
Background
#000000 #0b0c0f
Text
#ffffff #ffffff
Brand
#0070e0 #0072ff
Border
#38383a #2a2d33
Display font
Inter Sharp Grotesk
Body size
17px 16px
colors 40 changed
~ bg #000000 #0b0c0f
~ surface #1c1c1e #1a1c1f
~ surface-strong #2c2c2e #26282d
~ surface-soft #0a0a0a #15171a
~ surface-card #1c1c1e #1a1c1f
~ surface-overlay rgba(0,0,0,0.85) rgba(11,12,15,0.85)
~ text-body #ebebf5 #e6e7eb
~ text-muted #ebebf599 #9aa0aa
~ text-soft #ebebf57a #6c7280
~ text-disabled #ebebf54d #4d5159
~ brand #0070e0 #0072ff
~ brand-hover #1a86f0 #1f86ff
~ brand-active #005fbf #0058cc
~ brand-deep #003c8f #003e99
~ border #38383a #2a2d33
~ border-soft #1c1c1e #1f2126
~ border-strong #48484a #4d5159
~ shadow-billboard rgba(0,0,0,0.9) rgba(0,0,0,0.85)
~ scrim-bottom linear-gradient(0deg, #000000 0%, transparent 100%) linear-gradient(0deg, #0b0c0f 0%, transparent 100%)
~ success #34c759 #00c08a
~ warning #ff9f0a #f6b73c
~ danger #ff453a #ff4757
~ info #0070e0 #0072ff
~ progress-watched #ffffff #0072ff
~ progress-rail rgba(255,255,255,0.3) #3a3d44
+ brand-purple #9c1ee0
+ brand-purple-soft #5f0d8a
+ accent-gold #c9a961
+ accent-cyan #00d4ff
+ scrim-top linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%)
+ danger-deep #cc1c2c
+ rating-mature #ffffff
+ hbo-prestige #7a1fa2
brand-tv #cd0000
accent-pink #ff375f
accent-orange #ff9f0a
accent-green #34c759
accent-purple #bf5af2
rating-badge #ffffff
liquid-glass-tint rgba(255,255,255,0.18)
typography 4 changed
~ display {"family":"Inter","size":72} {"family":"Sharp Grotesk","size":72}
~ h1 {"family":"Inter","size":40} {"family":"Sharp Grotesk","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Sharp Grotesk","size":32}
~ body {"family":"Inter","size":17} {"family":"Sharp Grotesk Text","size":16}
radius 2 changed
~ button 8px 4px
~ card 12px 6px
spacing identical
No differences.
↻ Swap direction · HBO Max → Apple TV+