Section 01

Color Palette

Six role groups built on a warm putty-cream canvas. Ink is warm near-black. Signal Orange is reserved for consent/legal; Light Signal Orange traces decorative orbits. The Mastercard logo red and yellow are brand-mark colors only.

Primary

Mastercard Red
#EB001B
Left circle of the brand mark — logo only, never a UI color.
Mastercard Yellow
#F79E1B
Right circle of the brand mark — logo only, never a UI color.
Ink Black
#141413
Primary CTAs, headline text, footer surface. Slightly warm near-black.

Secondary & Accent

Signal Orange
#CF4500
Consent/legal actions and eyebrow accent dots. Reserved color.
Light Signal Orange
#F37338
Carousel active indicators and decorative orbital arcs.
Clay Brown
#9A3A0A
Deep rust for secondary link-style buttons (e.g., details).

Surface & Background

Canvas Cream
#F3F0EE
Default body background. Warm putty tone — never pure white.
Lifted Cream
#FCFBFA
One step lighter — nested sections laid on canvas.
White
#FFFFFF
Floating nav pill, modal cards, satellite-CTA circles.
Soft Bone
#F4F4F4
Cool-gray alternative surface used inside a few subregions.

Neutrals & Text

Ink Black
#141413
Primary headline and body text color.
Charcoal
#262627
Softer black alternate for some text.
Slate Gray
#696969
Muted secondary text and small-print rows.
Granite
#555555
Deeper gray for inline body accents.
Dust Taupe
#D1CDC7
Disabled / whisper text on cream. Low contrast, sparse use.

Semantic & Accent

Link Blue
#3860BE
Inline links and informational callouts. Dusty, saturated.
Section 02

Typography Scale

Everything set in MarkForMC (Sofia Sans as open-source substitute). Display weight 500 with −2% tracking, body weight 450 for the signature airy tone, and a single uppercase eyebrow at +4% tracking.

H1 / Hero64px · 500 · 64 lh · −1.28 tr
Powering economies and empowering people
H2 / Section36px · 500 · 44 lh · −0.72 tr
Benefits and services that ignite your passions
H3 / Card24px · 500 · 28.8 lh · −0.48 tr
Insights & Intelligence
Eyebrow14px · 700 · 14 lh · +0.56 tr · uppercase
• Services
Body16px · 450 · 22.4 lh
Unlocking potential for people, businesses and governments, all around the world. The half-step 450 weight reads softer than regular 400 without feeling thin.
Nav / Button16px · 500 · 16 lh · −0.48 tr
For business · For the world · For innovators
Footer Link14px · 450 · 20 lh
Privacy · Terms · Manage cookies · Your Privacy Choices
Section 03

Button Variants

Five distinct buttons. The Ink Pill is the workhorse marketing CTA. The orange signal is reserved — it reads as consent, not engagement.

Primary — Ink Pill
bg #141413 · text #F3F0EE · border 1.5px · radius 20px · padding 6px 24px · 16/500 · −0.32 tr
Secondary — Outlined Pill
bg #FFFFFF · text #141413 · border 1.5px ink · radius 20px · padding 6px 24px · 16/450
Consent — Signal Pill
bg #CF4500 · text #FFFFFF · radius 24px · padding 1px 30px · 13/400 · +0.13 tr
Satellite — Circular Micro-CTA
bg #FFFFFF · icon ink · radius 50% · size 56px · attaches to circular portrait
Icon — Round Outline
bg #FFFFFF · border 1px ink · radius 50% · size 48px · carousel / search toggle
Section 04

Card Examples

Three signature card shapes: a 40px-radius stadium, a circular portrait with satellite CTA, and a full-pill editorial row. Shadows are soft with wide spread.

Stadium Hero Frame

Radius 40px · bg #141413 · shadow 0 24 48 / 0.08 · full-bleed media holder
Services

Circular Portrait Card

Full-Pill Editorial Row

Radius 999px · bg #FCFBFA · shadow 0 24 48 / 0.08
Section 05

Form Elements

Inputs default to pill radius (999px) with an ink-tinted translucent border. Focused state firms the border to solid ink; error shifts to Signal Orange.

999px radius · 1px rgba(ink, 0.3) · 16/450
1.5px solid #141413 · outline removed
Please enter a valid 5-digit ZIP code.
20px radius · resize vertical
Section 06

Spacing Scale

Base 8px unit. Marketing sections breathe at 96px and 128px on desktop; compress to 48–64px on mobile.

8px
16px
24px
32px
48px
64px
96px
128px
Section 07

Border Radius Scale

The scale skips the 8–12px middle that most systems live in. Mastercard commits to either small (≤6), medium-large (20–40), or full-pill (99+).

4px
micro-chips
20px
primary & secondary buttons
24px
signal buttons, modal chips
40px
stadium hero frames
50%
portraits · icon buttons
999px
pill nav · selector · chips
Section 08

Elevation & Depth

Four elevation levels, all atmospheric. Shadows have wide spread and low opacity — the card is breathing above the canvas, not clamped onto it.

Level 0 — Flat
no shadow · sits directly on canvas
Level 1 — Float
0 4 24 / 0.04 · floating nav pill
Level 2 — Lift
0 24 48 / 0.08 · hero frames
Level 3 — Halo
0 70 110 / 0.25 · rare feature