Diff

Mastercard vs Dell

90 token-level differences between these two design systems.

Role tokens

Background

#F3F0EE → #ffffff

Text

#0a0a0a → #0a0a0a

Brand

#c6f432 → #007db8

Border

#E8E4DE → #dde4eb

Display font

MarkForMC → Inter

Body size

16px → 16px

colors 78 changed

~ bg #F3F0EE → #ffffff

~ surface #F3F0EE → #ffffff

~ surface-soft #F4F4F4 → #f9f9f9

~ text-on-dark #FFFFFF → #ffffff

~ border #E8E4DE → #dde4eb

~ border-soft #F0EBE5 → #f0f3f5

~ border-strong #141413 → #007db8

~ scrim rgba(20,20,19,0.4) → rgba(0,0,0,0.5)

~ shadow-soft rgba(0,0,0,0.04) → rgba(0,80,120,0.06)

~ on-brand #F3F0EE → #ffffff

~ success #067F5B → #0a8849

~ warning #A35316 → #ff9900

~ danger #CF4500 → #cc0000

~ info #3860BE → #007db8

+ bg-soft #f9f9f9

+ bg-cool #f0f3f5

+ bg-deep #0a0a0a

+ bg-alienware #000000

+ surface-cool #f0f3f5

+ surface-strong #dde4eb

+ surface-input #ffffff

+ text #0a0a0a

+ text-strong #000000

+ text-soft #444444

+ text-faint #767676

+ text-disabled #a8b0b8

+ text-link #007db8

+ brand #007db8

+ brand-light #1399d6

+ brand-deep #005a8a

+ brand-darkest #003654

+ brand-hover #005a8a

+ brand-active #003654

+ brand-gradient linear-gradient(135deg, #007db8 0%, #005a8a 100%)

+ brand-emc-purple #5d3fd3

+ alienware-blue #00d6ff

+ alienware-glow rgba(0,214,255,0.5)

+ cta-primary #007db8

+ cta-primary-hover #005a8a

+ cta-customize #007db8

+ link-default #007db8

+ link-visited #007db8

+ link-hover #005a8a

+ shadow-card rgba(0,80,120,0.1)

+ shadow-elev rgba(0,80,120,0.15)

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

+ badge-new #007db8

+ badge-sale #cc0000

+ badge-deal #cc0000

+ badge-rebate #0a8849

+ badge-trade-in #5d3fd3

+ badge-energy-star #1d4f9e

+ price #0a0a0a

+ price-strikethrough #767676

+ price-discount #cc0000

+ rating-star #ffaa00

− bg-lifted #FCFBFA

− surface-card #FFFFFF

− surface-dark #141413

− brand-red #EB001B

− brand-yellow #F79E1B

− brand-ink #141413

− signal-orange #CF4500

− light-signal-orange #F37338

− clay-brown #9A3A0A

− text-ink #141413

− text-charcoal #262627

− text-slate #696969

− text-granite #555555

− text-graphite #565656

− text-dust #D1CDC7

− text-on-brand #F3F0EE

− text-on-orange #FFFFFF

− link-blue #3860BE

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

− ghost-watermark #E8E2DA

− shadow-medium rgba(0,0,0,0.08)

− shadow-deep rgba(0,0,0,0.25)

typography 5 changed

~ display {"family":"MarkForMC","size":72} → {"family":"Inter","size":56}

~ h1 {"family":"MarkForMC","size":40} → {"family":"Inter","size":40}

~ h2 {"family":"MarkForMC","size":32} → {"family":"Inter","size":32}

~ body {"family":"MarkForMC","size":16} → {"family":"Inter","size":16}

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

radius 2 changed

~ button 20px → 8px

~ card 24px → 12px

spacing 5 changed

~ xs 8px → 4px

~ sm 16px → 8px

~ md 32px → 16px

~ lg 96px → 32px

~ xl 64px → 48px

↻ Swap direction · Dell → Mastercard