# Mastercard: brand book and build spec

Mastercard's brand is a symbol famous enough to work without its name: two interlocking circles in red and yellow. The public Brand Center publishes the logo law (colors, clear space, minimum sizes, misuse, naming in text); the homepage shows how the circles become a whole interface: round photos, pill controls, thin orange orbits and a warm, quiet canvas with giant headlines.

From unfairly.ai/brand-guidelines/mastercard, checked 2026-10-31. Unofficial study; not affiliated with Mastercard.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Everything on the page is a circle or part of one, so the brand is recognizable even where the logo isn't. Based on: measured masks, pills and orbits on the homepage, the 2019 decision to drop the name, Pentagram's note that the circles extend into patterns

## Purpose

Purpose line: Connecting everyone to priceless possibilities. (published; https://www.mastercard.com/us/en/for-the-world/about-us.html)

Story: Born in 1966 as the Interbank Card Association, renamed MasterCard International, simplified by Pentagram in 2016 and, from 2019, signed by the circles alone. (published)

| Value | What it means in the work | Source |
|---|---|---|
| The Mastercard Way | Create value, grow together, move fast for customers and each other | published: https://www.mastercard.com/us/en/for-the-world/about-us.html |

## Fixed and flexible

Never changes:
- 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

The one thing that varies: Photography and the campaign it serves (sport, travel, partnerships) change; the frame around them does not.

## Positioning

- **Statement**: A global technology company in the payments industry. (observed)
- **Category**: Payments network and technology (observed)
- **Audience**: People, businesses and governments (the homepage hero lead names all three) (observed)
- **Problem**: Shoppers abandon checkout when a payment feels insecure (1 in 5, per the multisensory page) (published)
- **Promise**: Payments that are secure, simple, smart and accessible, so everyone can take part in the digital economy (published)
- **Differentiators**: A Symbol famous enough to drop the name (2019); A multisensory identity: sonic, haptic and visual cues at checkout; Priceless experiences in sports, travel, food and entertainment; Reach across 210+ countries and territories
- **Alternatives**: Other card networks and payment options (the Brand Center requires parity with all other acceptance marks)

## Messaging

Boilerplate (our reading): Mastercard is a global technology company in the payments industry, powering economies and empowering people in more than 210 countries and territories.

Taglines:
- Priceless (the long-running brand idea; Priceless.com and the homepage)
- Together the possibilities are priceless (homepage business section headline)
- Powering economies and empowering people (homepage hero headline)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Power the digital economy | Bold ideas delivered through critical payments technology and services. | Connects people and organizations in more than 210 countries and territories.; Global network since 1968, when ICA allied with Banco Nacional in Mexico and Eurocard in Europe. | published |
| Unlock potential | Unlocking the potential of every individual and business. | Connects people and organizations in more than 210 countries and territories. | published |
| Force for good | Economic sustainability through people, prosperity and the planet. |  | published |
| Trust in every sense | A multisensory brand (sight, sound, touch) that signals a secure payment. | 78% of consumers prefer the Checkout Sound and Animation experience (Mastercard-commissioned study).; 3.4x stronger assurance on safety, trust and acceptance with Checkout Sound and Animation.; 81% of consumers recognized the Symbol without the name in 2016 research. | published |

They never claim:
- No invented numbers: every stat on a page carries its source footnote, as the multisensory page does
- Priceless is an idea, never a promise that something costs nothing

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Powering economies and empowering people" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Unlocking potential for people, businesses and governments, all around the world." | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Together the possibilities are priceless" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Innovative solutions for a safer, smarter, digital economy." | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Benefits and services that support your ambitions" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Find a card that's right for you" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Pay your way" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Modern ways to pay, home and away" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |
| "Experiences that ignite your passions" | US homepage | https://www.mastercard.com/us/en.html (2026-10-31) |

## Voice

Tone words: optimistic, human, assured.

Traits:
- Optimistic, but not naive (our reading)
- Human, but not sentimental (our reading)
- Assured, but not boastful (our reading)

- 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 a copy check enforces:
- Say "Mastercard", not "MasterCard" or "Master Card" or "MASTERCARD"
- Set the word Mastercard in the same typeface as the text around it; never swap in the Symbol for the word
- Never translate the Mastercard name; it appears in English except a few authorized versions
- Sentence case headlines
- No exclamation marks
- American spelling
- Write as "we", to "you"
- Write contactless with a lowercase c as a descriptor; write tap & go in sentence case
- Each section opens with an uppercase eyebrow that names the audience or offer (BUSINESS AND GOVERNMENT SOLUTIONS, CARDS AND BENEFITS)
- One lead sentence under a headline, under 20 words
- Sentences of 22 words or fewer

Their words: priceless, possibilities, connect, empower, unlock, trust, secure, together.
Never: MasterCard, Master Card, cheap, free money.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Mastercard Red | #EB001B | logo | Left circle of the Symbol. Logo color only: RGB 235/0/27, CMYK 0/100/98/3, PANTONE 2035 C |
| Mastercard Orange | #FF5F00 | accent_secondary | The overlap where the circles meet. Logo color only: RGB 255/95/0, CMYK 0/75/100/0, PANTONE 165 C |
| Mastercard Yellow | #F79E1B | logo | Right circle of the Symbol. Logo color only: RGB 247/158/27, CMYK 0/44/100/0, PANTONE 1375 C |
| Warm canvas | #F3F0EE | paper | Page ground of the whole homepage; also the fill of round arrow buttons and the text color on the black filled button |
| Ink | #141413 | ink | All text on light grounds, filled button, 1px button rings, inactive carousel dots, footer ground |
| Panel | #FCFBFA | surface | The one raised panel (Cards and benefits): a lighter warm white card with 80px corners on the canvas |
| Signal orange | #F37338 | accent | 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 |
| Footer muted | #D1CDC7 | extra | Footer column headings, footer hairline, country-select ring (on #141413) |
| Icon ring | #333333 | extra | 1px ring of the 40px search button in the nav |
| White | #FFFFFF | extra | Nav bar (80% opacity desktop, solid phone), carousel label pills, 80px arrow circles on photos, all footer text |
| Black | #000000 | extra | Under the hero video only (letterbox ground) and the video control gradient |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | FF Mark | Commercial (FontFont, now Monotype); not open, not ours to ship | Kumbh Sans | "Kumbh Sans", "Helvetica Neue", Arial, sans-serif |
| body | FF Mark | Commercial (FontFont, now Monotype); not open | Kumbh Sans | "Kumbh Sans", "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Section headline (Together the possibilities..., Benefits and services...); phone line-height 1.1 | --text-display-xl-* | display | 120px | 48px | 1 | 0px | 500 |
| Hero H1 and Priceless headline; phone line-height 1.1 | --text-display-l-* | display | 64px | 48px | 1 | 0px | 500 |
| Card and row titles | --text-title-* | display | 36px | 24px | 1.2 | 0px | 500 |
| Carousel title pill | --text-pill-title-* | display | 36px | 24px | 2 | 0px | 500 |
| Lead paragraph | --text-lead-* | body | 20px | 20px | 1.3 | 0.4px | 400 |
| Small copy (row descriptions) | --text-body-* | body | 16px | 16px | 1.4 | 0.32px | 400 |
| Button label | --text-button-* | body | 16px | 16px | 1 | 0px | 500 |
| Nav label | --text-nav-* | body | 16px | 16px | 1 | 0px | 500 |
| Eyebrow (uppercase) | --text-eyebrow-* | body | 14px | 12px | 1 | 0.84px | 700 |
| Carousel category pill | --text-chip-* | body | 16px | 14px | 1 | 0px | 500 |
| Footer help line and phone accordion heads | --text-footer-lead-* | body | 20px | 20px | 1.2 | 0px | 500 |
| Footer links and legal | --text-footer-link-* | body | 14px | 14px | 1 | 0px | 500 |

## Layout

Measured on https://www.mastercard.com/us/en.html: computed styles and bounding boxes read with Playwright (Chrome, 1440x900 and 390x844) on 2026-10-31, plus the published Brand Center requirements.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 100px | 20px |
| Section padding | 120px | 64px |
| Container max width | 1240px | full |
| Hero text width | max 608px | full |
| Grid columns | 2 | 1 |
| Gutter | 234px | 20px |
| Card gap | 80px | 80px |
| Navigation height | 88px | 88px |

Breakpoints from Mastercard's CSS: 375, 425, 530, 600, 940, 1240, 1440px.

Homepage bands, top to bottom (observed):
1. Navigation (fixed)
   - Desktop: floating 1288x88 pill at y 48, 80% white, radius 99px
   - Phone: 390x65 white bar, bottom corners 20px
   - Fixed over everything; no CTA in the bar
2. Hero video frame
   - Desktop: 1392x783 frame inset 24px, radius 80px
   - Phone: 390x693 full bleed, no radius
   - Bottom 120px black gradient with white pause and mute icons at the left
3. Intro headline
   - Desktop: y 927, 3-line headline 608px wide; lead at x 869
   - Phone: stacked, 48px headline 4 lines
   - Starts 120px under the hero frame
4. Story carousel
   - Desktop: 1239x599 stadium centered, neighbours peeking at both edges
   - Phone: 336px circle slide
   - Active dot = 40x8 orange pill
5. Section head (120px)
   - Desktop: x 100, 924px box
   - Phone: 48px, 3 lines
   - Orange 8px dot before every eyebrow
6. Services zigzag
   - Desktop: columns x 100 and x 837, 503px wide
   - Phone: one column, 287px photos
   - 80px white arrow circle inside each photo, bottom-right
   - Thin 1px orange orbit circles beside two circles and in the ground image
7. Cards and benefits panel
   - Desktop: 1392x2080 panel, radius 80px, padding 120px 76px
   - Phone: full width, radius 40px, rows without outlines
   - Rows mirror: photo right, then photo left
8. Priceless experiences
   - Desktop: poster 1240x698 radius 40px
   - Phone: poster 350x197 radius 20px
   - 80px translucent dark play button centered
9. Footer
   - Desktop: 649px tall, columns 310px apart
   - Phone: accordions
   - Headings #D1CDC7 caps, links white

## Page anatomy

How Mastercard's own landing pages are built, part by part (observed; https://www.mastercard.com/us/en.html (2026-10-31), 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- 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

**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

**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

**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

**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

**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

**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

**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

**On dark grounds**
- 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)

## Components

- **button primary** (observed): fill #141413, text #F3F0EE, radius 20, height 40, padding x 24, font size 16, weight 500, face body, example Learn more (137x40). One per section at most; used under the Cards and benefits lead
  - hover (our reading): 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** (observed): 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)
- **round arrow button** (observed): fill #F3F0EE, ring #141413, ring px 1, radius pill, size 42px circle, 16px arrow glyph, use carousel prev/next and pause
  - hover (observed): fill #F37338 circle grows from the center (0.5s ease-in-out)
- **photo arrow** (observed): fill #FFFFFF, text #141413, radius pill, size 80px circle (56px phone), 32px right arrow, inset 24px (16px phone) from the photo bottom-right
- **eyebrow** (observed): 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
- **label pill** (observed): fill #FFFFFF, text #141413, radius 40. Category pill 16px (48px tall) and title pill 36px/72px (80px tall) overlapping the carousel photo
- **photo stadium** (observed): radius 999. 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
- **outline row** (observed): ring #F37338, ring px 1, radius 999. 1240x496 stadium outline wrapping text and photo, padding 40px
- **carousel dots** (observed): . active 40x8 #F37338 pill, others 8px #141413 dots, 16px gaps, then a 42px outlined pause button
- **nav bar** (observed): fill #FFFFFF, radius 99. 80% white, shadow 0 4px 24px rgba(0,0,0,0.04), 1288x88 floating pill
- **country select** (observed): fill #141413, ring #D1CDC7, ring px 1, radius 20. 294x40 on the footer

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| fill-reveal | ease-in-out | 500ms | button and round-button hover fills grow from the center | observed |
| dot | cubic-bezier(0.25, 0.1, 0.25, 1) | 400ms | carousel pagination dot grows into the 40px active pill | observed |
| sonic-mnemonic |  |  | six-note sonic signature that confirms acceptance at checkout; paired with the Checkout Animation; playback rules via a Mastercard representative | published |
| haptic |  |  | a signature vibration sequence that carries the same confirmation with the sound off | published |

## Icon tokens

Grid not published, stroke about 1.5px at 16px (observed footer line icons) (observed).
| Name | Size | Use |
|---|---|---|
| inline | 16px | nav and button arrows, footer line icons |
| photo-arrow | 32px | arrow in the 80px white circle |

## Signature moves

### Circles and stadiums

Where: every photo, panel and control on the homepage.
Do: 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.
Don't: use a rectangular photo or a sharp-cornered card.

### Thin orange orbits

Where: services zigzag and the Cards and benefits rows.
Do: 1px #F37338 circle outlines the size of a photo, offset beside it, and 1px orange stadium outlines around row cards; one line weight only.
Don't: fill the orbit, thicken it or use the logo red or yellow for it.

### One giant headline per section

Where: section heads.
Do: 120px sentence-case headline over 3-4 lines, weight 500, left aligned, after an orange-dot eyebrow, then one 20px lead line.
Don't: center it or add a second headline size in the same block.

### The Symbol speaks alone

Where: nav and hero.
Do: 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.
Don't: recolor, outline or put the word inside the circles.

## Messaging: rules

The homepage speaks in promises to three audiences (people, businesses, governments) and threads the word priceless through every section: "Together the possibilities are priceless", Priceless Experiences, priceless.com. Sections are organised by audience (business and government solutions, cards and benefits, experiences), each with an eyebrow naming it.

Why it works: Priceless has been the brand idea since the 1990s campaign; reusing it as a modifier keeps a 30-year asset doing the selling while the copy stays short.

- One promise headline per section, then one plain lead line
- Name the audience in the eyebrow
- Proof stats always carry a footnoted source

Sources: https://www.mastercard.com/us/en.html, https://www.mastercard.com/us/en/for-the-world/about-us.html, https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html

## Voice: rules

Warm, assured and plain on marketing pages; legal and exact (must, never, always) in the Brand Center. No exclamation marks, no jargon on the homepage, sentence case throughout.

Why it works: A payments brand earns trust by sounding calm: the homepage never hypes, and the partner rules never hedge.

- Mastercard: capital M, lowercase c, one word, same font as surrounding text
- Never translate the name
- contactless lowercase; tap & go in sentence case
- Sentence-case headlines, no exclamation marks
- Don't write MasterCard or Master Card
- Don't use the Symbol as a word inside a headline (read-through)

Sources: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html, https://www.mastercard.com/us/en.html

## Logo: rules

The Mastercard Symbol (two interlocking circles, red and yellow with an orange overlap) is used on its own; the word mark appears only in the Brand Mark versions (horizontal and vertical) that pair the circles with a lowercase "mastercard". Grayscale and solid Brand Marks exist for one-color reproduction only, always with the word.

Why it works: In 2019 Mastercard dropped the name from the mark for many uses because the circles alone are recognized; the Brand Center history page records the move.

|  |  |
|---|---|
| Clear space | 1/4 of one circle's width |
| Minimum size (screen) | 24 px / 48 pt |
| Minimum size (print) | 8.9 mm / 0.35 in |
| Decal minimum | 16.2 mm / 0.63 in |
| Wordmark | FF Mark, lowercase c (Pentagram) |

- Use the Symbol in full color only
- Clear space: at least 1/4 of one circle's width on every side
- Minimum size on screen: 24 pixels / 48 points; print 8.9mm / 0.35in; decal 16.2mm / 0.63in
- Positive artwork on light grounds, reverse on dark
- Grayscale or solid Brand Mark only when full color is impossible, and always with the word mastercard
- At parity with every other acceptance mark: size, frequency, color, location
- Don't recolor the Symbol
- Don't outline the Symbol
- Don't reproduce it at low resolution or below minimum size
- Don't make a grayscale Symbol or decal
- Don't put the word mastercard inside the circles
- Don't place it on busy patterns or on red where contrast fails

Real examples, to look at on Mastercard's own pages (not for reuse):
- Configurations: full-color Symbol, grayscale and solid Brand Marks: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html
- Minimum sizes: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html
- Minimum clear space: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html
- Common mistakes to avoid: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html

Sources: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html, https://www.mastercard.com/brandcenter/us/en/brand-history.html, https://www.pentagram.com/work/mastercard

## Color: rules

Three published logo colors live only in the Symbol. The homepage itself is warm and nearly colorless: a #F3F0EE canvas, one ink #141413 for all text, a lighter #FCFBFA panel, a #141413 footer, and a single UI orange #F37338 for dots, outlines and active states. Color comes from photography.

Why it works: Keeping the interface neutral lets the red-yellow circles stay the only saturated brand color, so the Symbol always reads first.

|  |  |
|---|---|
| Mastercard Red | #EB001B / PANTONE 2035 C |
| Mastercard Orange | #FF5F00 / PANTONE 165 C |
| Mastercard Yellow | #F79E1B / PANTONE 1375 C |
| Dark Gray | CMYK 0/0/0/75 |
| Medium Gray | CMYK 0/0/0/52 |
| Light Gray | CMYK 0/0/0/28 |

- Logo colors: Red #EB001B, Orange #FF5F00, Yellow #F79E1B, only in the Symbol, never altered
- Page ground #F3F0EE, text #141413
- One UI accent: #F37338, in dots, 1px lines and active states
- Dark only at the footer (#141413)
- Grays for one-color marks are CMYK 0/0/0/75, 52 and 28 (no screen hex published)
- Don't use the logo red or yellow as UI color
- Don't set text in orange

Not published: UI palette (canvas, ink, UI orange are observed); color proportions; hex values for the grays.

Real examples, to look at on Mastercard's own pages (not for reuse):
- Color specifications: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html
- Background contrast: allowed and not allowed grounds: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html

Sources: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html, https://www.mastercard.com/us/en.html

## Typography: rules

One family does everything: FF Mark, a geometric sans with circular bowls chosen in the 2016 identity (Pentagram), served on the site as the custom web font "mccom". Weights 450 (body), 500 (headlines, nav, buttons) and 700 (uppercase eyebrows). Headlines are huge (120px); the real face runs -0.02em tracking, which the Kumbh Sans stand-in replaces with 0 (it sets about 5% narrower).

Why it works: Mark's round letters echo the circles; Pentagram notes each letter contains a portion of the circle.

|  |  |
|---|---|
| Real face | FF Mark (commercial) |
| Stand-in | Kumbh Sans (SIL OFL) |
| Headline | 120 / 64 / 36px, weight 500 |
| Body | 20px/26px lead, 16px small |

- One family, three weights
- Sentence case headlines at weight 500, never bold
- Uppercase only for small eyebrows and footer headings
- Stand-in: Kumbh Sans 500 headlines at 0 tracking, 400 body at +0.02em, 700 eyebrows at +0.06em

Not published: a public type scale; sizes are observed.

Sources: https://www.pentagram.com/work/mastercard, https://www.mastercard.com/us/en.html

## Graphic elements: rules

The circle is the system: circular and stadium photo masks, pill buttons and labels, 80px-cornered panels, round icon buttons, thin orange orbit circles, and a large circles line drawing in the ground. Pentagram describes the circles being used in infinite arrangements.

Why it works: Repeating the Symbol's geometry makes any page recognizable without the logo.

- Masks: circle or stadium (radius 999px)
- Lines: 1px only, #F37338
- Panels: 80px corners desktop, 40px phone
- Don't use square photos
- Don't mix line weights

Sources: https://www.mastercard.com/us/en.html, https://www.pentagram.com/work/mastercard

## Iconography: rules

Small monoline glyphs (arrows, north-east external-link arrow, chevrons, magnifier, play, pause) from an icon font, always in ink or white, often inside a circle.

Why it works: Icons stay utilitarian so photos and circles carry the brand.

- Arrows sit in circles: 42px ringed or 80px white
- External links take a north-east arrow

Not published: icon grid, stroke and library.

Sources: https://www.mastercard.com/us/en.html

## Illustration: rules

The homepage uses no illustration: photography, video and the circle line drawings fill every visual slot.

Why it works: Not published; our reading is that real people carry the human-centered positioning.

- Use photography, not illustration, on marketing pages

Not published: an illustration style.

Sources: https://www.mastercard.com/us/en.html

## Photography: rules

Warm, natural-light photos of real people mid-moment (paying, shopping, working, driving), shallow depth of field, skin tones and warm oranges and yellows echoing the Symbol; cropped into circles and stadiums. Campaign stills (Messi, MrBeast) for partnerships.

Why it works: People-first photography carries "empowering people"; warm hues keep photos in key with the logo colors.

- Real people, candid, eye-level
- Warm palette
- Always masked to a circle or stadium

Not published: a photography guideline.

Sources: https://www.mastercard.com/us/en.html

## Motion: rules

The brand moves in three senses: a sonic mnemonic (six notes) and the Checkout Sound and Animation at payment, a haptic vibration sequence, and on the site a video loop that opens on the Symbol, autoplaying carousels and fills that grow from the center.

Why it works: Mastercard publishes that a recognizable sound and feel increase assurance at checkout (3.4x per its study).

- Hover fills grow from the center, 0.5s ease-in-out
- Checkout Sound and Animation only as transaction confirmation, per Mastercard

Sources: https://www.mastercard.com/us/en/personal/experience-mastercard/multisensory-branding.html, https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html, https://www.mastercard.com/us/en.html

## Interface and layout: rules

A 1240px column on a warm canvas, 100px margins, a two-column split at x 837/869, 120px vertical rhythm, one floating pill nav, and full-bleed rounded frames inset 24px.

Why it works: Generous space and few elements let the big headlines and round photos breathe.

- 120px between blocks
- Two columns: headline left, lead right
- Zigzag stagger for card grids

Sources: https://www.mastercard.com/us/en.html

## Rules: rules

The Brand Center's top rules for anyone using the marks.

- Choose the correct configuration for the use
- Always provide sufficient contrast with the background
- Always keep clear space
- Get card artwork from the Card Design Standards
- Never below minimum size
- Write Mastercard with uppercase M, lowercase c, no space
- Show Mastercard at parity with other acceptance marks
- Full-color Symbol and last four digits when showing a stored card digitally
- Don't recolor, outline or rebuild the Symbol
- Don't translate the name

Sources: https://www.mastercard.com/brandcenter/us/en/brand-requirements/mastercard.html

## By format

How loud the system gets by format. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | 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 | which sections and photos; how many cards |
| Payment acceptance (checkout, POS) | 1 | full-color Symbol at parity with other marks, minimum 24px, clear space, last four digits beside stored cards | horizontal or vertical Brand Mark |
| Partner marketing | 2 | Mastercard-supplied artwork unaltered; name written Mastercard | layout is the partner's |
| Sonic and haptic | 4 | Checkout Sound and Animation only as confirmation; contact Mastercard to use | none |

## Checks before anything ships

- **Name**: Every Mastercard is spelled Mastercard
- **Symbol**: full color, clear space 1/4 circle, at least 24px
- **Shapes**: no rectangular photos

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Mastercard's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Typography rules beyond the 2016 Pentagram note: not published (scale observed on the site)
- UI colors (canvas, ink, orange accent): not published, observed
- Grays published in CMYK only; no screen hex
- Icon, illustration and photography guidelines: not published publicly
- Voice guidelines: not published beyond naming rules; voice observed
- Motion durations for the Checkout Animation: not published
- Brand Mark artwork requires agreeing to the Artwork Download Agreement

Logos and reference images belong to Mastercard. Look at them on Mastercard's own pages; don't reuse them.