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: