Diff

OpenSea vs Visa

73 token-level differences between these two design systems.

Role tokens

Background

#04111d → #FFFFFF

Text

#ffffff → #000000

Brand

#2081e2 → #1434CB

Border

#1f2937 → #E1E1E1

Display font

Inter → visa-font-latin-regular

Body size

14px → 16px

colors 60 changed

~ bg #04111d → #FFFFFF

~ surface-card #0d1721 → #FFFFFF

~ text #ffffff → #000000

~ brand #2081e2 → #1434CB

~ brand-hover #1868b7 → #0F28A4

~ on-brand #ffffff → #FFFFFF

~ border #1f2937 → #E1E1E1

~ border-soft #151b25 → #EDEDED

~ border-strong #2c3a4d → #1434CB

~ scrim rgba(4,17,29,0.70) → rgba(0,0,0,0.55)

~ link-hover #5fa3eb → #0F28A4

+ bg-lifted #FAFAFA

+ surface #FFFFFF

+ 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

+ 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)

+ success #1B7F4E

+ warning #B86A00

+ danger #B3261E

+ info #1434CB

− bg-elev-1 #0d1721

− bg-elev-2 #1b2730

− bg-elev-3 #252f3e

− surface-card-hover #1b2730

− text-body #c5cdd6

− text-muted #8a939b

− text-subtle #707a83

− text-on-light #04111d

− brand-active #1259a0

− brand-soft #2081e21a

− brand-glow rgba(32,129,226,0.40)

− semantic-up #34c77b

− semantic-up-soft #34c77b1a

− semantic-down #eb5757

− semantic-down-soft #eb57571a

− semantic-warning #f5a623

− semantic-info #2081e2

− verified-blue #2081e2

− category-art #bf60d5

− category-gaming #34c77b

− category-music #f5a623

− rare-gold #fbbf24

− focus-ring rgba(32,129,226,0.40)

− link #2081e2

typography 5 changed

~ display {"family":"Inter","size":72} → {"family":"visa-font-latin-regular","size":64}

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

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

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

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

radius 3 changed

~ button 8px → 12px

~ card 10px → 16px

~ pill 999px → 30px

spacing 5 changed

~ xs 4px → 0px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 32px → 24px

~ xl 64px → 48px

↻ Swap direction · Visa → OpenSea