Diff

Visa vs Rive

68 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #fdfcf8

Text

#000000 → #1d1d1b

Brand

#1434CB → #ff5b37

Border

#E1E1E1 → rgba(29, 29, 27, 0.10)

Display font

visa-font-latin-regular → Inter Display

Body size

16px → 17px

colors 57 changed

~ bg #FFFFFF → #fdfcf8

~ surface #FFFFFF → #ffffff

~ surface-soft #F7F7F7 → #fdfcf8

~ surface-dark #1434CB → #1d1d1b

~ brand #1434CB → #ff5b37

~ brand-hover #0F28A4 → #e54a2a

~ text #000000 → #1d1d1b

~ text-on-dark #FFFFFF → #fdfcf8

~ border #E1E1E1 → rgba(29, 29, 27, 0.10)

~ border-soft #EDEDED → rgba(29, 29, 27, 0.06)

~ border-strong #1434CB → rgba(29, 29, 27, 0.20)

~ scrim rgba(0,0,0,0.55) → rgba(29, 29, 27, 0.45)

~ shadow-soft rgba(0,0,0,0.08) → rgba(29, 29, 27, 0.05)

~ shadow-medium rgba(0,0,0,0.14) → rgba(29, 29, 27, 0.10)

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #4cc38a

~ warning #B86A00 → #fcc24c

~ danger #B3261E → #ff5b37

~ info #1434CB → #3a7bff

+ bg-strong #f5f3ec

+ bg-cream #f9f7f0

+ text-strong #000000

+ text-muted #1d1d1b99

+ text-soft #1d1d1b66

+ text-on-dark-muted #fdfcf899

+ brand-active #cc3f23

+ brand-soft #ffe0d6

+ accent-yellow #fcc24c

+ accent-yellow-soft #fff1cf

+ accent-blue #3a7bff

+ accent-blue-soft #dbe7ff

+ accent-pink #ff6da6

+ accent-pink-soft #ffe0ec

+ accent-green #4cc38a

+ accent-green-soft #d6f1e2

+ cta-bg #1d1d1b

+ cta-bg-hover #000000

+ cta-text #fdfcf8

+ border-dark rgba(253, 252, 248, 0.12)

+ shadow-deep rgba(29, 29, 27, 0.18)

− bg-lifted #FAFAFA

− surface-card #FFFFFF

− 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-brand #FFFFFF

− text-on-yellow #000000

− link-blue #1434CB

− link-hover #0F28A4

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

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

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

typography 5 changed

~ display {"family":"visa-font-latin-regular","size":64} → {"family":"Inter Display","size":140}

~ h1 {"family":"visa-font-latin-regular","size":32} → {"family":"Inter Display","size":72}

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

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

~ label {"family":"JetBrains Mono","size":13} → {"family":"JetBrains Mono","size":14}

radius 2 changed

~ card 16px → 32px

~ pill 30px → 9999px

spacing 4 changed

~ xs 0px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ lg 24px → 32px

↻ Swap direction · Rive → Visa