A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
16tokens
10type steps
5radius steps
1pxspacing base
Mastercard, in one page
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:
- 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
- Floating pill-shaped navigation 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
- Dark warm-black footer (
#141413) with four-column link layout and large conversational headline
Do's and don'ts
Do
- Use 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Mastercard design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Mastercard Red: #eb001b
- Mastercard Yellow: #f79e1b
- Ink Black: #141413
- Signal Orange: #cf4500
- Light Signal Orange: #f37338
- Clay Brown: #9a3a0a
- Canvas Cream: #f3f0ee
- Lifted Cream: #fcfbfa
- White: #ffffff
- Soft Bone: #f4f4f4
Type:
- families: MarkForMC, MarkOffcForMC, Sofia Sans, Inter
- scale: 14, 16, 18.2, 20, 22.4, 24, 28.8, 36, 44
- weights: 400, 450, 500, 700
Shape:
- radius: 6, 20, 24, 40, 99
- elevation: Shadow: none or very subtle (the portrait's shadow carries the elevation) | Shadow: none (sits directly on canvas) | ### Shadow Philosophy
Spacing: 1, 6, 8, 12, 16, 48
Rules:
- Use 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Mastercard Red (
#EB001B): The left circle of the Mastercard mark — used only in the brand logo, never as a UI color. - Mastercard Yellow (
#F79E1B): The right circle of the Mastercard mark — used only in the brand logo, never as a UI color. - Ink Black (
#141413): The warm near-black used for primary CTAs, headline text on cream, and the footer surface. Slightly warm (the13blue value pulls toward the cream) so it never feels jet-black on the warm canvas.
Secondary & Accent
- 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 (
#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 (
#9A3A0A): The deep rust used for secondary link-style buttons (e.g., cookie details). Sits between ink and signal orange.
Surface & Background
- Canvas Cream (
#F3F0EE): The page canvas. Warm, putty-toned, the default body background. All editorial sections sit on this. - Lifted Cream (
#FCFBFA): One step lighter than canvas — used for nested "raised" sections that want to feel like paper laid on paper. - White (
#FFFFFF): Reserved for the floating navigation pill, modal cards, secondary button fills, and small satellite-CTA circles attached to image portraits. - Soft Bone (
#F4F4F4): A cool-gray alternative surface used inside a handful of component subregions.
Neutrals & Text
- Ink Black (
#141413): Primary headline and body text color. - Charcoal (
#262627): A slightly softer black used for some text alternates. - Slate Gray (
#696969): Muted secondary text — eyebrow label alternative, disabled states, "Privacy Choices" bottom-row text. - Granite (
#555555) and Graphite (#565656): Deeper gray for inline body accents and link alternates. - 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 (
#3860BE): A deep, slightly dusty blue used for inline links and informational callouts. Saturated enough to read as a link without being neon. - Priceless Red + Yellow: The full-color Mastercard logo mark is the only place the brand's red and yellow appear together; they lock the identity to the page without acting as a UI palette.
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
Type scaleRead the full spec
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 |
|---|---|---|---|---|---|
| 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 |
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: 450with variable fonts, or substitutefont-weight: 400and tighten the letter-spacing by ~-0.5% to compensate).
Components and layoutRead the full spec
Buttons
Primary — Ink Pill
- Background: Ink Black (
#141413) - Text: Canvas Cream (
#F3F0EE) — not pure white - Border: 1.5px solid Ink Black (same as bg, creates crisp edge)
- Radius: 20px
- Padding: 6px 24px
- Font: MarkForMC 16px / weight 500 / letter-spacing -0.32px
- Default: as above; solid warm-black pill on cream canvas
- Active / pressed: subtle inward-shrink or 2px offset (not a hover variant)
- Use for: all marketing CTAs in the page body ("Learn more", "Explore", "Discover")
Secondary — Outlined Pill
- Background: White (
#FFFFFF) - Text: Ink Black (
#141413) - Border: 1.5px solid Ink Black
- Radius: 20px
- Padding: 6px 24px
- Font: MarkForMC 16px / weight 450 / line-height 20.8px
- Default: white-on-cream pill with crisp ink outline
- Active / pressed: subtle compression
- Use for: secondary actions paired with a primary, or standalone utility CTAs
Consent / Signal — Orange Pill
- Background: Signal Orange (
#CF4500) - Text: White (
#FFFFFF) - Border: 0
- Radius: 24px
- Padding: 1px 30px (very tight vertical, wide horizontal)
- Font: MarkForMC 13px / weight 400 / letter-spacing 0.13px
- Default: as above; bright rust pill with white text
- Use for: cookie consent, privacy preference, and other legally-distinct confirmations. Do not use this orange for marketing CTAs — it reads as a compliance color.
Satellite — Circular Micro-CTA
- Background: White (
#FFFFFF) - Icon: Ink Black arrow (
→) at ~20px - Border: none
- Radius: 50% (perfect circle)
- Size: ~50–60px diameter
- Shadow: none or very subtle (the portrait's shadow carries the elevation)
- Default: docks onto the bottom-right edge of a circular portrait, protruding partway outside the portrait's circle
- Use for: the primary entry point into service/solution cards; always paired with a circular portrait
Icon-Only Circle Button (carousel, play/pause)
- Background: transparent or white
- Icon: 10–20px centered
- Border: 1px solid Ink Black (when on cream) or none (when over media)
- Radius: 50%
- Size: 40px diameter minimum for carousel controls; 80px for hero video play
- Use for: carousel pagination/play-pause, hero video play, search toggle
Cards & Containers
Hero Media Frame (Stadium)
- Background: Dark video or full-bleed imagery (typically black
#000000or#2B2B2Bbehind video) - Radius: 40px all corners (creates a stadium shape on wide viewports)
- Width: ~full viewport minus ~48px gutter on each side
- Height: ~60–70% of viewport
- Shadow: none (sits directly on canvas)
- Corners: the extreme 40px radius on a media element is the most iconic Mastercard gesture — do not round less
Service / Solution Portrait Card
- Shape: Perfect circle (radius 50%) or ellipse (radius 999px / 1000px)
- Diameter: 260–340px desktop; ~220px mobile
- Image crop: square source, cropped to circle
- Attached element: White satellite circular CTA (see above) docked bottom-right, ~40% outside the portrait
- Eyebrow below: accent dot + uppercase label (e.g., "• SERVICES", "• SOLUTIONS")
- Title below: H3 (24px / weight 500 / -2% tracking), 1–2 lines max
- Decorative orbit: thin ~1px Light Signal Orange curved line spanning from this card outward to the next, implying connection
Pill Carousel Card
- Radius: 1000px (full pill) or 40px corners (rounded stadium)
- Width: ~40–60% of viewport
- Height: ~380–420px (portrait-pill orientation)
- Content: full-bleed photography with small overlaid chip labels
- Chip inside: White pill (~ 999px radius), Ink Black text, padding 8px 20px, used for category tags like "Story"
- Large inline CTA inside: Ink Pill button, oversized (padding 16px 40px, radius 40px)
Ghost Watermark Text Block
- Font: MarkForMC 72–128px / weight 500 / tight -2% tracking
- Color: Canvas Cream slightly darkened (
#E8E2DAor similar — cream-on-cream) - Position: layered behind portrait circles, bleeding off the viewport edge
- Purpose: sets section theme without competing with foreground copy
Inputs & Forms
Minimal form surface on the marketing page. The search input in the nav header is:
- Initial state: a 48px circular button with a magnifier icon
- Expanded state: horizontal input field, border
1px solidInk Black at ~50% opacity, radius 999px, padding 12px 24px, white background
Country/language selector (footer)
- Background: Ink Black (same as footer)
- Text: White
- Border: 1px solid
rgba(255,255,255,0.4) - Radius: 999px (full pill)
- Icon: downward chevron on the right
Navigation
Floating Nav Pill (desktop)
- Container: white-to-translucent-white pill floating below the very top of the viewport with a ~24px top margin
- Radius: 999px / 1000px (full pill)
- Padding: ~16px 40px internal
- Shadow: very soft (
rgba(0, 0, 0, 0.04) 0px 4px 24px 0px) — just enough to lift it off the cream canvas - Content: Mastercard logo left, primary link group center ("For you", "For business", "For the world", "For innovators", "News and trends"), search icon right
- Link spacing: ~48–56px gap between primary links
- Link style: Ink Black, weight 500, 16px, no underline, no pill surround until active
Mobile Nav
- The same pill shape but collapsed to: logo + hamburger menu button + search icon only
- Menu opens into a full-screen overlay with the primary links stacked vertically
Image Treatment
Responsive behaviourRead the full spec
Breakpoints
| 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.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-mastercard {--page-bg: #f3f0ee;
--page-bg-gradient: none;
--text-color: #141413;
--heading-color: #141413;
--link-color: #d70019;
--link-hover-color: #a40013;
--border-color: #cbc8c7;
--card-bg: #f3f0ee;
--card-shadow: 0 1px 2px rgba(20,20,19,0.06);
--card-hover-shadow: 0 6px 18px rgba(20,20,19,0.12);
--header-bg: #141413;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #f3f0ee;
--footer-text-color: #626160;
--button-bg: #eb001b;
--button-text-color: #ffffff;
--button-hover-bg: #b80015;
--button-border: none;
--button-border-radius: 24px;
--button-secondary-bg: #e6e3e1;
--button-secondary-text-color: #141413;
--button-secondary-hover-bg: #d8d6d4;
--button-secondary-border: 1px solid #cbc8c7;
--prompt-bg: #e8e5e3;
--prompt-text-color: #141413;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 24px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/mastercard/DESIGN.md· 26.2 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.