Mastercard
Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (#F3F0EE) with ink-black (#141413) CTAs and Signal Orange (#CF4500) accents.
Homepage Example
Color Palette (14)
Typography (7)
Components (5)
Border Radius
Design Philosophy
Overview
Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (#F3F0EE) — not white, not gray, but a color that feels like the paper of a premium annual report.
The dominant visual gesture is the oversized radius: heroes carry 40-point corners, cards go fully pill-shaped, service images are cropped into circular orbits.
Key Characteristics
- Warm cream canvas (#F3F0EE) replaces traditional white
- Extreme border-radius as design language: 40px, 99px, 1000px dominate
- Circular image portraits with attached white satellite-CTAs
- Black primary CTAs with 20px radius
- Floating pill-shaped navigation
Do's and Don'ts
Use Canvas Cream (#F3F0EE) as the default body background. Mask service imagery as perfect circles. Keep primary CTAs as Ink Black pills (20px radius). Don't use pure white as a page background.
Design Insights
Accessibility Considerations
Mastercard's color system, anchored by #F3F0EE, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Mastercard's color system, anchored by #F3F0EE, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Mastercard's color system, anchored by #F3F0EE, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Related Design Systems
Explore similar design languages from the same category:
Frequently Asked Questions
Q. What are Mastercard's brand colors?
The Mastercard palette uses 14 colors, led by mastercard-red (#EB001B), mastercard-yellow (#F79E1B), ink-black (#141413), signal-orange (#CF4500), light-signal-orange (#F37338). The primary brand color is mastercard-red (#EB001B).
Q. What fonts does the Mastercard design system use?
Display type is set in MarkForMC at 64px / weight 500, while body and UI text uses MarkForMC at 14px / weight 700.
Q. What kind of website is Mastercard?
Mastercard is a Fintech & Crypto brand. Its design system documents 14 colors, 7 type styles and a 5-step border-radius scale.
Q. What border radius values does Mastercard use?
The radius scale runs from 6 (6px) to pill (9999px): 6 (6px), 20 (20px), 24 (24px), 40 (40px), pill (9999px).
Q. Where can I see the Mastercard design system?
This page shows Mastercard's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.