Mastercard Design System

Mastercard's current visual language reads less like a payments network and more like a premium annual report. The base canvas is a warm putty-cream at #F3F0EE — not white, not gray, but a paper-toned surface that immediately distances the brand from sterile fintech defaults. Primary CTAs are Ink Black pills at #141413 with cream-colored labels rather than pure white, and the only place the brand's famous red and yellow appear is the locked logo mark itself. Service imagery is cropped to perfect circles connected by hand-drawn-feeling orange arcs, with a 56px white satellite CTA docked to each portrait's bottom-right edge like a moon.

This DESIGN.md captures the full system: seven palette groups covering canvas, ink, signal, link, and neutral tones; a MarkForMC type scale with the unusual weight-450 body and -2% tracking on every headline; an 8px spacing grid running from 8 through 128; and component specs for buttons, cards, nav pills, satellite CTAs, hero stadiums, orbital arcs, and the dark warm-black footer at #141413. The file follows the Google Labs DESIGN.md spec so it parses cleanly as YAML tokens alongside the prose.

Feed this file to Claude, Cursor, or Copilot and the agent will build pages that look like Mastercard rather than a generic fintech theme — cream canvas, 40px hero radii, circular portraits, weight-450 paragraphs, Signal Orange held back for consent flows. Reference the tokens directly when wiring Tailwind config or CSS variables. Mastercard is worth studying because it holds a rare tension: a 60-year-old payments network that reads as editorial without softening into lifestyle, achieved almost entirely through one canvas color, one type weight, and one radius commitment.