Diff

Visa vs Railway

77 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #13111c

Text

#000000 → #f7f7f8

Brand

#1434CB → #553f83

Border

#E1E1E1 → #33323e

Display font

visa-font-latin-regular → IBM Plex Serif

Body size

16px → 16px

colors 67 changed

~ bg #FFFFFF → #13111c

~ surface #FFFFFF → #291839

~ surface-deep #0F28A4 → #322046

~ brand #1434CB → #553f83

~ brand-hover #0F28A4 → #6b4fa3

~ brand-pressed #0A1E84 → #46336e

~ text #000000 → #f7f7f8

~ link-hover #0F28A4 → #b39de2

~ border #E1E1E1 → #33323e

~ border-soft #EDEDED → #ffffff14

~ border-strong #1434CB → #ffffff26

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #22c55e

~ warning #B86A00 → #f59e0b

~ danger #B3261E → #ef4444

~ info #1434CB → #9d7ad4

+ bg-deep #0c0a14

+ bg-elev-1 #1c1a26

+ bg-elev-2 #291839

+ bg-elev-3 #322046

+ surface-alt #1c1a26

+ surface-pink #2a1f3f

+ brand-deep #3a2b5d

+ brand-glow #553f8333

+ accent #9d7ad4

+ accent-hover #b39de2

+ accent-soft #2a1f3f

+ accent-mid #7d63b8

+ link #9d7ad4

+ link-visited #8462c4

+ selected #553f8326

+ disabled #33323e

+ disabled-text #7a798a

+ text-heading #ffffff

+ text-muted #a1a0ab

+ text-soft #7a798a

+ text-faint #5a5969

+ text-disabled #7a798a

+ border-brand #553f8366

+ shadow-ambient rgba(0,0,0,0.3)

+ shadow-standard rgba(0,0,0,0.5)

+ shadow-elevated rgba(0,0,0,0.65)

+ shadow-glow rgba(85,63,131,0.35)

+ success-bg #0f3a1f

+ warning-bg #3a2710

+ danger-bg #3a1818

+ info-bg #291839

− bg-lifted #FAFAFA

− surface-soft #F7F7F7

− 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":"IBM Plex Serif","size":72}

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

~ h2 {"family":"visa-font-latin-regular","size":32} → {"family":"IBM Plex Serif","size":40}

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

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

radius 3 changed

~ button 12px → 8px

~ card 16px → 20px

~ pill 30px → 9999px

spacing 2 changed

~ xs 0px → 2px

~ xl 48px → 40px

↻ Swap direction · Railway → Visa