---
version: alpha
name: Mastercard
website: "https://www.mastercard.com"
description: >-
  A warm editorial payments brand built on a putty-cream canvas (`"#F3F0EE"`) rather than white, with Ink Black (`"#141413"`) carrying every primary CTA and footer surface. The dominant gesture is the oversized radius — heroes at 40px, primary buttons at 20px, service portraits as perfect circles, and full-pill 999px nav and carousel cards. The signature motif is "orbit and trajectory": circular image masks connected by thin Light Signal Orange (`"#F37338"`) arcs that span the viewport, each circle docked with a 56px white satellite CTA. Typography is MarkForMC at -2% tracking on headlines and an unusual 450 weight on body — softer than 400, firmer than 500. Signal Orange (`"#CF4500"`) is reserved exclusively for consent and compliance, never marketing.

seo:
  title: "Mastercard Design System for React — Ink #141413, MarkForMC, cream canvas"
  metaDescription: "Mastercard's design system as a DESIGN.md file. Cream canvas #F3F0EE, Ink #141413, MarkForMC at weight 450. For React, Next.js, and AI tools."
  highlights:
    - "Warm putty canvas (#F3F0EE) instead of white — every surface is tinted, never sterile, never jet-black"
    - "Three-radius commitment — 20px buttons, 40px hero stadiums, 999px pills; the 8–12px middle ground is absent"
    - "Body type at weight 450 — softer than 400, firmer than 500, a signature MarkForMC half-step few brands ship"
    - "Signal Orange (#CF4500) is consent-only — used for cookie banners and legal, never for marketing CTAs"
    - "Orbital motif — Light Signal Orange (#F37338) arcs trace connections between circular portraits with 56px white satellite CTAs"
  tags:
    - "Fintech & Crypto"
    - "Banking & Payments"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://brand.mastercard.com"
      title: "Mastercard Brand Center"
      description: "Mastercard's official brand guidelines, logo assets, and identity standards."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Mastercard's primary UI color, and where do the red and yellow appear?"
      answer: "Mastercard's primary UI color is Ink Black at #141413 — a warm near-black that carries every CTA, headline, and the footer surface. The famous Mastercard Red (#EB001B) and Yellow (#F79E1B) appear exclusively inside the locked logo mark; they are never used as UI palette entries. The canvas itself is Canvas Cream (#F3F0EE), a putty-toned warm cream that replaces white as the default body background across the entire system."
    - id: "signal-orange"
      title: "When should I use Signal Orange (#CF4500)?"
      answer: "Signal Orange (#CF4500) is reserved exclusively for consent, legal, and compliance actions — cookie banners, privacy preferences, GDPR confirmations. Using it for a marketing CTA dilutes the legal-color signal and reads as a cookie banner to users. Marketing CTAs should always be the Ink Black pill at #141413. Light Signal Orange (#F37338) is a separate token used only for the decorative orbital arcs between circular portraits and for carousel active indicators."
    - id: "typography"
      title: "What typography does Mastercard use, and what should I substitute if MarkForMC is unavailable?"
      answer: "Mastercard runs MarkForMC, a proprietary geometric sans, at every level of the page. Headlines sit at weight 500 with -2% letter-spacing; body copy runs at the unusual half-step weight 450 — softer than regular 400, firmer than 500. Sofia Sans (Google Fonts) is the closest open-source match and already appears in Mastercard's declared fallback stack. Inter at weights 450/500/700 also works as a generic stand-in; preserve the -2% headline tracking and the 450 body weight when substituting."
    - id: "radius-system"
      title: "Why does Mastercard's radius system skip the 8–12px range?"
      answer: "The system commits to three radius tiers: small (≤6px decorative chips), medium-large (20px buttons, 40px hero stadiums), and full-pill (99px, 999px, 1000px). The conventional 8–12px middle ground is deliberately absent. That gap is why the UI reads as either precise utility or soft editorial with no in-between — round a hero at 16px and it looks generic; round it at 40px and it locks into Mastercard's identity."
    - id: "use-in-project"
      title: "How do I use this DESIGN.md in a React or Next.js project?"
      answer: "Download the file and paste tokens directly into Tailwind config or CSS variables, or feed the file to Claude, Cursor, or any AI tool that reads structured design specs. The colors block gives you every hex, the typography block gives you the full MarkForMC scale with the load-bearing 450 body weight, and the components block specifies button radii (20px), hero stadium radii (40px), and the 999px pill nav. The agent reproduces Mastercard's restraint — cream canvas, ink CTAs, signal-orange-as-compliance — rather than a generic fintech theme."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of items documented in the Known Gaps section: MarkForMC is proprietary and licensed, so Sofia Sans is the recommended open-source substitute. Tablet breakpoint specifics (768–1023px) were inferred from desktop and mobile captures. The exact ghost-watermark cream tone behind circular portraits reads between #E8E2DA and #D1CDC7 across sections — the precise value varies by surface. The Mastercard logo mark colors (#EB001B red, #F79E1B yellow) are brand assets, not UI palette tokens."

colors:
  mastercard-red: "#EB001B"
  mastercard-yellow: "#F79E1B"
  ink: "#141413"
  charcoal: "#262627"
  signal-orange: "#CF4500"
  light-signal-orange: "#F37338"
  clay-brown: "#9A3A0A"
  canvas-cream: "#F3F0EE"
  lifted-cream: "#FCFBFA"
  white: "#FFFFFF"
  soft-bone: "#F4F4F4"
  slate-gray: "#696969"
  granite: "#555555"
  graphite: "#565656"
  dust-taupe: "#D1CDC7"
  link-blue: "#3860BE"
  ghost-watermark: "#E8E2DA"

typography:
  h1-hero:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: -1.28px
  h2-section:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 44px
    letterSpacing: -0.72px
  h3-card:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28.8px
    letterSpacing: -0.48px
  h4-subhead:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 18.2px
    letterSpacing: 0
  eyebrow:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.56px
    textTransform: uppercase
  body:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 22.4px
    letterSpacing: 0
  nav-button:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: -0.48px
  footer-link:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 450
    lineHeight: 20px
    letterSpacing: 0
  footer-column-header:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.56px
    textTransform: uppercase
  ghost-watermark:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -1.92px
  consent-button:
    fontFamily: "'MarkForMC', SofiaSans, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0.13px

rounded:
  none: 0px
  micro: 3px
  sm: 6px
  md: 20px
  consent: 24px
  lg: 40px
  full: 999px
  circle: 50%

spacing:
  xs: 8px
  sm: 16px
  md: 24px
  base: 32px
  lg: 48px
  xl: 64px
  xxl: 96px
  section: 128px

components:
  button-primary-ink-pill:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas-cream}"
    typography: "{typography.nav-button}"
    rounded: "{rounded.md}"
    padding: 6px 24px
    border: "1.5px solid {colors.ink}"
  button-secondary-outlined-pill:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-button}"
    rounded: "{rounded.md}"
    padding: 6px 24px
    border: "1.5px solid {colors.ink}"
  button-consent-signal-pill:
    backgroundColor: "{colors.signal-orange}"
    textColor: "{colors.white}"
    typography: "{typography.consent-button}"
    rounded: "{rounded.consent}"
    padding: 1px 30px
    border: "0"
  button-satellite-circle:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.circle}"
    size: 56px
    border: "0"
  button-icon-circle:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.circle}"
    size: 40px
    border: "1px solid {colors.ink}"
  hero-media-frame:
    backgroundColor: "#000000"
    rounded: "{rounded.lg}"
    padding: "0"
    shadow: none
  service-portrait-card:
    backgroundColor: transparent
    rounded: "{rounded.circle}"
    size: 300px
    border: "0"
  pill-carousel-card:
    backgroundColor: transparent
    rounded: "{rounded.full}"
    border: "0"
  ghost-watermark-block:
    backgroundColor: transparent
    textColor: "{colors.ghost-watermark}"
    typography: "{typography.ghost-watermark}"
  chip-pill-tag:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.full}"
    padding: 8px 20px
  search-input-expanded:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    border: "1px solid rgba(20,20,19,0.5)"
  country-language-selector:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.footer-link}"
    rounded: "{rounded.full}"
    border: "1px solid rgba(255,255,255,0.4)"
  floating-nav-pill:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-button}"
    rounded: "{rounded.full}"
    padding: 16px 40px
    shadow: "rgba(0, 0, 0, 0.04) 0px 4px 24px 0px"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.footer-link}"
    padding: 100px 48px 148px
  eyebrow-label:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
  orbital-arc:
    backgroundColor: transparent
    border: "1px solid {colors.light-signal-orange}"
    rounded: "{rounded.none}"
---

## Overview

Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (`{colors.canvas-cream}` — #F3F0EE) — not white, not gray, but a color that feels like the paper of a premium annual report. On top of that canvas, everything that matters is shaped like a stadium, a pill, or a perfect circle. 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, and buttons either complete the pill or fit snugly at 20 points. There are almost no sharp corners anywhere on the page.

The second gesture is **orbit and trajectory**. Circular image masks don't sit still — they're connected by thin, hand-drawn-feeling orange arcs that span entire viewport widths, implying a constellation of services rather than a list. Each circle has a small attached "satellite" — a white micro-CTA holding an arrow icon — docked onto its perimeter like a moon. This is the most distinctive thing about Mastercard's current design language: the circles feel like they're in motion even though the page is still.

Typography is rendered entirely in **MarkForMC**, Mastercard's proprietary geometric sans. Headlines are set at a medium weight (500) with tight negative letter-spacing (-2%), giving them confidence without shouting. Body copy runs at the same family in a slightly lighter weight (450) — a weight you rarely see on the web, chosen because it reads softer than regular 400 without feeling thin. The whole system — warm cream surfaces, pill shapes, circular portraits, traced-orange orbits, black CTAs — feels simultaneously institutional (a 60-year-old payments network) and editorial (a modern brand magazine), which is exactly the tension Mastercard wants to hold.

**Key Characteristics:**
- Warm cream canvas (`{colors.canvas-cream}` — #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 (`{component.button-satellite-circle}`) and traced-orange orbital paths (`{component.orbital-arc}`).
- Ghost "watermark" headlines (cream-on-cream text at heading scale) layered behind circle portraits using `{typography.ghost-watermark}`.
- Black primary CTAs (`{component.button-primary-ink-pill}`) with 20px radius in the body — the cookie-banner orange is kept to consent flows.
- Floating pill-shaped navigation (`{component.floating-nav-pill}`) that docks below the viewport top with rounded shoulders.
- Eyebrow labels with a tiny accent dot + uppercase bold tracking — used as the section-category signal (`{typography.eyebrow}`).
- Dark warm-black footer (`{colors.ink}` — #141413) with four-column link layout and large conversational headline.

## Colors

### Primary
- **Mastercard Red** (`{colors.mastercard-red}` — #EB001B): The left circle of the Mastercard mark — used only in the brand logo, never as a UI color.
- **Mastercard Yellow** (`{colors.mastercard-yellow}` — #F79E1B): The right circle of the Mastercard mark — used only in the brand logo, never as a UI color.
- **Ink Black** (`{colors.ink}` — #141413): The warm near-black used for primary CTAs, headline text on cream, and the footer surface. Slightly warm (the `13` blue value pulls toward the cream) so it never feels jet-black on the warm canvas.

### Secondary & Accent
- **Signal Orange** (`{colors.signal-orange}` — #CF4500): The burnt/rust CTA orange used on consent actions and eyebrow dots. Deeper than the brand yellow, brighter than ink — it's the page's single aggressive color and must be used sparingly.
- **Light Signal Orange** (`{colors.light-signal-orange}` — #F37338): A lighter carroty orange used for carousel active indicators and decorative orbital arcs. Always acts as an attention cue, never as body color.
- **Clay Brown** (`{colors.clay-brown}` — #9A3A0A): The deep rust used for secondary link-style buttons (e.g., cookie details). Sits between ink and signal orange.

### Surface & Background
- **Canvas Cream** (`{colors.canvas-cream}` — #F3F0EE): The page canvas. Warm, putty-toned, the default body background. All editorial sections sit on this.
- **Lifted Cream** (`{colors.lifted-cream}` — #FCFBFA): One step lighter than canvas — used for nested "raised" sections that want to feel like paper laid on paper.
- **White** (`{colors.white}` — #FFFFFF): Reserved for the floating navigation pill, modal cards, secondary button fills, and small satellite-CTA circles attached to image portraits.
- **Soft Bone** (`{colors.soft-bone}` — #F4F4F4): A cool-gray alternative surface used inside a handful of component subregions.

### Neutrals & Text
- **Ink Black** (`{colors.ink}` — #141413): Primary headline and body text color.
- **Charcoal** (`{colors.charcoal}` — #262627): A slightly softer black used for some text alternates.
- **Slate Gray** (`{colors.slate-gray}` — #696969): Muted secondary text — eyebrow label alternative, disabled states, "Privacy Choices" bottom-row text.
- **Granite** (`{colors.granite}` — #555555) and **Graphite** (`{colors.graphite}` — #565656): Deeper gray for inline body accents and link alternates.
- **Dust Taupe** (`{colors.dust-taupe}` — #D1CDC7): Very muted cream-gray used for disabled or "whisper" text (e.g., placeholder-like empty state labels). Low contrast on cream; use only for subdued content.

### Semantic & Accent
- **Link Blue** (`{colors.link-blue}` — #3860BE): A deep, slightly dusty blue used for inline links and informational callouts. Saturated enough to read as a link without being neon.

### Gradient System
Mastercard uses no programmatic gradients in the core UI. The visual impression of "gradient" comes from two places:
- Circular image portraits where a warm-orange photo subject (a card, a sunflower, a beverage) fades to the cream canvas at its edge.
- Deep card shadows on elevated content (`rgba(0,0,0,0.08) 0px 24px 48px`) that create a soft halo beneath pill-shaped media.

## Typography

### Font Family
- **Primary**: `MarkForMC` — Mastercard's proprietary geometric sans. Every headline, body paragraph, button, nav link, and footer link on the page.
- **Secondary**: `MarkOffcForMC` — an "Official" cut used in a minority of contexts (legal text, some forms).
- **Fallback stack**: `SofiaSans, Arial, sans-serif` — Sofia Sans is a reasonable open-source stand-in; Arial is the final web-safe fallback.

### Hierarchy

| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|--------|-------------|----------------|-------|
| `{typography.h1-hero}` | 64px | 500 | 64px | -1.28px (-2%) | Set to `1:1` line-height for very tight vertical rhythm on multi-line hero |
| `{typography.h2-section}` | 36px | 500 | 44px | -0.72px (-2%) | Used in ghost-watermark headline treatments and section titles |
| `{typography.h3-card}` | 24px | 500 | 28.8px (1.2) | -0.48px (-2%) | Titles inside service/solution cards |
| `{typography.h4-subhead}` | 14px | 700 | 18.2px (1.3) | normal | Rarely used in marketing surfaces |
| `{typography.eyebrow}` | 14px | 700 | 14px | 0.56px (+4%) | Uppercase, paired with a tiny accent dot (e.g., "• SERVICES") |
| `{typography.body}` | 16px | 450 | 22.4px (1.4) | normal | The half-step 450 weight is MarkForMC's signature — softer than 500, firmer than 400 |
| `{typography.nav-button}` | 16px | 500 | 16px | -0.48px (-3%) | Tight, compact, no text-transform |
| `{typography.footer-link}` | 14px | 450 | ~20px | normal | Lighter weight on dark footer for airier density |
| `{typography.footer-column-header}` | 12–14px | 700 | 14px | 0.56px (+4%) | Uppercase, muted gray, short tracking |

### Principles
- **Weight 450 is load-bearing**. Most brands use 400/500/700; Mastercard uses 450 for body copy, which creates an unusually soft reading tone. Replacing it with 400 flattens the identity.
- **Tight negative tracking on headlines** (-2%) gives display text its editorial density — the words lock together rather than breathe.
- **Uppercase tracking only on the eyebrow scale** (14px / 700 / +4% tracking). Don't use uppercase anywhere else; no shouty section titles.
- **One-font system**. Resist the urge to add a second typeface for contrast. The contrast comes from scale, weight, and letter-spacing, not from a serif or display accent.
- **Line-height ratio drops with size**. H1 is 1:1, H3 is 1.2, body is 1.4. Tight display, comfortable reading.

### Note on Font Substitutes
MarkForMC is proprietary and licensed. When rebuilding a matching aesthetic without access to the original:
- **Sofia Sans** (Google Fonts) is the closest open-source match — it's already in Mastercard's declared fallback stack.
- **Inter** at weights 450/500/700 works as a generic stand-in; expect slightly taller x-height and looser letter shapes.
- **Neue Haas Grotesk** or **Geist** can approximate the geometric feel for commercial projects.
- Whichever substitute is used, preserve the **-2% letter-spacing on headlines** and the **450 body weight** (use `font-weight: 450` with variable fonts, or substitute `font-weight: 400` and tighten the letter-spacing by ~-0.5% to compensate).

## Components

### Buttons

**`button-primary-ink-pill`** — The signature CTA. Ink Black (`{colors.ink}` — #141413) fill, Canvas Cream (`{colors.canvas-cream}` — #F3F0EE) text (not pure white), 1.5px solid Ink Black border, 20px radius, 6×24px padding, MarkForMC 16px / weight 500 / -0.32px letter-spacing. Used for every marketing CTA in the page body.

**`button-secondary-outlined-pill`** — White fill, Ink Black text, 1.5px solid Ink Black border, 20px radius, 6×24px padding, MarkForMC 16px / weight 450 / 20.8px line-height. Used for secondary actions paired with a primary, or standalone utility CTAs.

**`button-consent-signal-pill`** — Signal Orange (`{colors.signal-orange}` — #CF4500) fill, white text, no border, 24px radius, very tight 1×30px padding, MarkForMC 13px / weight 400 / 0.13px letter-spacing. Reserved exclusively for cookie consent, privacy preference, and other legally-distinct confirmations. **Do not** use this orange for marketing CTAs — it reads as a compliance color.

**`button-satellite-circle`** — The signature satellite CTA. White (`{colors.white}` — #FFFFFF) fill, Ink Black arrow (`→`) at ~20px, no border, 50% radius (perfect circle), 56px diameter. Docks onto the bottom-right edge of a circular portrait, protruding ~40% outside the portrait's circle. Always paired with a `{component.service-portrait-card}`.

**`button-icon-circle`** — Carousel pagination, hero play, and search-toggle controls. Transparent or white fill, 10–20px centered icon, 1px Ink Black border (on cream) or none (over media), 50% radius, 40px diameter minimum (80px for hero video play).

### Cards & Containers

**`hero-media-frame`** — The most iconic Mastercard gesture. Dark video or full-bleed imagery (typically black `#000000` or `#2B2B2B`), 40px radius all corners, ~full viewport width minus 48px gutter, ~60–70% of viewport height, no shadow. Sits directly on canvas. Do not round less than 40px.

**`service-portrait-card`** — Perfect circle (50% radius) or ellipse (999px / 1000px). 260–340px diameter desktop, ~220px mobile. Square source image cropped to circle. Attached `{component.button-satellite-circle}` docked bottom-right. Eyebrow label below with accent dot + uppercase text. Title below in `{typography.h3-card}`. Decorative `{component.orbital-arc}` spans outward to the next card.

**`pill-carousel-card`** — 1000px radius (full pill) or 40px corners (rounded stadium). ~40–60% viewport width, ~380–420px height (portrait-pill orientation). Full-bleed photography with small overlaid `{component.chip-pill-tag}` labels. Large inline CTA inside uses the Ink Pill button at oversized 16×40px padding and 40px radius.

**`ghost-watermark-block`** — MarkForMC 72–128px / weight 500 / tight -2% tracking. Color is Canvas Cream slightly darkened (`{colors.ghost-watermark}` — #E8E2DA or similar — cream-on-cream). Layered behind portrait circles, bleeding off the viewport edge. Sets section theme without competing with foreground copy.

### Inputs & Forms

**`search-input-expanded`** — Initial state is a 48px circular button with a magnifier icon. Expanded state: horizontal input field, 1px solid Ink Black border at ~50% opacity, 999px radius, 12×24px padding, white background.

**`country-language-selector`** — Footer-bound. Ink Black background (same as footer), white text, 1px solid `rgba(255,255,255,0.4)` border, 999px radius (full pill), downward chevron on the right.

### Navigation

**`floating-nav-pill`** — Desktop. White-to-translucent-white pill floating ~24px below the viewport top. 999px / 1000px radius (full pill), ~16×40px internal padding, very soft shadow (`rgba(0, 0, 0, 0.04) 0px 4px 24px 0px`). Mastercard logo left, primary link group center ("For you", "For business", "For the world", "For innovators", "News and trends"), search icon right. 48–56px gap between primary links. Link style: Ink Black, weight 500, 16px, no underline, no pill surround until active.

**Mobile Nav** — Same pill shape collapsed to logo + hamburger + search icon only. Menu opens into a full-screen overlay with primary links stacked vertically.

### Image Treatment

- **Aspect ratios**: 1:1 (service portraits cropped to circle), ~3:4 or ~4:5 (carousel pill cards), 16:9 or wider (hero video frame).
- **Full-bleed vs padded**: Hero is viewport-wide with gutters; service portraits are centered with generous whitespace; footer imagery is rare.
- **Masking**: Aggressive circular masking is the defining treatment — square source images cropped to perfect circles. Never use rectangular service imagery.
- **Lazy loading**: Standard `loading="lazy"` with a soft blur-up transition from a cream-tinted placeholder, preserving the warm palette during load.

### Decorative Orbital Lines

**`orbital-arc`** — A signature motif. Thin (~1–1.5px) single-weight curved lines in Light Signal Orange (`{colors.light-signal-orange}` — #F37338) tracing arcs between circular portraits. Imply connection between service cards without literal arrows. Span widths from ~200px up to full-viewport arcs. Feel hand-drawn (subtle irregularity) rather than perfect CSS curves. Appear only in sections with circular portrait content — never on pill sections, never in the footer.

### Footer

**`footer`** — Ink Black (`{colors.ink}` — #141413) background, white text, 48px horizontal padding, 100px top / 148px bottom (very tall bottom space). Large conversational H2 ("We're always here when you need us") left-aligned, then a 4-column link grid below. Column headers in `{typography.footer-column-header}` (uppercase, muted, weight 700, +4% tracking). Link rows in white at `{typography.footer-link}` weight 450 / 14px. "NEED HELP?" column entries prefixed with a small icon (support bubble, card, map pin, question mark). External link marker is a small upper-right arrow (`↗`). Bottom row below a 1px white-at-opacity divider: copyright + privacy small-print + `{component.country-language-selector}` + four social icons (LinkedIn, Facebook, X, YouTube).

## Layout

### Spacing System
- **Base unit:** 8px (confirmed by dembrandt extraction and computed styles).
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 16px · `{spacing.md}` 24px · `{spacing.base}` 32px · `{spacing.lg}` 48px · `{spacing.xl}` 64px · `{spacing.xxl}` 96px · `{spacing.section}` 128px.
- **Section vertical padding:** ~96–128px between major sections on desktop; ~48–64px on mobile.
- **Card internal padding:** 32–40px on desktop, ~24px on mobile.
- **Nav top margin:** ~24px from viewport top (the pill floats, doesn't touch).

### Grid & Container
- **Max content width:** ~1200–1280px centered, with ~48–100px horizontal gutter.
- **Column pattern:** 12-column implied. Practical layouts use 2-up asymmetric (large headline left, supporting text right), 1-up full-bleed (hero, video), or staggered single-portrait placement (service cards in varying grid positions creating the "constellation" feel).
- **Footer grid:** 4 equal columns on desktop, collapses to single column accordion on mobile.

### Whitespace Philosophy
Mastercard treats whitespace as structure, not absence. A typical service section has a ghost headline occupying the top ~40% of the section (mostly empty cream), a single circular portrait positioned ~60% down asymmetric to left or right, and ~300–500px of blank canvas between the portrait and the next section. This deliberate emptiness tells the eye "slow down, read one thing at a time" — the opposite of dense dashboard UIs.

### Border Radius Scale

| Radius | Token | Use |
|--------|-------|-----|
| 3–6px | `{rounded.micro}` / `{rounded.sm}` | Tiny decorative elements, cookie banner micro-chips |
| 20px | `{rounded.md}` | Primary and secondary body CTAs (the signature button radius) |
| 24px | `{rounded.consent}` | Consent/orange pill buttons, modal inner chips |
| 40px | `{rounded.lg}` | Hero media frames, large section container corners, H2 pill labels |
| 50% | `{rounded.circle}` | Circular portraits, icon-only buttons, satellite CTAs |
| 999px | `{rounded.full}` | Full pill shapes — navigation, carousel cards, footer country selector, primary inline chips |

The scale is unusual: most systems use 4/8/12/16. Mastercard skips those and commits to **either small (≤6), medium-large (20–40), or full-pill (99+)**. The middle ground of 8–12 is absent, which is why the UI feels either "precise and utility" or "soft and editorial" with no in-between.

## Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | No shadow | The default — 95% of surfaces sit directly on cream canvas. |
| 1 | `rgba(0, 0, 0, 0.04) 0px 4px 24px 0px` | Floating nav pill — barely-there lift. |
| 2 | `rgba(0, 0, 0, 0.08) 0px 24px 48px 0px` | Hero media frames, elevated cards — soft large-radius halo rather than hard drop. |
| 3 | `rgba(0, 0, 0, 0.25) 0px 70px 110px 0px` | Rare; dramatic elevation on a feature tile. |

### Shadow Philosophy
Mastercard uses shadows as **atmospheric cushioning**, not directional light. The Level 2 shadow has a 48px spread and only 8% opacity — it barely exists as dark pixels but creates a "the card is breathing above the canvas" feel. There are almost no hard-edged, tight shadows anywhere in the system. Border lines are preferred over shadows for functional delineation (form inputs, footer divider).

### Decorative Depth
- **Orbital arcs** (Light Signal Orange, ~1px): trace connective paths across sections.
- **Ghost watermark headlines**: cream-on-cream text gives sections an almost-pressed-paper quality.
- **Circle-image fade**: warm-toned photography at the edge of circular portraits dissolves into the canvas, implying soft atmospheric depth.

## Do's and Don'ts

### Do
- Use Canvas Cream (`{colors.canvas-cream}` — #F3F0EE) as the default body background — never pure white.
- Mask service/feature imagery as perfect circles, not rectangles or rounded rectangles.
- Attach a white satellite CTA to the bottom-right of each circular portrait.
- Set headlines in MarkForMC weight 500 with -2% letter-spacing.
- Use weight 450 (not 400) for body paragraphs.
- Keep primary CTAs as Ink Black pills (20px radius) with cream text.
- Use Signal Orange only on consent, legal, or compliance actions.
- Float the nav as a rounded white pill below the viewport top, not flush at y=0.
- Build page rhythm from three surface tones: canvas cream → lifted cream → ink footer.
- Use thin Light Signal Orange arcs between service cards to imply connection.

### Don't
- Don't use pure white as a page background — it breaks the warm editorial tone.
- Don't round image frames at 8–16px — Mastercard either uses full-pill, 40px, or full-circle. In-between radii look generic.
- Don't use Signal Orange for marketing CTAs — it reads as cookie-consent orange and dilutes the legal color signal.
- Don't mix typefaces — no serif accent, no script, no secondary display font.
- Don't crowd the nav with more than six top-level links — the pill is meant to feel airy.
- Don't drop hard shadows — all elevation should use 48px+ spread and ≤10% opacity.
- Don't use uppercase for anything larger than the 14px eyebrow label.
- Don't omit the tiny accent dot before eyebrow labels — it's the identity.
- Don't place circular portraits on a grid — their magic comes from asymmetric placement.

## Responsive Behavior

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | ≤ 767px | Nav pill shows logo + menu + search only; primary links hide behind hamburger; service portraits stack single-column centered; hero headline drops from 64px to ~40px; footer columns collapse into a vertical accordion. |
| Tablet | 768–1023px | Nav pill shows 2–3 primary links truncated; service portraits arrange 2-up; hero headline ~48px. |
| Desktop | ≥ 1024px | Full nav with 5 primary links centered; service portraits asymmetrically placed with decorative orbital lines; hero headline 64px. |
| Wide | ≥ 1440px | Content max-width caps at ~1280px; gutters grow symmetrically; orbital lines extend further. |

### Touch Targets
All interactive elements comfortably exceed 44×44px. The satellite CTA (circle + arrow) is ~50–60px. The nav pill buttons are ~48px tall. Mobile hamburger and search are 48×48px. No link or button drops below 40px in any breakpoint.

### Collapsing Strategy
- **Nav:** full pill → compact pill with hamburger. Pill shape is preserved across breakpoints — always rounded, always floating.
- **Service grid:** asymmetric constellation → 2-up → 1-up stack. Orbital arcs are removed on mobile (they only work with asymmetric placement).
- **Spacing:** section vertical padding compresses from 128px to 48px on mobile.
- **Content:** two-column hero (headline left / supporting text right) becomes stacked (headline on top, supporting text below).
- **Footer:** 4 columns → 1 column accordion with chevron toggles per section.

### Image Behavior
Circular portraits scale proportionally (maintaining the perfect circle at every size). Hero video frames maintain their 40px radius at every breakpoint, but the frame itself shrinks with the viewport. Lazy loading is standard with a cream-tinted blur-up placeholder, preserving the palette during load.

## Known Gaps

- **MarkForMC typeface:** The live page uses MarkForMC, a proprietary licensed typeface. Sofia Sans is the closest open-source substitute and is listed in Mastercard's own fallback stack.
- **Tablet breakpoint specifics:** The 768–1023px range was inferred from desktop and mobile captures; intermediate layouts may vary per section.
- **Ghost-watermark tone:** The exact "whisper" cream tone used for ghost-watermark headlines behind circular portraits reads between `#E8E2DA` and `#D1CDC7` in captures; the precise value varies per section.
- **Consent color scope:** Third-party consent orange (`{colors.signal-orange}` — #CF4500) is Mastercard's documented consent signal and should not be confused with any marketing CTA color.
- **Logo as brand asset:** The Mastercard logo mark (red `{colors.mastercard-red}` — #EB001B + yellow `{colors.mastercard-yellow}` — #F79E1B) is a brand asset, not a UI palette entry.