Diff

Visa vs Todoist

72 token-level differences between these two design systems.

Role tokens

Background

#FFFFFF → #fefdfc

Text

#000000 → #25221e

Brand

#1434CB → #e44432

Border

#E1E1E1 → #eae9e8

Display font

visa-font-latin-regular → Graphik

Body size

16px → 16px

colors 62 changed

~ bg #FFFFFF → #fefdfc

~ surface #FFFFFF → #ffffff

~ surface-card #FFFFFF → #fcfcfc

~ brand #1434CB → #e44432

~ brand-hover #0F28A4 → #ee5244

~ text #000000 → #25221e

~ border #E1E1E1 → #eae9e8

~ border-soft #EDEDED → #f1f0ef

~ border-strong #1434CB → #dadad9

~ scrim rgba(0,0,0,0.55) → rgba(34, 40, 41, 0.80)

~ on-brand #FFFFFF → #ffffff

~ success #1B7F4E → #3a7400

~ warning #B86A00 → #f7b84f

~ danger #B3261E → #de483a

~ info #1434CB → #316fea

+ bg-warm #fcf8f3

+ surface-cream #fff9f3

+ surface-cream-mid #fff5eb

+ surface-peach #fae8d6

+ text-muted #565656

+ text-soft #8c8b8b

+ text-faint #c1c0c0

+ brand-active #d1453b

+ brand-tint-100 #fef6ef

+ brand-tint-200 #fdf0e4

+ brand-tint-300 #fbe8d7

+ brand-deep #9a3b00

+ accent-yellow #ffc93e

+ accent-green #6b8767

+ accent-pink #ffada4

+ accent-blue #316fea

+ ghost-bg #25221e12

+ prio-1 #ffd6d3

+ prio-2 #fbe7ce

+ prio-3 #dde6f9

+ prio-4 #f2efed

+ shadow-color rgba(0, 0, 0, 0.24)

+ success-soft #f6f9f7

+ warning-soft #fff9f0

+ danger-soft #fdf5f0

+ info-soft #f1f7fe

− bg-lifted #FAFAFA

− surface-soft #F7F7F7

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

− 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-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":"Graphik","size":80}

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

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

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

~ label {"family":"JetBrains Mono","size":13} → {"family":"SFMono-Regular","size":13}

radius 3 changed

~ button 12px → 8px

~ card 16px → 12px

~ pill 30px → 9999px

spacing 2 changed

~ lg 24px → 32px

~ xl 48px → 64px

↻ Swap direction · Todoist → Visa