Diff

Visa vs HubSpot

72 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #fcfcfa

Text

#000000 → #33475b

Brand

#1434CB → #FF7A59

Border

#E1E1E1 → #cbd6e2

Display font

visa-font-latin-regular → HubSpot Serif Page Header Human

Body size

16px → 17px

colors 63 changed

~ bg #FFFFFF → #fcfcfa

~ surface #FFFFFF → #ffffff

~ brand #1434CB → #FF7A59

~ brand-pressed #0A1E84 → #e54c2a

~ text #000000 → #33475b

~ text-on-dark #FFFFFF → #f5f8fa

~ text-on-brand #FFFFFF → #ffffff

~ border #E1E1E1 → #cbd6e2

~ border-soft #EDEDED → #dfe3eb

~ border-strong #1434CB → #516f90

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #00bda5

~ warning #B86A00 → #f5c26b

~ danger #B3261E → #f2545b

~ info #1434CB → #00a4bd

+ bg-white #ffffff

+ bg-warm #f8f7f4

+ bg-cream #fef8f3

+ bg-dark #2e3338

+ bg-deep #213343

+ surface-2 #f5f8fa

+ surface-3 #eaf0f6

+ surface-orange-soft #fff1ec

+ surface-orange-deep #ffe2d6

+ text-strong #1f2d3d

+ text-darker #0a1f2f

+ text-muted #516f90

+ text-soft #7c98b6

+ text-faint #cbd6e2

+ text-on-orange #ffffff

+ text-on-dark-muted #cbd6e2

+ brand-deep #ff5c35

+ brand-soft #ffa18c

+ accent #33475b

+ accent-teal #00bda5

+ accent-yellow #f5c26b

+ accent-purple #6a78d1

+ border-on-orange #ffffff66

+ success-bg #d4f1ec

+ warning-bg #fdf3df

+ danger-bg #fde2e2

+ info-bg #d4f1f7

− bg-lifted #FAFAFA

− surface-soft #F7F7F7

− surface-card #FFFFFF

− surface-dark #1434CB

− surface-deep #0F28A4

− brand-yellow #FCC015

− brand-hover #0F28A4

− brand-yellow-hover #EAB000

− text-charcoal #1A1A1A

− text-slate #5B5B5B

− text-graphite #3D3D3D

− text-dust #9C9C9C

− 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":"HubSpot Serif Page Header Human","size":88}

~ h1 {"family":"visa-font-latin-regular","size":32} → {"family":"HubSpot Serif Page Header Human","size":44}

~ h2 {"family":"visa-font-latin-regular","size":32} → {"family":"HubSpot Serif Page Header Human","size":34}

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

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

radius 3 changed

~ button 12px → 6px

~ card 16px → 24px

~ pill 30px → 9999px

spacing 1 changed

~ xl 48px → 40px

↻ Swap direction · HubSpot → Visa