Diff

Visa vs Synthesia

92 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #ffffff

Text

#000000 → #333b52

Brand

#1434CB → #3e57da

Border

#E1E1E1 → #e2e5ee

Display font

visa-font-latin-regular → Basier Square

Body size

16px → 16px

colors 82 changed

~ bg #FFFFFF → #ffffff

~ surface #FFFFFF → #ffffff

~ brand #1434CB → #3e57da

~ brand-hover #0F28A4 → #3349c0

~ text #000000 → #333b52

~ link-hover #0F28A4 → #2c3ea6

~ border #E1E1E1 → #e2e5ee

~ border-strong #1434CB → #cdd2e0

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #1f9d6b

~ warning #B86A00 → #c77d12

~ danger #B3261E → #d64545

~ info #1434CB → #3e57da

+ bg-alt #f7f8fb

+ bg-navy #0d0f2c

+ text-strong #0d0f2c

+ text-muted #6b7280

+ text-soft #9aa1b1

+ brand-active #2c3ea6

+ brand-soft #eef1fd

+ accent-pink #e585d7

+ pink-100 #fef6fb

+ pink-200 #ffebfc

+ pink-300 #ffd7f9

+ pink-400 #f6b2ec

+ pink-500 #e585d7

+ pink-600 #a73b98

+ pink-700 #751b68

+ pink-800 #26042f

+ link #3e57da

+ link-visited #5a4bc4

+ selected #eef1fd

+ disabled #c7ccdb

+ neutral-50 #f7f8fb

+ neutral-100 #eef0f5

+ neutral-200 #e2e5ee

+ neutral-300 #cdd2e0

+ neutral-400 #9aa1b1

+ neutral-500 #6b7280

+ neutral-600 #4c5468

+ neutral-700 #333b52

+ neutral-800 #1e2438

+ neutral-900 #0d0f2c

+ surface-alt #f7f8fb

+ surface-navy #0d0f2c

+ surface-pink #fef6fb

+ border-subtle #eef0f5

+ border-brand #3e57da

+ shadow-ambient rgba(13,15,44,0.06)

+ shadow-standard rgba(13,15,44,0.10)

+ shadow-elevated rgba(13,15,44,0.16)

+ success-bg #e8f7f0

+ success-text #0f5a3c

+ warning-bg #fbf3e2

+ warning-text #7a4d06

+ danger-bg #fbeaea

+ danger-text #8a2424

+ info-bg #eef1fd

+ info-text #2c3ea6

− bg-lifted #FAFAFA

− surface-soft #F7F7F7

− surface-card #FFFFFF

− 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

− border-soft #EDEDED

− 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":"Basier Square","size":88}

~ h1 {"family":"visa-font-latin-regular","size":32} → {"family":"Basier Square","size":88}

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

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

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

radius 3 changed

~ button 12px → 8px

~ card 16px → 12px

~ pill 30px → 9999px

spacing 2 changed

~ lg 24px → 32px

~ xl 48px → 64px

↻ Swap direction · Synthesia → Visa