Mastercard Foundation

Overview

Mastercard Foundation's design system embodies **Institutional Modernism with Human Warmth**—a sophisticated aesthetic that balances corporate credibility with genuine human connection. The brand serves visionary organizations and young people across Africa and Indigenous communities in Canada, demanding a visual language that conveys both institutional gravitas and accessible optimism. The UI employs a restrained, high-contrast palette anchored by a bold burnt-orange primary (#ff671b) that signals action and opportunity, paired with a teal secondary (#4fcdb0) that evokes growth and possibility. The typography system uses Mark Offc For MC (the Mastercard corporate typeface) for headlines to reinforce brand authority, while Figtree (a warm, geometric sans-serif) handles body text for approachability. Every interaction—from hover states to focus rings—is deliberate and purposeful, never gratuitous.

The brand voice is direct, solution-oriented, and grounded in evidence. Mastercard Foundation speaks with the confidence of a 20-year-old institution backed by rigorous research, but never talks down to its audience. Vocabulary favors concrete outcomes over jargon: "dignified work" not "employment solutions," "young people" not "youth demographics." The tone is warm but professional, optimistic but realistic. Example sentence in brand voice: "We've learned that sustainable opportunity requires partnership—not charity, but genuine collaboration with organizations that know their communities best."

Colors

The color system reflects a foundation committed to both institutional credibility and human-centered impact. **Primary (#ff671b)** is the signature burnt-orange used exclusively on call-to-action buttons, key links, focus states, and interactive elements that invite engagement. This warm, energetic hue appears frequently but strategically—it commands attention without overwhelming. **Secondary (#4fcdb0)**, a sophisticated teal, supports the primary as an accent for highlights, status indicators, and secondary CTAs; it represents growth and sustainability. **Tertiary (#ffc81f)**, a golden yellow, is reserved for badges, highlights, and supporting visual elements that require tertiary emphasis.

The surface stack uses a refined neutral palette: **surface (#ffffff)** as the primary canvas, *

Typography

The typography system establishes a clear hierarchy that reinforces the brand's dual nature: authoritative yet accessible. **Mark Offc For MC** (600 weight) is reserved for display, headline-lg, headline-md, and title-lg sizes, lending corporate credibility and visual distinction to key messaging. **Figtree** (400 weight for body, 600 weight for labels) handles all body copy, labels, and UI text, providing warmth and legibility at small sizes. Display text (60px, 68px line-height) is used sparingly for hero headlines; headline-lg (40px, 48px line-height) anchors section introductions; body-lg (18px, 28px line-height) is the default for long-form content. Letter-spacing is tightened on headlines (-0.02em) to enhance impact, while body text uses 0em spacing for natural readability. All text

Layout

The layout system uses a 12-column grid with a max-width of 1280px, ensuring content remains scannable and proportional across devices. Component padding scales responsively: 48px top/bottom on mobile, 80px on tablet (1024px+), 112px on desktop (1440px+), and 144px on ultra-wide (1920px+). The gutter (24px) is applied consistently between grid columns and around container edges. White-space is generous—sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. Cards and containers use md spacing (24px) internally for padding, with sm spacing (12px) between nested elements. The container-max-width of 1280px ensures text lines remain under 75 characters for optimal readability. Narrow content pages (articles, reports) use a reduced max-width of 800

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, dark shadows common in enterprise design. **Level 1 (Base)**: No shadow; elements sit flush on the surface. **Level 2 (Cards, Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, diffuse shadow that lifts elements 4px off the surface. **Level 3 (Modals, Dropdowns, Hover States)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger spread shadow suggesting 12px elevation. All shadows use a 0.12–0.15 opacity to remain subtle and avoid the harsh, artificial look of pure black shadows. Hover states transition smoo

Shapes

The shape philosophy is **Architectural Clarity**—rounded corners are used sparingly and purposefully to signal interactivity without sacrificing the clean, institutional aesthetic. **Buttons** use rounded.DEFAULT (0.5rem / 8px) for a subtle, professional appearance that avoids the playfulness of larger radii. **Cards and containers** use rounded.DEFAULT (8px) for consistency with buttons, creating a cohesive component family. **Secondary buttons and input fields** use rounded.lg (1rem / 16px) to provide slightly more visual softness while maintaining sophistication. **Badges and pills** use r

Components

Action Elements **Button-Primary** uses {colors.primary} (#ff671b) background with {colors.on-primary} (white) text, {typography.label-md} (14px, 600 weight), rounded.DEFAULT (8px), and 12px 24px padding for a 48px total height. Hover state transitions to #e55c18 (darker orange) over 200ms. Focus state adds a 3px ring at rgba(255, 103, 27, 0.1). **Button-Secondary** uses rgba(20, 20, 19, 0.4) background with white text, rounded.lg (16px), and a 1px border at rgba(255, 255, 255, 0.3) for use on dark overlays. Hover state darkens to rgba(20, 20, 19, 0.6). **Button-Ghost** has transparent background, {colors.primary} text, and a 1px solid border at {colors.primary}; hover state fills with {colors.primary-container} (#ffe4d4) and text becomes {colors.on-primary-container} (#5b2410).

C

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff671b) exclusively for primary CTAs, links, and focus states—it's the brand's signature accent and should never be diluted or overused.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create subtle depth; avoid heavy shadows that feel dated or overly dramatic.
• Do use Mark Offc For MC for all headlines and titles to reinforce institutional authority; reserve Figtree for body text and UI labels.
• Do maintain generous white-space: use lg spacing (40px) between sections and md spacing (24px) within containers to reduce cognitive load.
• Do ensure all text over images uses a 2px text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) to guarantee legibility without relying on overlays.

**Don't**

• Don't use {colors.primary} (#ff671b) for backgrounds or large surface areas—it's an accent color for interactive elements only.
• Don't apply border-radius larger than 1rem (16px) to buttons or cards; the brand aesthetic demands architectural precision, not playfulness.
• Don't use system fonts or generic sans-serifs; always load Figtree and Mark Offc For MC via @font-face to maintain brand consistency.
• Don't stack multiple shadows or use blur effects on text; the design system prioritizes clarity and legibility over atmospheric effects.
• Don't apply gradients or complex background patterns; the brand uses solid colors and subtle opacity shifts to maintain institutional credibility.