{
"schema": "brand-kit@2",
"palette": {
"paper": "#F3F0EE",
"surface": "#FCFBFA",
"ink": "#141413",
"ink_muted": "#141413",
"accent": "#F37338",
"on_accent": "#141413",
"accent_secondary": "#FF5F00",
"night": "#141413",
"on_night": "#FFFFFF",
"extras": [
{
"name": "Mastercard Red",
"hex": "#EB001B",
"role": "Left circle of the Symbol. Logo color only: RGB 235/0/27, CMYK 0/100/98/3, PANTONE 2035 C",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Color specifications)",
"site_use": "only inside the Symbol (nav logo, video, card art)"
},
{
"name": "Mastercard Orange",
"hex": "#FF5F00",
"role": "The overlap where the circles meet. Logo color only: RGB 255/95/0, CMYK 0/75/100/0, PANTONE 165 C",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Color specifications)",
"site_use": "only inside the Symbol"
},
{
"name": "Mastercard Yellow",
"hex": "#F79E1B",
"role": "Right circle of the Symbol. Logo color only: RGB 247/158/27, CMYK 0/44/100/0, PANTONE 1375 C",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Color specifications)",
"site_use": "only inside the Symbol"
},
{
"name": "Warm canvas",
"hex": "#F3F0EE",
"role": "Page ground of the whole homepage; also the fill of round arrow buttons and the text color on the black filled button",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "Ink",
"hex": "#141413",
"role": "All text on light grounds, filled button, 1px button rings, inactive carousel dots, footer ground",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "Panel",
"hex": "#FCFBFA",
"role": "The one raised panel (Cards and benefits): a lighter warm white card with 80px corners on the canvas",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "Signal orange",
"hex": "#F37338",
"role": "The only UI accent: eyebrow dot, active carousel dot, 1px outline pills and orbit circles, link and nav hover underline, button hover fill. Not one of the three logo colors",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "Footer muted",
"hex": "#D1CDC7",
"role": "Footer column headings, footer hairline, country-select ring (on #141413)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "Icon ring",
"hex": "#333333",
"role": "1px ring of the 40px search button in the nav",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "White",
"hex": "#FFFFFF",
"role": "Nav bar (80% opacity desktop, solid phone), carousel label pills, 80px arrow circles on photos, all footer text",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "Black",
"hex": "#000000",
"role": "Under the hero video only (letterbox ground) and the video control gradient",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
]
},
"typography": {
"display": {
"family": "Kumbh Sans",
"weight": 500,
"tracking": 0,
"line_height": 1,
"fallback_stack": "\"Kumbh Sans\", \"Helvetica Neue\", Arial, sans-serif",
"real": "FF Mark (served on mastercard.com as the custom web font \"mccom\", MarkForMC / MarkOffcForMC); commercial licence, not available to us",
"stand_in": true,
"why": "Geometric sans with near-circular bowls, double-storey a and single-storey g like FF Mark. Calibrated by rendering: see calibration",
"prov": "published",
"source": "https://www.pentagram.com/work/mastercard",
"note": "Pentagram names FF Mark as the identity typeface (2016)",
"site": {
"weight": 500,
"size_px": "120 section headline / 64 hero and Priceless headline / 36 card titles (phone 48 / 48 / 24)",
"line_height": "1.0 at 120 and 64; 1.2 at 36; 1.1 at 48 phone",
"tracking": "-0.02em on every headline (-2.4px at 120, -1.28px at 64, -0.72px at 36)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
},
"body": {
"family": "Kumbh Sans",
"weight": 400,
"tracking": 0.02,
"line_height": 1.3,
"scale": 1,
"fallback_stack": "\"Kumbh Sans\", \"Helvetica Neue\", Arial, sans-serif",
"real": "FF Mark Book (mccom weight 450)",
"stand_in": true,
"site": {
"weights": "450 lead and body, 500 nav, buttons and footer links, 700 eyebrows",
"sizes_px": "20 lead, 16 card copy and buttons, 14 eyebrows and footer",
"line_height": "26px at 20, 22.4px at 16",
"tracking": "normal on body; -0.03em nav; -0.02em buttons; +0.04em eyebrows",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
},
"calibration": "Rendered on mastercard.com itself against the live \"mccom\" face (2026-10-31), 26 open candidates. Headline \"Together the possibilities are priceless\" at 120px: mccom 500 with -0.02em = 2135px wide; Kumbh Sans 500 with 0 tracking = 2111px (-1.1%), at -0.02em only 2015px (-5.6%). Ink per px of advance: mccom 500 20.5, Kumbh 500 20.4 (Kumbh 600 23.2 is too dark). x-height/cap height: mccom 0.684, Kumbh 0.667, Plus Jakarta 0.723, Manrope 0.750. Lead line at 20px: mccom 450 = 789px; Kumbh 400 with +0.02em = about 790px (ink 17.5 vs 15.8; 400 is the closest). Eyebrow at 14px uppercase: mccom 700 +0.04em = 322px; Kumbh 700 +0.06em = 321px. So: Kumbh Sans 500 tracking 0 for headlines, 400 +0.02em for body, 700 +0.06em uppercase for eyebrows. Do not copy mccom's negative tracking onto the stand-in."
},
"style": {
"button_shape": "pill",
"button_note": "Every button is a 40px pill (radius 20px): filled #141413 with #F3F0EE text for the one primary per section, otherwise a 1px #141413 outline on the ground. Round icon buttons are 42px circles with a 1px ring; arrows on photos are 80px white circles",
"corners": "Everything round: 80px corners on the hero frame and the panel, stadium (radius 999px) and full circles for photos, 40px on the video, pills for labels and buttons. No square corners anywhere on the page",
"linework": "1px Signal orange #F37338 outlines (stadium pills, orbit circles) and 1px ink rings on buttons",
"motion": "Button hover fills grow from the center over 0.5s ease-in-out; carousel bullets 0.4s cubic-bezier(0.25,0.1,0.25,1)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"voice": {
"tone": [
"optimistic",
"human",
"assured"
],
"notes": [
"Homepage voice (observed 2026-10-31): short sentence-case headlines that read as a promise (\"Powering economies and empowering people\"), one plain lead sentence under each, eyebrows naming the audience in caps. The word priceless recurs as the brand idea, never as a price claim.",
"Brand Center voice (published): the requirements pages are legal and precise (must, never, always); that register is for partners using the marks, not for marketing pages.",
"A landing page follows the homepage voice; product names and the Mastercard name follow the published text rules."
],
"rules": [
{
"id": "name-case",
"kind": "prefer",
"term": "Mastercard",
"over": [
"MasterCard",
"Master Card",
"MASTERCARD"
],
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Using the Mastercard name in text)"
},
{
"id": "name-same-font",
"kind": "guidance",
"text": "Set the word Mastercard in the same typeface as the text around it; never swap in the Symbol for the word",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Read-through)"
},
{
"id": "name-english",
"kind": "guidance",
"text": "Never translate the Mastercard name; it appears in English except a few authorized versions",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Translations)"
},
{
"id": "headline-case",
"kind": "headline_case",
"value": "sentence",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"id": "exclaim",
"kind": "exclamations",
"value": "never",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"id": "spelling",
"kind": "spelling",
"value": "en-US",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)",
"note": "US homepage"
},
{
"id": "person",
"kind": "person",
"value": "we_you",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"id": "contactless",
"kind": "guidance",
"text": "Write contactless with a lowercase c as a descriptor; write tap & go in sentence case",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html (Use in contactless payments)"
},
{
"id": "eyebrow",
"kind": "guidance",
"text": "Each section opens with an uppercase eyebrow that names the audience or offer (BUSINESS AND GOVERNMENT SOLUTIONS, CARDS AND BENEFITS)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"id": "short-lead",
"kind": "guidance",
"text": "One lead sentence under a headline, under 20 words",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"id": "max-words",
"kind": "max_sentence_words",
"value": 22,
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
],
"approved": {
"words": [
"priceless",
"possibilities",
"connect",
"empower",
"unlock",
"trust",
"secure",
"together"
],
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"banned": [
"MasterCard",
"Master Card",
"cheap",
"free money"
],
"is_not": [
"salesy",
"jargon-heavy",
"cold"
],
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html"
},
"spec": {
"source": "https://www.mastercard.com/us/en.html",
"how": "computed styles and bounding boxes read with Playwright (Chrome, 1440x900 and 390x844) on 2026-10-31, plus the published Brand Center requirements",
"provenance": "observed",
"motion": [
{
"name": "fill-reveal",
"easing": "ease-in-out",
"duration_ms": 500,
"use": "button and round-button hover fills grow from the center",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "dot",
"easing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
"duration_ms": 400,
"use": "carousel pagination dot grows into the 40px active pill",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"name": "sonic-mnemonic",
"use": "six-note sonic signature that confirms acceptance at checkout; paired with the Checkout Animation; playback rules via a Mastercard representative",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html"
},
{
"name": "haptic",
"use": "a signature vibration sequence that carries the same confirmation with the sound off",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html"
}
],
"icons": {
"grid": "not published",
"stroke": "about 1.5px at 16px (observed footer line icons)",
"sizes": [
{
"name": "inline",
"px": 16,
"use": "nav and button arrows, footer line icons"
},
{
"name": "photo-arrow",
"px": 32,
"use": "arrow in the 80px white circle"
}
],
"style": "simple monoline glyphs from an icon font (mccom-icons): arrows, north-east arrow for external links, chevrons, magnifier, play/pause. Every icon on the page is supplied as an SVG in assets.json (icons/*-ink.svg and *-white.svg): use those files in ![]()
, never Unicode characters or hand-drawn substitutes",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"signature": [
{
"id": "circles",
"name": "Circles and stadiums",
"where": "every photo, panel and control on the homepage",
"spec": "photos are masked to circles (square sources) or stadiums (radius 999px); panels and the hero frame take 80px corners; buttons and labels are pills; buttons on photos are white circles. The shape language comes from the two interlocking circles of the Symbol",
"dont": "use a rectangular photo or a sharp-cornered card"
},
{
"id": "orange-orbit",
"name": "Thin orange orbits",
"where": "services zigzag and the Cards and benefits rows",
"spec": "1px #F37338 circle outlines the size of a photo, offset beside it, and 1px orange stadium outlines around row cards; one line weight only",
"dont": "fill the orbit, thicken it or use the logo red or yellow for it"
},
{
"id": "giant-headline",
"name": "One giant headline per section",
"where": "section heads",
"spec": "120px sentence-case headline over 3-4 lines, weight 500, left aligned, after an orange-dot eyebrow, then one 20px lead line",
"dont": "center it or add a second headline size in the same block"
},
{
"id": "symbol-only",
"name": "The Symbol speaks alone",
"where": "nav and hero",
"spec": "the full-color circles with no word mark, at 54x40 in the nav and centered in the hero resting frame; clear space at least a quarter of one circle's width",
"dont": "recolor, outline or put the word inside the circles"
}
],
"page": {
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)",
"date": "2026-10-31",
"nav": {
"summary": "Desktop: a floating white pill bar (80% white over the hero) holding the Symbol at left, five menu labels centered, a round search button at right. Phone: a solid white bar with 20px bottom corners: hamburger left, Symbol centered, search circle right.",
"ground": "Desktop rgba(255,255,255,0.8) (#FFFFFF at 80%) with box-shadow 0 4px 24px rgba(0,0,0,0.04); phone solid #FFFFFF with the same shadow",
"height": "88px desktop (pill box x 76-1364, y 48-136, so it sits 24px inside the hero frame top edge); 65px phone (y 0-65)",
"border": "none; radius 99px desktop (full pill), 0 0 20px 20px phone",
"logo": {
"variant": "Mastercard Symbol, full color, no word mark (ma_symbol.svg)",
"px": "65x40 image box (the circles inside are about 54x40) desktop; 52x40 phone",
"position": "desktop x 131, y 72 (55px inside the pill's left padding); phone centered at x 169",
"file": "https://www.mastercard.com/content/dam/mccom/shared/header/ma_symbol.svg"
},
"links": {
"count": 5,
"labels": "For you, For business, For the world, For innovators, News and trends",
"size": "16px/16px",
"weight": "500 (stand-in Kumbh Sans 500)",
"color": "#141413",
"alignment": "centered group: label boxes at x 389, 492, 632, 779, 935 (8px padding each, 32px between boxes); text baseline y about 88",
"hover": "a 2px #F37338 underline grows under the label (observed ::before, 30px below the label top)",
"dropdowns": "each opens a mega menu (not shown at rest); no chevrons drawn"
},
"actions": [
"Search: 40px circle, 1px #333333 ring, 14px magnifier glyph centered, x 1268 y 72 (desktop); x 329 y 12 (phone)",
"No sign-in, no CTA button in the bar"
],
"sticky": "position fixed; stays over everything while scrolling",
"phone": {
"shows": "hamburger (32x32, two 2px lines, x 20 y 16), Symbol 52x40 centered, search circle right",
"menu": "hamburger opens the five menus",
"cta": "none"
},
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"hero": {
"summary": "A full-width video frame with 80px corners inset 24px from the canvas edges; its resting frame is a nearly empty warm off-white field with the full-color Symbol centered. A soft black gradient fades up from the bottom 120px holding white pause and mute icons at the bottom left. No headline inside the frame: the headline sits below it (next section).",
"desktop": {
"section": "frame x 24-1416, y 24-807 (1392x783, 16:9), radius 80px, overflow hidden, ground #000000 behind the video",
"container": "the frame itself; the canvas #F3F0EE shows in the 24px margin around it",
"column_split": "none",
"vertical_anchors": "nav pill y 48-136 overlaps the frame top; Symbol in the resting frame centered at about x 720, y 415, about 108px wide; control bar y 687-807 (120px): background linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%), padding 40px 76px; icons y 727-767",
"text_max_width": "no text in the frame",
"media": "hero-desk-rest.jpg (1920x1080 still at 1.4s: the full-color Symbol, about 109px wide at frame scale, centered on its own warm off-white field, close to the #F3F0EE canvas) object-fit cover filling the frame",
"cta_size": "none in the hero",
"controls": "pause and mute are BARE white glyphs (icons/pause-white.svg and icons/sound-off-white.svg), 28px, NO circle, NO background, NO border; 40px invisible hit areas at x 100 and x 148, y 727"
},
"phone": {
"order": "video frame only (headline follows in the next section)",
"alignment": "full bleed",
"sizes": "frame 390x693 at y 0, NO corner radius on phone, top 65px under the white nav bar; control gradient 80px (y 613-693, same 0 / 0.3 / 0.7 black stops), padding 20px, icons 20px in from the left",
"media": "hero-phone-rest.jpg (1080x1920 still, a portrait frame: two children in surf with the white line \"Welcome to the world of\"; that line is part of the image), object-fit cover"
},
"at_rest": "Use the stills, never a drawn recipe: hero-desk-rest.jpg on desktop, hero-phone-rest.jpg on phone (<=600px). The live video plays a 14s loop (Symbol fades in, then people in moments of life with \"Welcome to the world of priceless\"); animation only.",
"media": "Video loop with stills supplied (no video file in the hand-off: use the stills as the resting state); controls are bare white glyphs over the gradient, never inside circles or badges",
"type": "none inside the frame",
"cta": "none",
"proof": "none",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"sections": [
{
"name": "Intro: headline and lead",
"summary": "The page's real headline, set under the video on the bare canvas: a 64px three-line headline at left, a 20px two-line lead at right starting at the column split.",
"ground": "#F3F0EE",
"desktop": {
"band": "y 927-1130, 120px below the hero frame bottom",
"headline": "H1 \"Powering economies and empowering people\" at x 100, y 927, box 608px wide, 64px/64px weight 500, exactly 3 lines: Powering / economies and / empowering people, #141413",
"lead": "x 869, y 943 (16px below the headline top), max-width 439px, 20px/26px, 2 lines, #141413",
"columns": "two: headline column x 100-708, lead column x 869-1308"
},
"phone": {
"band": "y 757-1067 (64px under the video)",
"headline": "48px/52.8px, exactly 4 lines: Powering / economies and / empowering / people (box x 20, width 350, y 757, padding-left 6px so glyphs start at x 26, flush with the lead)",
"lead": "y 989, 20px/26px, 3 lines, x 26"
},
"anatomy": [
"No eyebrow, no button in this block",
"Headline and lead tops nearly align: lead starts 16px lower"
]
},
{
"name": "Story carousel",
"summary": "A centered stadium-shaped photo slide (radius 1000px) with a heavy soft shadow, its neighbours peeking in from both screen edges lower down; two white pill labels overlap the slide's lower middle (a small category pill, a large title pill); round prev/next buttons top right; dots and a pause button below.",
"ground": "#F3F0EE",
"desktop": {
"band": "y 1241-1962, 112px below the intro",
"slide": "active slide 1239x599 at x 101, y 1241, border-radius 1000px (stadium), photo cover, box-shadow 0 70px 110px rgba(0,0,0,0.25)",
"neighbours": "side slides 619x300 (same stadium shape), bottom-aligned lower at y 1571-1871: left one ends at x 84 (only its right 84px show, cut by the viewport), right one starts at x 1355 (85px showing)",
"labels": "category pill \"Story\" white, radius 40px, padding 16px 23px, 16px/16px 500, 88x48 at x 431, y 1616; title pill white radius 40px, padding 4px 40px, 36px/72px weight 500, 434x80 at x 495, y 1680 (centered on the slide, 80px above its bottom); the category pill sits up-left of the title pill, overlapping its top-left corner area",
"arrows": "prev and next 42px circles, fill #F3F0EE, 1px #141413 ring, 16px arrow glyphs, at x 1240 and 1298, y 1249 (overlapping the slide top-right)",
"dots": "y 1939: active dot is a 40x8 pill #F37338, then four 8px #141413 dots, 16px apart (x 623, 679, 703, 727, 751); pause button 42px circle, 1px #141413 ring, transparent fill, at x 799, y 1920. The dots group alone is centered on the page (x 623-759, center 691); the pause sits 40px to its right. Do not center dots plus pause together (that shifts everything about 12px left)"
},
"phone": {
"band": "y 1115-1548",
"slide": "active slide is a 336px circle at x 27, y 1123, shadow 0 24px 48px rgba(0,0,0,0.16)",
"neighbours": "168px circles at y 1330, cut by both screen edges",
"labels": "category pill 14px, padding 9px 16px, at x 7, y 1305 (hangs off the slide left edge); title pill 24px/44.8px, padding 6px 24px, at x 53, y 1345",
"arrows": "42px at x 264 and 322, y 1115",
"dots": "y 1525: active 40x8 pill at x 98, dots at x 154, 178, 202, 226; pause 42px circle at x 274, y 1506 (40px right of the last dot, never closer)"
},
"anatomy": [
"Five slides; the dots follow this order and the first is active at rest: Story \"MrBeast partnership\" (active), Story \"Know your agent\" (right neighbour), Story \"Burden of woof\", Recognition \"Circle of Honor\", Report \"US holiday forecast\" (left neighbour; it loops)",
"Each slide is a link; the shadow makes the stadium float above the canvas"
]
},
{
"name": "Business and government solutions: section head",
"summary": "A giant 120px three-line headline with an uppercase eyebrow above (orange dot plus caps label) and a single lead line below; nothing else.",
"ground": "#F3F0EE",
"desktop": {
"band": "y 2082-2530, 120px below the carousel dots",
"eyebrow": "x 100, y 2082: an 8x8px #F37338 circle (display block, flex: none, so it never squashes) then the label 14px/14px 700 uppercase, letter-spacing +0.04em, #141413, label text starting about 24px right of the dot",
"headline": "\"Together the possibilities are priceless\" 120px/120px weight 500, box at x 100, y 2112 (30px under the eyebrow) with padding-left 6px so the glyphs start at x 106 (aligned with the lead below), box 924px wide, exactly 3 lines: Together the / possibilities are / priceless, padding-bottom 32px",
"lead": "x 106, y 2504, 20px/26px, 1 line, max-width 602px"
},
"phone": {
"band": "y 1612-1878",
"eyebrow": "12px/12px 700 uppercase +0.06em",
"headline": "48px/52.8px, exactly 3 lines with PHONE breaks: Together the / possibilities / are priceless (box x 20, y 1648, padding-left 6px: glyphs at x 26); never reuse the desktop breaks on phone",
"lead": "20px/26px, 2 lines, y 1826"
},
"anatomy": [
"Headlines at 120px are this page's loudest move: set them big, left, ragged right, never centered"
]
},
{
"name": "Services zigzag",
"summary": "Six offer cards in two staggered columns: tall stadium photos (503x817) and circle photos (503x503) alternate so the columns zigzag; each photo has an 80px white circle arrow button inside its bottom-right; under each photo an eyebrow and a 36px title. Thin 1px orange orbit circles sit beside two of the circles, and large thin orange circles are drawn in the ground image behind the lower half.",
"ground": "#F3F0EE, with the thin-circles ground image in its lower half",
"desktop": {
"band": "y 2650-5600 (the container runs to 6601 with the orbit ground, behind the next panel)",
"columns": "left column x 100-603, right column x 837-1340 (503px each, 234px gap); text in each card starts 32px in (x 132 left, x 869 right)",
"order": "right column starts first: Cybersecurity & Fraud Prevention circle y 2650; left Insights & Intelligence stadium y 2770; right Consumer Acquisition & Engagement stadium y 3453; left Consumer and Commercial Payments circle y 3845; right Open Finance circle y 4571; left Money Movement stadium y 4648",
"photo_scale": "NEVER fit the photo to the mask at 100%. Each image is oversized and centered inside its mask: stadium mask 503x817 holds a 603x980 image (offset -50px, -81px); circle mask 503x503 holds a 603x603 image (offset -50px, -50px); object-fit cover. On phone the 287x467 mask holds 344x560 (offset -29px, -46px) and the 287 circle holds 344x344 (offset -29px, -28px). This tight crop is what keeps the subject (a pointing finger, a watch at a terminal) big",
"card": "photo (stadium 503x817 radius 999px, or circle 503x503) then 48px gap, eyebrow (orange dot + SERVICES or SOLUTIONS, 14px 700 caps) then 14px gap, title 36px/43.2px weight 500 #141413, 1-2 lines, max about 410px",
"arrow": "80px #FFFFFF circle with the supplied icons/arrow-right-ink.svg at 32x32 centered, placed 24px from the photo's right and bottom edges",
"orbits": "1px #F37338 circle the same size as the photo (503px) behind it, offset 344px outward: right of the Cybersecurity circle, left of the Payments circle",
"ground_image": "circles-desktop.jpg (1868x1839: two thin orange circles on #F3F0EE) at its natural size, centered horizontally, top at page y 4973, no repeat; the rest of the band is plain #F3F0EE"
},
"phone": {
"band": "y 2038-5368, one column",
"cards": "photos 287px wide: stadium 287x467, circle 287x287. Photo tops (page y): Insights stadium x 20 y 2038; Payments circle x 83 (right-aligned) y 2690; Money Movement stadium x 20 y 3191; Cybersecurity circle x 20 y 3811; Acquisition stadium x 20 y 4311; Open Finance circle x 20 y 4991. Eyebrow (12px) 24px under the photo, title (24px/28.8px) 35px under the eyebrow top; the next photo starts 96px under the previous title (64px after Money Movement)",
"arrow": "56px white circle 16px from the photo's right and bottom",
"orbits": "287px orange circles offset 194px",
"ground_image": "circles-mobile.jpg bottom-centered"
},
"anatomy": [
"Eyebrow labels in order: SERVICES (Cybersecurity), SERVICES (Insights), SERVICES (Acquisition), SOLUTIONS (Payments), SERVICES (Open Finance), SOLUTIONS (Money Movement)",
"Photos are object-fit cover, slightly oversized inside the mask (603x980 inside 503x817) for a parallax drift; at rest centered",
"No body copy and no buttons on these cards: photo, eyebrow, title, arrow"
]
},
{
"name": "Cards and benefits panel",
"summary": "A lighter raised panel with 80px corners (the only card-like surface on the page): a 120px four-line headline with eyebrow, a lead and a black pill button, then two wide 1px-orange outlined stadium rows, each pairing a stadium photo with a short title and outline button, the second row mirrored.",
"ground": "#FCFBFA panel on #F3F0EE",
"desktop": {
"band": "panel x 24-1416, y 5722-7802 (1392x2080), radius 80px, padding 120px 76px, fill #FCFBFA",
"eyebrow": "CARDS AND BENEFITS at x 100, y 5842 (with the 8x8 orange dot)",
"headline": "\"Benefits and services that support your ambitions\" 120px/120px 500, box 924px wide with padding-left 6px (glyphs start at x 106), 4 lines, y 5872",
"lead": "x 106, y 6384, 20px/26px, 2 lines, max-width 602px",
"button": "filled pill \"Learn more\" 137x40 at x 106, y 6484: #141413 fill, #F3F0EE text 16px 500, radius 20px, padding 6px 24px",
"row_1": "outlined stadium 1240x496 at x 100, y 6610: 1px #F37338 border, radius 999px, padding 40px 40px 40px 80px; text block at x 292 (title \"Find a card that's right for you\" 36px/43.2px 2 lines, y 6789, width 345; outline pill \"Learn more\" 157x40 at y 6887, 12px under the title); photo stadium 605x414 at x 694, y 6651 (radius 999px) on the right",
"row_2": "same stadium at y 7186, mirrored: photo 605x414 at x 158, y 7227 on the left; text at x 840: title \"Pay your way\" 1 line y 7359, one 16px/22.4px line y 7414, outline pill y 7469",
"gaps": "lead bottom y 6436 to button top y 6484 = 48px (never 64); button bottom 6524 to row 1 top 6610 = 86px; 80px between rows; 120px panel padding below row 2",
"headline_lines": "exactly 4 lines on both widths: Benefits and / services that / support your / ambitions",
"stadium_shape": "the 605x414 photos and the 1240x496 outlines use border-radius 999px: straight top and bottom edges with half-circle ends. NEVER border-radius 50% (that makes an ellipse)"
},
"phone": {
"band": "panel x 0-390, y 5464-6892, radius 40px, padding 64px 20px",
"headline": "48px/52.8px 4 lines",
"button": "same 137x40 pill",
"rows": "no outlines on phone: photo stadium 350x239 full width (radius 999px), then the title 24px/28.8px and an outline pill 113x40 (padding 6px 12px), text inset 20px (x 40)",
"phone_y": "eyebrow 5528, headline 5564 (4 lines), lead 5795 (4 lines), button 5931, row 1 photo 6025, title 6288 (2 lines: Find a card that's right for / you), button 6353; row 2 photo 6441, title 6704, line 6741, button 6788; panel ends 6892"
},
"anatomy": [
"Outline pill buttons: transparent, 1px #141413 ring, 16px 500 #141413, radius 20px, padding 6px 44px 6px 24px (the right padding holds a hover arrow; empty at rest)",
"The orange outline wraps text and photo together: photo inset 40px from the outline"
]
},
{
"name": "Priceless experiences",
"summary": "Back on the canvas: an eyebrow and a two-line 64px headline at left, a three-line lead and an outline pill with a north-east arrow at right, then a full-width video poster with 40px corners and a dark round play button.",
"ground": "#F3F0EE",
"desktop": {
"band": "y 7922-8902, 120px below the panel",
"eyebrow": "PRICELESS EXPERIENCES at x 100, y 7922",
"headline": "\"Experiences that ignite your passions\" 64px/64px 500, width 608, 2 lines, y 7952",
"lead": "x 869, y 7968, 20px/26px, 3 lines, max-width 439px",
"button": "outline pill \"Explore priceless.com\" + 12px north-east arrow glyph 8px after the label, 231x40 at x 869, y 8078, padding 6px 16px 6px 24px, white-space nowrap: ONE line, never wraps",
"headline_lines": "desktop exactly 2 lines: Experiences that / ignite your passions; phone exactly 3: Experiences / that ignite / your passions",
"media": "video poster 1240x698 at x 100, y 8204, radius 40px (priceless-poster.jpg); play button 80px circle rgba(20,20,19,0.6) centered (x 680, y 8513) with a white 34px play triangle"
},
"phone": {
"band": "y 6956-7597",
"headline": "48px/52.8px, 3 lines",
"lead": "20px/26px, 4 lines",
"button": "231x40 at x 26",
"media": "350x197 radius 20px"
},
"anatomy": [
"The poster image already contains the Symbol and the word priceless; draw nothing over it but the play button"
]
}
],
"footer": {
"summary": "Full-width #141413 footer: a two-line 20px help line, four link columns with caps headings, a hairline, then a bottom row with copyright, legal links, a pill country selector and four social icons.",
"ground": "#141413, padding 48px 100px 148px",
"anatomy": [
"Band y 9021-9670 (649px tall), 119px below the Priceless video",
"Help line \"We're always here when you need us\" 20px/24px 500 #FFFFFF, max-width 268px (2 lines), at y 9069",
"Four columns at x 100, 410, 720 and 1030 (310px pitch); headings y 9149: 14px/14px 700 uppercase +0.04em #D1CDC7",
"NEED HELP? (with 16px white line icons, 28px text indent): Get support (speech bubble), Report a lost or stolen card (card), Find ATM (map pin), FAQs (question circle)",
"COMPANY: About, Careers (with a small north-east arrow), Newsroom, Investor Relations (north-east arrow)",
"LEGAL & PRIVACY: Privacy & Data Responsibility, U.S. Trademarks, Binding Corporate Rules (BCRs), California Privacy Notice, Modern Slavery Statement, Cookie Notice",
"MASTERCARD SITES (all with north-east arrows): Priceless.com, Mastercard Business Intelligence, Mastercard Developers, Mastercard Marketing Center, Center for Inclusive Growth",
"Links 14px/14px 500 #FFFFFF, first at y 9193 then every 33px. NEED HELP links keep their 16px white icons (icons/chat, card, location-pin, question-circle -white.svg) at x 100 with the text indented 28px (text x 128); external links end with icons/arrow-ne-white.svg at 12px, 4px after the label (inline, never a separate column)",
"Hairline 1px #D1CDC7 across x 100-1340 at y 9424",
"Bottom row centered on y 9498, spanning the full 1240px (x 100-1340): left group \"© 1994-2026 Mastercard.\" 14px 450 at x 100, then Privacy · Terms · Manage cookies · Your Privacy Choices (followed by the small blue-and-white privacy-choices toggle icon), 14px 450 white, separated by middle dots, from x 305 to about x 750",
"Country select pill \"United States (English)\" with a chevron: 294x40 with its LEFT edge at exactly x 870 (same x as the lead column), radius 20px, 1px #D1CDC7 ring, #141413 fill, 16px white text",
"Social icons 24px white (icons/linkedin, facebook, x, youtube -white.svg), right-aligned so the last ends at x 1340: x 1196, 1236, 1276, 1316 (LinkedIn, Facebook, X, YouTube). Position select and icons absolutely or with a grid; never let them collapse left next to the legal links"
],
"phone": "band y 7661-8443, padding 48px 20px 148px; help line y 7709 (2 lines); the four headings become collapsed accordion rows at y 7789, 7849, 7909, 7969 (20px/24px 500 white, 24px chevron-down at x 346: Need help?, COMPANY, LEGAL & PRIVACY, MASTERCARD SITES); hairline 1px #D1CDC7 at y 8044; socials 24px at x 20, 60, 100, 140, y 8094; country pill 294x40 at x 20, y 8164; legal links in two rows (Privacy · Terms · Manage cookies · Your Privacy Choices) about y 8230; copyright at y 8278",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"dark_ground": {
"secondary_button": "pill with 1px #D1CDC7 ring, white text (the country select)",
"link": "#FFFFFF 14px 500, no underline",
"muted_text": "#D1CDC7",
"hairline": "#D1CDC7",
"logo_variant": "full-color Symbol (the circles never go monochrome on the site)"
},
"canvas": "The page ground everywhere outside the hero, the panel and the footer is #F3F0EE; every section sits on it with 120px vertical rhythm between blocks. Content column x 100-1340 (1240px) at 1440; 20px side margins on phone."
},
"bands": [
{
"label": "Navigation (fixed)",
"ground": "#FFFFFF",
"content": "Symbol, five menu labels, search circle",
"desktop": "floating 1288x88 pill at y 48, 80% white, radius 99px",
"phone": "390x65 white bar, bottom corners 20px",
"anatomy": [
"Fixed over everything; no CTA in the bar"
]
},
{
"label": "Hero video frame",
"ground": "photo-dark",
"content": "resting still: Symbol on a warm off-white field",
"desktop": "1392x783 frame inset 24px, radius 80px",
"phone": "390x693 full bleed, no radius",
"anatomy": [
"Bottom 120px black gradient with white pause and mute icons at the left"
]
},
{
"label": "Intro headline",
"ground": "#F3F0EE",
"content": "64px H1 left, 20px lead right",
"desktop": "y 927, 3-line headline 608px wide; lead at x 869",
"phone": "stacked, 48px headline 4 lines",
"anatomy": [
"Starts 120px under the hero frame"
]
},
{
"label": "Story carousel",
"ground": "#F3F0EE",
"content": "stadium photo slide with two white label pills, arrows, dots",
"desktop": "1239x599 stadium centered, neighbours peeking at both edges",
"phone": "336px circle slide",
"anatomy": [
"Active dot = 40x8 orange pill"
]
},
{
"label": "Section head (120px)",
"ground": "#F3F0EE",
"content": "eyebrow, 3-line 120px headline, one lead line",
"desktop": "x 100, 924px box",
"phone": "48px, 3 lines",
"anatomy": [
"Orange 8px dot before every eyebrow"
]
},
{
"label": "Services zigzag",
"ground": "#F3F0EE",
"content": "six photo cards: stadiums and circles in two staggered columns",
"desktop": "columns x 100 and x 837, 503px wide",
"phone": "one column, 287px photos",
"anatomy": [
"80px white arrow circle inside each photo, bottom-right",
"Thin 1px orange orbit circles beside two circles and in the ground image"
]
},
{
"label": "Cards and benefits panel",
"ground": "#FCFBFA",
"content": "eyebrow, 4-line 120px headline, lead, black pill, two outlined stadium rows",
"desktop": "1392x2080 panel, radius 80px, padding 120px 76px",
"phone": "full width, radius 40px, rows without outlines",
"anatomy": [
"Rows mirror: photo right, then photo left"
]
},
{
"label": "Priceless experiences",
"ground": "#F3F0EE",
"content": "eyebrow, 2-line 64px headline, lead, outline pill, video poster",
"desktop": "poster 1240x698 radius 40px",
"phone": "poster 350x197 radius 20px",
"anatomy": [
"80px translucent dark play button centered"
]
},
{
"label": "Footer",
"ground": "#141413",
"content": "help line, 4 link columns, hairline, legal row, country pill, socials",
"desktop": "649px tall, columns 310px apart",
"phone": "accordions",
"anatomy": [
"Headings #D1CDC7 caps, links white"
]
}
],
"layout": {
"page_margin": {
"desktop": 100,
"phone": 20
},
"section_padding": {
"desktop": 120,
"phone": 64
},
"container_max": 1240,
"hero_text_max": 608,
"columns": 2,
"columns_phone": 1,
"gutter": 234,
"gutter_phone": 20,
"card_gap": 80,
"nav_height": 88,
"note": "Navigation height is 88px desktop (floating pill) and 65px phone (bar). Measured on the US homepage at 1440 and 390 (2026-10-31). Content x 100-1340 (1240px). Hero frame and panel are inset 24px from the viewport with 80px radius. 120px between every block on desktop (64px panel padding on phone). Two-column splits put the second column at x 869 for text (lead paragraphs) and x 837 for the services photos.",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"type": [
{
"role": "Section headline (Together the possibilities..., Benefits and services...); phone line-height 1.1",
"id": "display-xl",
"face": "display",
"size": {
"desktop": 120,
"phone": 48
},
"line_height": 1,
"tracking_px": 0,
"weight": 500,
"note": "Real face: mccom 500 at -2.4px; the stand-in sets at 0 tracking (calibrated). Phone line-height 1.1",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Hero H1 and Priceless headline; phone line-height 1.1",
"id": "display-l",
"face": "display",
"size": {
"desktop": 64,
"phone": 48
},
"line_height": 1,
"tracking_px": 0,
"weight": 500,
"note": "Real face -1.28px; stand-in 0. Phone 48px/52.8px",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Card and row titles",
"id": "title",
"face": "display",
"size": {
"desktop": 36,
"phone": 24
},
"line_height": 1.2,
"tracking_px": 0,
"weight": 500,
"note": "Real face -0.72px; stand-in 0",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Carousel title pill",
"id": "pill-title",
"face": "display",
"size": {
"desktop": 36,
"phone": 24
},
"line_height": 2,
"tracking_px": 0,
"weight": 500,
"note": "line-height 72px desktop, 44.8px phone; the pill padding is 4px 40px",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Lead paragraph",
"id": "lead",
"face": "body",
"size": {
"desktop": 20,
"phone": 20
},
"line_height": 1.3,
"tracking_px": 0.4,
"weight": 400,
"note": "Real face mccom 450 at normal tracking; stand-in Kumbh 400 at +0.02em (0.4px)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Small copy (row descriptions)",
"id": "body",
"face": "body",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1.4,
"tracking_px": 0.32,
"weight": 400,
"note": "Real 450",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Button label",
"id": "button",
"face": "body",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1,
"tracking_px": 0,
"weight": 500,
"note": "Real face -0.32px, line box 27px inside a 40px pill",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Nav label",
"id": "nav",
"face": "body",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1,
"tracking_px": 0,
"weight": 500,
"note": "Real -0.48px",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Eyebrow (uppercase)",
"id": "eyebrow",
"face": "body",
"size": {
"desktop": 14,
"phone": 12
},
"line_height": 1,
"tracking_px": 0.84,
"weight": 700,
"note": "Real face +0.56px (+0.04em); stand-in +0.06em. Phone 12px",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)",
"tracking_phone_px": 0.72
},
{
"role": "Carousel category pill",
"id": "chip",
"face": "body",
"size": {
"desktop": 16,
"phone": 14
},
"line_height": 1,
"tracking_px": 0,
"weight": 500,
"note": "white pill, padding 16px 23px desktop, 9px 16px phone",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Footer help line and phone accordion heads",
"id": "footer-lead",
"face": "body",
"size": {
"desktop": 20,
"phone": 20
},
"line_height": 1.2,
"tracking_px": 0,
"weight": 500,
"note": "#FFFFFF on #141413",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"role": "Footer links and legal",
"id": "footer-link",
"face": "body",
"size": {
"desktop": 14,
"phone": 14
},
"line_height": 1,
"tracking_px": 0,
"weight": 500,
"note": "legal row and copyright use 450 (stand-in 400)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
],
"components": {
"button_primary": {
"fill": "#141413",
"text": "#F3F0EE",
"radius": 20,
"height": 40,
"padding_x": 24,
"font_size": 16,
"weight": 500,
"face": "body",
"example": "Learn more (137x40)",
"note": "One per section at most; used under the Cards and benefits lead",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)",
"states": {
"hover": {
"prov": "inferred",
"css": {
"background-color": "#F37338",
"color": "#141413",
"transition": "background-color 0.5s ease-in-out"
},
"measured": {
"note": "a ::before fill grows from the center over 0.5s ease-in-out (observed); its hover color was not captured, orange is our reading from the arrow buttons"
}
}
}
},
"button_outline": {
"fill": "none",
"text": "#141413",
"ring": "#141413",
"ring_px": 1,
"radius": 20,
"height": 40,
"padding_x": 24,
"font_size": 16,
"weight": 500,
"face": "body",
"example": "Learn more (157x40, right padding 44px), Explore priceless.com with a north-east arrow (231x40)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"round_arrow_button": {
"fill": "#F3F0EE",
"ring": "#141413",
"ring_px": 1,
"radius": "pill",
"size": "42px circle, 16px arrow glyph",
"use": "carousel prev/next and pause",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)",
"states": {
"hover": {
"prov": "observed",
"measured": {
"fill": "#F37338 circle grows from the center (0.5s ease-in-out)"
}
}
}
},
"photo_arrow": {
"fill": "#FFFFFF",
"text": "#141413",
"radius": "pill",
"size": "80px circle (56px phone), 32px right arrow, inset 24px (16px phone) from the photo bottom-right",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"eyebrow": {
"text": "#141413",
"dot": "8x8px #F37338 circle before the label, 16px gap, vertically centered. Exact CSS: .eyebrow{display:flex;align-items:center;gap:16px} .eyebrow::before{content:\"\";display:block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#F37338}. It must read as a clearly visible dot at 1440 (8px, not 4)",
"style": "14px 700 uppercase +0.04em",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"label_pill": {
"fill": "#FFFFFF",
"text": "#141413",
"radius": 40,
"note": "Category pill 16px (48px tall) and title pill 36px/72px (80px tall) overlapping the carousel photo",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"photo_stadium": {
"radius": 999,
"note": "Tall (503x817), wide (605x414) and carousel (1239x599) photos are stadiums: radius 999px, which gives straight sides with half-circle ends (never 50%, which makes an ellipse). Square photos become circles. Never a rectangle with small corners, except the 40px-corner video poster",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"outline_row": {
"ring": "#F37338",
"ring_px": 1,
"radius": 999,
"note": "1240x496 stadium outline wrapping text and photo, padding 40px",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"carousel_dots": {
"note": "active 40x8 #F37338 pill, others 8px #141413 dots, 16px gaps, then a 42px outlined pause button",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"nav_bar": {
"fill": "#FFFFFF",
"radius": 99,
"note": "80% white, shadow 0 4px 24px rgba(0,0,0,0.04), 1288x88 floating pill",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"country_select": {
"fill": "#141413",
"ring": "#D1CDC7",
"ring_px": 1,
"radius": 20,
"note": "294x40 on the footer",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
},
"breakpoints": {
"phone_max": 600,
"all": [
375,
425,
530,
600,
940,
1240,
1440
],
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
},
"system": {
"fixed": [
"The Symbol in full color, unaltered, with clear space",
"The circle geometry in every mask and control",
"One ink on a warm canvas; orange only as a thin accent",
"One typeface family"
],
"flex": "Photography and the campaign it serves (sport, travel, partnerships) change; the frame around them does not.",
"traits": [
{
"is": "Optimistic",
"not": "naive",
"prov": "inferred",
"source": "https://www.mastercard.com/us/en.html"
},
{
"is": "Human",
"not": "sentimental",
"prov": "inferred",
"source": "https://www.mastercard.com/us/en.html"
},
{
"is": "Assured",
"not": "boastful",
"prov": "inferred",
"source": "https://www.mastercard.com/us/en.html"
}
]
},
"formats": [
{
"format": "Landing page",
"level": 3,
"must": "Build it the way the US homepage is built (kit.spec.page): #F3F0EE canvas, floating white pill nav with the Symbol, an 80px-corner hero frame, 120px sentence-case headlines after orange-dot eyebrows, circle and stadium photos, pill buttons, thin #F37338 outlines, #141413 footer",
"flex": "which sections and photos; how many cards"
},
{
"format": "Payment acceptance (checkout, POS)",
"level": 1,
"must": "full-color Symbol at parity with other marks, minimum 24px, clear space, last four digits beside stored cards",
"flex": "horizontal or vertical Brand Mark"
},
{
"format": "Partner marketing",
"level": 2,
"must": "Mastercard-supplied artwork unaltered; name written Mastercard",
"flex": "layout is the partner's"
},
{
"format": "Sonic and haptic",
"level": 4,
"must": "Checkout Sound and Animation only as confirmation; contact Mastercard to use",
"flex": "none"
}
],
"checks": [
{
"name": "Name",
"text": "Every Mastercard is spelled Mastercard"
},
{
"name": "Symbol",
"text": "full color, clear space 1/4 circle, at least 24px"
},
{
"name": "Shapes",
"text": "no rectangular photos"
}
],
"make_it_yours": {
"note": "Everything above transfers. These are Mastercard's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
"replace": [
"identity",
"purpose",
"positioning",
"messaging.pillars",
"messaging.proof_points",
"messaging.taglines",
"messaging.boilerplate"
],
"reference": {
"purpose": {
"mission": {
"text": "Connecting everyone to priceless possibilities.",
"label": "Purpose line",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html"
},
"story": {
"text": "Born in 1966 as the Interbank Card Association, renamed MasterCard International, simplified by Pentagram in 2016 and, from 2019, signed by the circles alone.",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-history.html"
},
"values": [
{
"name": "The Mastercard Way",
"means": "Create value, grow together, move fast for customers and each other",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html"
}
]
},
"positioning": {
"statement": {
"text": "A global technology company in the payments industry.",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)",
"note": "homepage "
},
"category": {
"text": "Payments network and technology",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"audience": {
"text": "People, businesses and governments (the homepage hero lead names all three)",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
"problem": {
"text": "Shoppers abandon checkout when a payment feels insecure (1 in 5, per the multisensory page)",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html"
},
"promise": {
"text": "Payments that are secure, simple, smart and accessible, so everyone can take part in the digital economy",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html"
},
"differentiators": [
{
"text": "A Symbol famous enough to drop the name (2019)",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-history.html"
},
{
"text": "A multisensory identity: sonic, haptic and visual cues at checkout",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html"
},
{
"text": "Priceless experiences in sports, travel, food and entertainment",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"text": "Reach across 210+ countries and territories",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html"
}
],
"alternatives": [
{
"text": "Other card networks and payment options (the Brand Center requires parity with all other acceptance marks)",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html"
}
]
},
"messaging": {
"taglines": [
{
"text": "Priceless",
"where": "the long-running brand idea; Priceless.com and the homepage",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"text": "Together the possibilities are priceless",
"where": "homepage business section headline",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
},
{
"text": "Powering economies and empowering people",
"where": "homepage hero headline",
"prov": "observed",
"source": "https://www.mastercard.com/us/en.html (2026-10-31)"
}
],
"attributes": [
"trusted",
"connected",
"human-centered"
],
"key_messages": [],
"boilerplate": {
"text": "Mastercard is a global technology company in the payments industry, powering economies and empowering people in more than 210 countries and territories.",
"prov": "inferred",
"why": "joined from the homepage title and the About us page; Mastercard's own press boilerplate was not read",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html"
},
"pillars": [
{
"name": "Power the digital economy",
"claim": "Bold ideas delivered through critical payments technology and services.",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html",
"proof": [
"p-countries",
"p-network"
]
},
{
"name": "Unlock potential",
"claim": "Unlocking the potential of every individual and business.",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html",
"proof": [
"p-countries"
]
},
{
"name": "Force for good",
"claim": "Economic sustainability through people, prosperity and the planet.",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html",
"proof": []
},
{
"name": "Trust in every sense",
"claim": "A multisensory brand (sight, sound, touch) that signals a secure payment.",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html",
"proof": [
"p-sound-pref",
"p-sound-trust",
"p-symbol"
]
}
],
"proof_points": [
{
"id": "p-countries",
"kind": "stat",
"text": "Connects people and organizations in more than 210 countries and territories.",
"prov": "published",
"source": "https://www.mastercard.com/us/en/for-the-world/about-us.html"
},
{
"id": "p-network",
"kind": "fact",
"text": "Global network since 1968, when ICA allied with Banco Nacional in Mexico and Eurocard in Europe.",
"prov": "published",
"source": "https://www.mastercard.com/brandcenter/us/en/brand-history.html"
},
{
"id": "p-sound-pref",
"kind": "stat",
"text": "78% of consumers prefer the Checkout Sound and Animation experience (Mastercard-commissioned study).",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html"
},
{
"id": "p-sound-trust",
"kind": "stat",
"text": "3.4x stronger assurance on safety, trust and acceptance with Checkout Sound and Animation.",
"prov": "published",
"source": "https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html"
},
{
"id": "p-symbol",
"kind": "stat",
"text": "81% of consumers recognized the Symbol without the name in 2016 research.",
"prov": "published",
"source": "https://www.pentagram.com/work/mastercard"
}
],
"claim_boundaries": [
{
"text": "No invented numbers: every stat on a page carries its source footnote, as the multisensory page does"
},
{
"text": "Priceless is an idea, never a promise that something costs nothing"
}
]
}
}
}
}