Diff

Visa vs Render

75 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #ffffff

Text

#000000 → #373145

Brand

#1434CB → #8a05ff

Border

#E1E1E1 → #0000001a

Display font

visa-font-latin-regular → Inter

Body size

16px → 16px

colors 65 changed

~ bg #FFFFFF → #ffffff

~ surface #FFFFFF → #fafafa

~ surface-soft #F7F7F7 → #e6daff

~ surface-deep #0F28A4 → #f3eefe

~ brand #1434CB → #8a05ff

~ brand-hover #0F28A4 → #6e04cc

~ brand-pressed #0A1E84 → #5a039f

~ text #000000 → #373145

~ link-hover #0F28A4 → #6e04cc

~ border #E1E1E1 → #0000001a

~ border-soft #EDEDED → #0000000d

~ border-strong #1434CB → #00000033

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #0a8754

~ warning #B86A00 → #cc7400

~ danger #B3261E → #d72638

~ info #1434CB → #8a05ff

+ bg-deep #fafafa

+ bg-elev-1 #f5f3fb

+ bg-elev-2 #ffffff

+ surface-glow #fbceff

+ brand-deep #3d0270

+ brand-glow #8a05ff1f

+ accent #9d66ff

+ accent-hover #b08aff

+ accent-soft #e6daff

+ accent-glow #fbceff

+ link #8a05ff

+ link-visited #6a04b8

+ selected #8a05ff14

+ disabled #e6e4ec

+ disabled-text #a8a4b4

+ text-heading #1f1a2e

+ text-muted #5e5b6f

+ text-soft #9089a0

+ text-faint #bcb6c8

+ text-disabled #a8a4b4

+ border-brand #8a05ff66

+ shadow-ambient rgba(55,49,69,0.06)

+ shadow-standard rgba(55,49,69,0.1)

+ shadow-elevated rgba(138,5,255,0.18)

+ shadow-glow rgba(251,206,255,0.5)

+ success-bg #dffaef

+ warning-bg #fff4e0

+ danger-bg #ffe5e8

+ info-bg #e6daff

− bg-lifted #FAFAFA

− surface-card #FFFFFF

− surface-dark #1434CB

− brand-yellow #FCC015

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

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

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

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

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

radius 3 changed

~ button 12px → 8px

~ card 16px → 24px

~ pill 30px → 9999px

spacing 2 changed

~ xs 0px → 2px

~ xl 48px → 40px

↻ Swap direction · Render → Visa