Diff

Graphite vs Mastercard

76 token-level differences between these two design systems.

Role tokens

Background

#070707 → #F3F0EE

Text

#fafafa → #0a0a0a

Brand

#3b82f6 → #c6f432

Border

#1f1f1f → #E8E4DE

Display font

matterFont → MarkForMC

Body size

16px → 16px

colors 65 changed

~ bg #070707 → #F3F0EE

~ surface #0f0f0f → #F3F0EE

~ border #1f1f1f → #E8E4DE

~ border-strong #2e2e2e → #141413

~ success #22c55e → #067F5B

~ warning #f59e0b → #A35316

~ danger #ef4444 → #CF4500

~ info #3b82f6 → #3860BE

~ on-brand #ffffff → #F3F0EE

+ bg-lifted #FCFBFA

+ surface-soft #F4F4F4

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

+ text-on-brand #F3F0EE

+ text-on-orange #FFFFFF

+ link-blue #3860BE

+ border-soft #F0EBE5

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

+ ghost-watermark #E8E2DA

+ scrim rgba(20,20,19,0.4)

+ shadow-soft rgba(0,0,0,0.04)

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

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

− bg-level-1 #0f0f0f

− bg-level-2 #171717

− bg-level-3 #1f1f1f

− bg-overlay rgba(7,7,7,0.72)

− surface-strong #171717

− surface-tinted-brand rgba(59,130,246,0.08)

− text #fafafa

− text-strong #ffffff

− text-secondary #d4d4d4

− text-tertiary #a3a3a3

− text-quaternary #737373

− text-disabled #525252

− brand #3b82f6

− brand-hover #60a5fa

− brand-press #2f6fed

− brand-soft rgba(59,130,246,0.16)

− accent #60a5fa

− link #60a5fa

− link-hover #93c5fd

− border-subtle rgba(255,255,255,0.06)

− border-brand #3b82f6

− cta-fill #262626

− cta-fill-hover #2e2e2e

− cta-fill-press #1f1f1f

− cta-text #fafafa

− success-bg rgba(34,197,94,0.12)

− warning-bg rgba(245,158,11,0.12)

− danger-bg rgba(239,68,68,0.12)

− info-bg rgba(59,130,246,0.12)

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 8px → 20px

~ card 12px → 24px

spacing 4 changed

~ xs 0px → 8px

~ sm 4px → 16px

~ md 12px → 32px

~ lg 32px → 96px

↻ Swap direction · Mastercard → Graphite