Mastercard — Style Reference

> Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (`#F3F0EE`) — not white, not gray, but a color that feels like the paper of a premium annual report. On top of that canvas, everything that matters is shaped like a stadium, a pill, or a perfect circle. The dominant visual gesture is the **oversized radius**: heroes carry 40-point corners, cards go fully pill-shaped, service images are cropped into circular orbits, and buttons either complete the pill or fit snugly at 20 points. There are almost no sharp corners anywhere on the page.

**Theme:** light

**Source website:** [https://www.mastercard.com/](https://www.mastercard.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| color 1 | `#F3F0EE` | `--color-color-1` | color 1 role extracted from the source design |

| warm cream canvas f3f0ee replaces traditional white every surface is tinted never sterile extreme border radius as design language 40px 99px 1000px dominate anything square is a cookie banner third party circular image portraits with attached white satellite ctas and traced orange orbital paths ghost watermark headlines cream on cream text at heading scale layered behind circle portraits black primary ctas with 20px radius in the body the cookie banner orange is kept to consent flows floating pill shaped navigation that docks below the viewport top with rounded shoulders eyebrow labels with a tiny accent dot uppercase bold tracking used as the section category signal dark warm black footer 141413 with four column link layout and large conversational headline 2 color palette roles primary | `#EB001B` | `--color-warm-cream-canvas-f3f0ee-replaces-traditional-white-every-surface-is-tinted-never-sterile-extreme-border-radius-as-design-language-40px-99px-1000px-dominate-anything-square-is-a-cookie-banner-third-party-circular-image-portraits-with-attached-white-satellite-ctas-and-traced-orange-orbital-paths-ghost-watermark-headlines-cream-on-cream-text-at-heading-scale-layered-behind-circle-portraits-black-primary-ctas-with-20px-radius-in-the-body-the-cookie-banner-orange-is-kept-to-consent-flows-floating-pill-shaped-navigation-that-docks-below-the-viewport-top-with-rounded-shoulders-eyebrow-labels-with-a-tiny-accent-dot-uppercase-bold-tracking-used-as-the-section-category-signal-dark-warm-black-footer-141413-with-four-column-link-layout-and-large-conversational-headline-2-color-palette-roles-primary` | warm cream canvas f3f0ee replaces traditional white every surface is tinted never sterile extreme border radius as design language 40px 99px 1000px dominate anything square is a cookie banner third party circular image portraits with attached white satellite ctas and traced orange orbital paths ghost watermark headlines cream on cream text at heading scale layered behind circle portraits black primary ctas with 20px radius in the body the cookie banner orange is kept to consent flows floating pill shaped navigation that docks below the viewport top with rounded shoulders eyebrow labels with a tiny accent dot uppercase bold tracking used as the section category signal dark warm black footer 141413 with four column link layout and large conversational headline 2 color palette roles primary role extracted from the source design |

| mastercard yellow | `#F79E1B` | `--color-mastercard-yellow` | mastercard yellow role extracted from the source design |

| ink black | `#141413` | `--color-ink-black` | ink black role extracted from the source design |

| signal orange | `#CF4500` | `--color-signal-orange` | signal orange role extracted from the source design |

| light signal orange | `#F37338` | `--color-light-signal-orange` | light signal orange role extracted from the source design |

| clay brown | `#9A3A0A` | `--color-clay-brown` | clay brown role extracted from the source design |

| lifted cream | `#FCFBFA` | `--color-lifted-cream` | lifted cream role extracted from the source design |

| white | `#FFFFFF` | `--color-white` | white role extracted from the source design |

| soft bone | `#F4F4F4` | `--color-soft-bone` | soft bone role extracted from the source design |

| charcoal | `#262627` | `--color-charcoal` | charcoal role extracted from the source design |

| slate gray | `#696969` | `--color-slate-gray` | slate gray role extracted from the source design |

| granite | `#555555` | `--color-granite` | granite role extracted from the source design |

| graphite | `#565656` | `--color-graphite` | graphite role extracted from the source design |

| dust taupe | `#D1CDC7` | `--color-dust-taupe` | dust taupe role extracted from the source design |

| link blue | `#3860BE` | `--color-link-blue` | link blue role extracted from the source design |

| color 17 | `#000000` | `--color-color-17` | color 17 role extracted from the source design |

| color 18 | `#2B2B2B` | `--color-color-18` | color 18 role extracted from the source design |

| color 19 | `#E8E2DA` | `--color-color-19` | color 19 role extracted from the source design |

| color 20 | `rgba(255,255,255,0.4)` | `--color-color-20` | color 20 role extracted from the source design |

Tokens — Typography

Inter, system-ui, sans-serif · `--font-primary`

Primary and secondary body CTAs (the signature button radius) · `--font-family-2`

Consent/orange pill buttons, modal inner chips · `--font-family-3`

Hero media frames, large section container corners, H2 pill labels · `--font-family-4`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

|---|---|---|---|---|

| h1-hero | 64px | 64px | 0 | `--text-h1-hero` |

| h2-section | 36px | 44px | 44px | `--text-h2-section` |

| h3-card-title | 24px | 1.5 | 0 | `--text-h3-card-title` |

| h4-subhead | 14px | 1.5 | 0 | `--text-h4-subhead` |

| eyebrow-h5 | 14px | 14px | 0 | `--text-eyebrow-h5` |

| body-paragraph | 16px | 1.5 | 0 | `--text-body-paragraph` |

| nav-link-button-label | 16px | 16px | 0 | `--text-nav-link-button-label` |

| footer-link | 14px | 1.5 | ~20px | `--text-footer-link` |

| footer-column-header | 14px | 1.5 | 12–14px | `--text-footer-column-header` |

| 20px | 20px | 1.5 | 0 | `--text-20px` |

| 24px | 24px | 1.5 | 0 | `--text-24px` |

| 40px | 40px | 1.5 | 0 | `--text-40px` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|---|---|---|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 64 | 64px | `--spacing-64` |

| 80 | 80px | `--spacing-80` |

| 128 | 128px | `--spacing-128` |

Border Radius

| Name | Value | Token |

|---|---|---|

| sm | 0px | `--radius-sm` |

| md | 4px | `--radius-md` |

| lg | 9px | `--radius-lg` |

| xl | 6px | `--radius-xl` |

| pill | 8px | `--radius-pill` |

Layout

Components

buttons

**Role:** buttons component

cards containers

**Role:** cards containers component

inputs forms

**Role:** inputs forms component

navigation

**Role:** navigation component

image treatment

**Role:** image treatment component

decorative orbital lines

**Role:** decorative orbital lines component

footer

**Role:** footer component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.mastercard.com/).