Mastercard

Difficulty:
Industry
Mastercard Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 10px
md · 20px
lg · 24px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Circular

  • Ag

    Body 16px · regular

    Circular

  • Ag

    Labels 13px · medium

    Circular

Mastercard is the global payments company powering economies and empowering people. Its style swaps pure white for warm cream (#F3F0EE), treats extreme radii (40–1000px) as a signature, pairs circular portraits with white satellite CTAs and orange orbital arcs, and keeps body CTAs black with 20px corners. Ideal for finance and brand UIs.

FintechMinimal

Prompt Template

Base Template
Design a Mastercard-inspired interface. - Warm cream canvas (#F3F0EE) replaces traditional white — every surface is tinted, never sterile; - Extreme border-radius as design language: 40px, 99px, 1000px dominate; anything square is a cookie-banner third-party; - Circular image portraits with attached white satellite-CTAs and traced-orange orbital paths; - Ghost "watermark" headlines (cream-on-cream text at heading scale) layered behind circle portraits; - Black primary CTAs with 20px radius in the body — the cookie-banner orange is kept to consent flows. Colors: #EB001B, #F79E1B, #141413, #CF4500 with #EB001B accent. Typography: MarkForMC.

Variant Prompts

📱 Mobile
Design a mobile app with Mastercard aesthetics. Use Mastercard color identity with #EB001B accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Mastercard style. Use Mastercard color identity with #EB001B accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Mastercard design language. Use Mastercard color identity with #EB001B accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Mastercard visual identity. Use Mastercard color identity with #EB001B accents. Compelling, conversion-focused.

Usage Examples

Mastercard App

Web
Build a web app with Mastercard design language and #EB001B color system.

Mastercard Dashboard

Dashboard
Create a dashboard using Mastercard style with data visualization and MarkForMC typography.

✅ Best For

  • Fintech
  • Payment network brand pages
  • Financial education content

❌ Avoid For

  • Dark hardcore tech interfaces
  • Raw experimental styles

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download