packages/shared-skills/skills/frontend/references/design/mastercard.md
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. 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:
#F3F0EE) replaces traditional white — every surface is tinted, never sterile#141413) with four-column link layout and large conversational headline#EB001B): The left circle of the Mastercard mark — used only in the brand logo, never as a UI color.#F79E1B): The right circle of the Mastercard mark — used only in the brand logo, never as a UI color.#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.#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.#F37338): A lighter carroty orange used for carousel active indicators and decorative orbital arcs. Always acts as an attention cue, never as body color.#9A3A0A): The deep rust used for secondary link-style buttons (e.g., cookie details). Sits between ink and signal orange.#F3F0EE): The page canvas. Warm, putty-toned, the default body background. All editorial sections sit on this.#FCFBFA): One step lighter than canvas — used for nested "raised" sections that want to feel like paper laid on paper.#FFFFFF): Reserved for the floating navigation pill, modal cards, secondary button fills, and small satellite-CTA circles attached to image portraits.#F4F4F4): A cool-gray alternative surface used inside a handful of component subregions.#141413): Primary headline and body text color.#262627): A slightly softer black used for some text alternates.#696969): Muted secondary text — eyebrow label alternative, disabled states, "Privacy Choices" bottom-row text.#555555) and Graphite (#565656): Deeper gray for inline body accents and link alternates.#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.#3860BE): A deep, slightly dusty blue used for inline links and informational callouts. Saturated enough to read as a link without being neon.Mastercard uses no programmatic gradients in the core UI. The visual impression of "gradient" comes from two places:
rgba(0,0,0,0.08) 0px 24px 48px) that create a soft halo beneath pill-shaped mediaMarkForMC — Mastercard's proprietary geometric sans. Every headline, body paragraph, button, nav link, and footer link on the page.MarkOffcForMC — an "Official" cut used in a minority of contexts (legal text, some forms).SofiaSans, Arial, sans-serif — Sofia Sans is a reasonable open-source stand-in; Arial is the final web-safe fallback.| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| H1 (hero) | 64px | 500 | 64px | -1.28px (-2%) | Set to 1:1 line-height for very tight vertical rhythm on multi-line hero |
| H2 (section) | 36px | 500 | 44px | -0.72px (-2%) | Used in ghost-watermark headline treatments and section titles |
| H3 (card title) | 24px | 500 | 28.8px (1.2) | -0.48px (-2%) | Titles inside service/solution cards |
| H4 (subhead) | 14px | 700 | 18.2px (1.3) | normal | Rarely used in marketing surfaces |
| Eyebrow (H5) | 14px | 700 | 14px | 0.56px (+4%) | Uppercase, paired with a tiny accent dot (e.g., "• SERVICES") |
| Body paragraph | 16px | 450 | 22.4px (1.4) | normal | The half-step 450 weight is MarkForMC's signature — softer than 500, firmer than 400 |
| Nav link / Button label | 16px | 500 | 16px | -0.48px (-3%) | Tight, compact, no text-transform |
| Footer link | 14px | 450 | ~20px | normal | Lighter weight on dark footer for airier density |
| Footer column header | 12–14px | 700 | 14px | 0.56px (+4%) | Uppercase, muted gray, short tracking |
MarkForMC is proprietary and licensed. When rebuilding a matching aesthetic without access to the original:
font-weight: 450 with variable fonts, or substitute font-weight: 400 and tighten the letter-spacing by ~-0.5% to compensate).Primary — Ink Pill
#141413)#F3F0EE) — not pure whiteSecondary — Outlined Pill
#FFFFFF)#141413)Consent / Signal — Orange Pill
#CF4500)#FFFFFF)Satellite — Circular Micro-CTA
#FFFFFF)→) at ~20pxIcon-Only Circle Button (carousel, play/pause)
Hero Media Frame (Stadium)
#000000 or #2B2B2B behind video)Service / Solution Portrait Card
Pill Carousel Card
Ghost Watermark Text Block
#E8E2DA or similar — cream-on-cream)Minimal form surface on the marketing page. The search input in the nav header is:
1px solid Ink Black at ~50% opacity, radius 999px, padding 12px 24px, white backgroundCountry/language selector (footer)
rgba(255,255,255,0.4)Floating Nav Pill (desktop)
rgba(0, 0, 0, 0.04) 0px 4px 24px 0px) — just enough to lift it off the cream canvasMobile Nav
loading="lazy" with a soft blur-up transition from a cream-tinted placeholder, preserving the warm palette during loadA signature motif: thin (~1–1.5px) single-weight curved lines in Light Signal Orange (#F37338) tracing arcs between circular portraits. These lines:
#141413)↗) after link textMastercard treats whitespace as structure, not absence. A typical service section has:
| Radius | Use |
|---|---|
| 3–6px | Tiny decorative elements, cookie banner micro-chips |
| 20px | Primary and secondary body CTAs (the signature button radius) |
| 24px | Consent/orange pill buttons, modal inner chips |
| 40px | Hero media frames, large section container corners, H2 pill labels |
| 50% | Circular portraits, icon-only buttons, satellite CTAs |
| 99px / 999px / 1000px | 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.
| 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 — a soft large-radius halo rather than a hard drop |
| 3 | rgba(0, 0, 0, 0.25) 0px 70px 110px 0px | Rare; dramatic elevation on a feature tile |
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).
#F3F0EE) as the default body background — never pure white| 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 |
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.
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.
#141413) — the warm near-black used for primary pill buttons and footer"#F3F0EE) — warm putty body canvas, never pure white"#FCFBFA) — one step lighter than canvas for nested sections"#141413)"#141413) at weight 450"#696969)"#CF4500) — reserve for cookie consent and legal actions"#F37338) — orbital decorative lines only"#141413) with White text"#141413) background, Canvas Cream (#F3F0EE) text, 20px border-radius, 6px vertical and 24px horizontal padding, MarkForMC font at 16px weight 500 with -2% letter-spacing."rgba(0, 0, 0, 0.04) 0px 4px 24px 0px shadow, 999px border-radius, ~16px vertical and 40px horizontal internal padding. Position it 24px below the viewport top, centered, with the Mastercard logo at the left, five primary links centered with 48px gap, and a circular 48px search button at the right."#141413) background, white text, 4-column link grid with uppercase muted column headers at 14px weight 700 +4% tracking. Include a large conversational H2 above the grid, a 1px white-at-30%-opacity horizontal divider below, and a bottom row with copyright, legal small-print links, a pill-shaped country selector, and four social icons."When refining existing screens generated with this design system:
#F3F0EE), not white — this single change shifts the entire mood toward Mastercard#E8E2DA and #D1CDC7 in captures; the precise value varies per section.#CF4500) is Mastercard's documented consent signal and should not be confused with any marketing CTA color.#EB001B + yellow #F79E1B) is a brand asset, not a UI palette entry.