Diff

CodeSandbox vs HBO Max

65 token-level differences between these two design systems.

Role tokens
Background
#0e0e0e #0b0c0f
Text
#f0f0f0 #ffffff
Brand
#eaff96 #0072ff
Border
rgba(240,240,240,0.10) #2a2d33
Display font
TWK Everett Sharp Grotesk
Body size
16px 16px
colors 54 changed
~ bg #0e0e0e #0b0c0f
~ bg-deep #080808 #000000
~ surface #1d1d1d #1a1c1f
~ text #f0f0f0 #ffffff
~ text-muted #a0a0a0 #9aa0aa
~ text-soft #8a8a8a #6c7280
~ brand #eaff96 #0072ff
~ brand-hover #f1ffb0 #1f86ff
~ brand-deep #d6f06a #003e99
~ on-brand #343434 #ffffff
~ border rgba(240,240,240,0.10) #2a2d33
~ border-strong rgba(240,240,240,0.18) #4d5159
~ border-soft rgba(240,240,240,0.06) #1f2126
~ success #7ee787 #00c08a
~ warning #f0b429 #f6b73c
~ danger #ff6b6b #ff4757
~ info #e3ff73 #0072ff
+ surface-strong #26282d
+ surface-soft #15171a
+ surface-card #1a1c1f
+ surface-overlay rgba(11,12,15,0.85)
+ text-body #e6e7eb
+ text-disabled #4d5159
+ brand-active #0058cc
+ 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%)
+ scrim-bottom linear-gradient(0deg, #0b0c0f 0%, transparent 100%)
+ shadow-card rgba(0,0,0,0.7)
+ shadow-billboard rgba(0,0,0,0.85)
+ danger-deep #cc1c2c
+ rating-mature #ffffff
+ progress-watched #0072ff
+ progress-rail #3a3d44
+ hbo-prestige #7a1fa2
bg-elevated #1d1d1d
surface-high #262626
surface-low #141414
text-faint #5c5c5c
brand-soft rgba(234,255,150,0.14)
brand-tint rgba(234,255,150,0.07)
lime-text #e3ff73
lime-text-hover #edff9a
link #e3ff73
link-hover #edff9a
border-brand rgba(234,255,150,0.45)
success-bg rgba(126,231,135,0.14)
warning-bg rgba(240,180,41,0.14)
danger-bg rgba(255,107,107,0.14)
shadow-deep rgba(0,0,0,0.6)
shadow-soft rgba(0,0,0,0.4)
shadow-glow rgba(234,255,150,0.22)
typography 5 changed
~ display {"family":"TWK Everett","size":120} {"family":"Sharp Grotesk","size":72}
~ h1 {"family":"TWK Everett","size":56} {"family":"Sharp Grotesk","size":40}
~ h2 {"family":"TWK Everett","size":40} {"family":"Sharp Grotesk","size":32}
~ body {"family":"Inter","size":16} {"family":"Sharp Grotesk Text","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"SFMono-Regular","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 6px
spacing 4 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ xl 64px 48px
↻ Swap direction · HBO Max → CodeSandbox