Diff

Visa vs Hulu

70 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #0b0c0f

Text

#000000 → #ffffff

Brand

#1434CB → #1ce783

Border

#E1E1E1 → #2a2e36

Display font

visa-font-latin-regular → Graphik

Body size

16px → 16px

colors 58 changed

~ bg #FFFFFF → #0b0c0f

~ surface #FFFFFF → #1a1d23

~ surface-soft #F7F7F7 → #13161b

~ surface-card #FFFFFF → #1a1d23

~ brand #1434CB → #1ce783

~ brand-hover #0F28A4 → #3eee9c

~ text #000000 → #ffffff

~ border #E1E1E1 → #2a2e36

~ border-soft #EDEDED → #1f2229

~ border-strong #1434CB → #1ce783

~ on-brand #FFFFFF → #0b0c0f

~ success #1B7F4E → #1ce783

~ warning #B86A00 → #ff9500

~ danger #B3261E → #ff3b30

~ info #1434CB → #0089ec

+ bg-deep #000000

+ surface-strong #262a31

+ surface-overlay rgba(11,12,15,0.85)

+ text-strong #ffffff

+ text-body #e6e8ec

+ text-muted #a0a4ab

+ text-soft #6a6f78

+ text-disabled #4a4f57

+ brand-active #0fc66c

+ brand-deep #089456

+ brand-arc #1ce783

+ accent-purple #9d6cff

+ accent-orange #ff7a00

+ accent-blue #0089ec

+ shadow-card rgba(0,0,0,0.7)

+ shadow-billboard rgba(0,0,0,0.85)

+ shadow-glow-green rgba(28,231,131,0.25)

+ progress-watched #1ce783

+ progress-rail #3a3f48

+ scrim-bottom linear-gradient(0deg, #0b0c0f 0%, transparent 100%)

+ live-tv-red #ff3b30

+ ads-tier #a0a4ab

− bg-lifted #FAFAFA

− surface-dark #1434CB

− surface-deep #0F28A4

− brand-yellow #FCC015

− brand-pressed #0A1E84

− brand-yellow-hover #EAB000

− text-charcoal #1A1A1A

− text-slate #5B5B5B

− text-graphite #3D3D3D

− text-dust #9C9C9C

− text-on-dark #FFFFFF

− text-on-brand #FFFFFF

− text-on-yellow #000000

− link-blue #1434CB

− link-hover #0F28A4

− border-on-dark rgba(255,255,255,0.24)

− scrim rgba(0,0,0,0.55)

− shadow-subtle rgba(0,0,0,0.04)

− shadow-soft rgba(0,0,0,0.08)

− shadow-medium rgba(0,0,0,0.14)

− shadow-strong rgba(0,0,0,0.22)

typography 5 changed

~ display {"family":"visa-font-latin-regular","size":64} → {"family":"Graphik","size":72}

~ h1 {"family":"visa-font-latin-regular","size":32} → {"family":"Graphik","size":40}

~ h2 {"family":"visa-font-latin-regular","size":32} → {"family":"Graphik","size":32}

~ body {"family":"visa-font-latin-regular","size":16} → {"family":"Graphik","size":16}

~ label {"family":"JetBrains Mono","size":13} → {"family":"SFMono-Regular","size":11}

radius 3 changed

~ button 12px → 8px

~ card 16px → 12px

~ pill 30px → 9999px

spacing 4 changed

~ xs 0px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ lg 24px → 32px

↻ Swap direction · Hulu → Visa