Diff

Visa vs Semafor

83 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #f8f5d7

Text

#000000 → #1f1d1a

Brand

#1434CB → #3a6d78

Border

#E1E1E1 → #d8d0a8

Display font

visa-font-latin-regular → FeatureFlatHeadline

Body size

16px → 18px

colors 73 changed

~ bg #FFFFFF → #f8f5d7

~ surface #FFFFFF → #f8f5d7

~ surface-soft #F7F7F7 → #f5f1c9

~ brand #1434CB → #3a6d78

~ brand-hover #0F28A4 → #2d5a64

~ text #000000 → #1f1d1a

~ text-on-dark #FFFFFF → #f8f5d7

~ link-hover #0F28A4 → #2d5a64

~ border #E1E1E1 → #d8d0a8

~ border-soft #EDEDED → #e8e2c2

~ border-strong #1434CB → #7a756f

~ scrim rgba(0,0,0,0.55) → rgba(31,29,26,0.6)

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #2a8a4f

~ warning #B86A00 → #cc7a00

~ danger #B3261E → #a62d2d

~ info #1434CB → #3a6d78

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-dark #1f1d1a

+ bg-darkest #0d0c0a

+ surface-paper #ffffff

+ surface-strong #e8e3b5

+ surface-quote #fefbe8

+ surface-card-elevated #fcfae0

+ text-strong #000000

+ text-muted #5a5651

+ text-soft #7a756f

+ text-faint #a39e96

+ text-on-teal #ffffff

+ brand-active #1f4750

+ brand-soft #cce0e4

+ brand-deep #1a3a44

+ link #3a6d78

+ link-visited #7a756f

+ on-dark #f8f5d7

+ border-rule #1f1d1a

+ border-teal #3a6d78

+ shadow-card rgba(31,29,26,0.06)

+ shadow-elev rgba(31,29,26,0.1)

+ shadow-modal rgba(31,29,26,0.3)

+ success-soft #dff0e7

+ warning-soft #fde9cc

+ danger-soft #f0d4d4

+ info-soft #cce0e4

+ flag-flagship #3a6d78

+ flag-africa #c46b3a

+ flag-principals #3a6d78

+ flag-net-zero #2a8a4f

+ flag-tech #5a4a8a

+ flag-business #3a6d78

+ flag-media #a62d2d

+ flag-gulf #c46b3a

− bg-lifted #FAFAFA

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

− text-on-yellow #000000

− link-blue #1434CB

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

− 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":"FeatureFlatHeadline","size":72}

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

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

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

~ label {"family":"JetBrains Mono","size":13} → {"family":"Courier New","size":11}

radius 3 changed

~ button 12px → 4px

~ card 16px → 6px

~ pill 30px → 9999px

spacing 2 changed

~ xs 0px → 2px

~ xl 48px → 40px

↻ Swap direction · Semafor → Visa