Design System

Connecting
people to
priceless possibilities.

Clean payment confidence with bold brand clarity. A light-first system built around the iconic red-orange interlocking circles.

16 color tokens 3 gradients 4px grid 4 surface levels 5 shadows
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with bold brand accents. 16 tokens across surfaces, text, interaction, and semantic states. Cardinal Red and Tangerine form the signature gradient.

White
#FFFFFF
Primary background
Snow
#F7F7F7
Secondary sections
Mist
#F0F0F0
Nested containers
Silver
#E0E0E0
Borders, dividers
Ash
#B0B0B0
Placeholders, disabled
Slate
#6B6B6B
Secondary text
Charcoal
#2D2D2D
Primary body text
Onyx
#1A1A1A
Headings, emphasis
Cardinal Red
#EB001B
Primary brand, CTAs
Tangerine
#FF5F00
Secondary brand accent
Midnight Blue
#1A1F71
Trust, links, navigation
Ember
#FF8A00
Warm highlights
Success Green
#00A651
Success states
Warning Amber
#FFB81C
Warning states
Error Crimson
#D4351C
Error states
Info Blue
#0066CC
Informational states

Gradients

brand
Mastercard circles effect, premium CTAs
hero
Marketing hero sections, premium promos
subtle
Section transitions, card backgrounds
Typography

Type Scale

Mastercard Sans as primary typeface (Inter substitute). Clean geometry optimized for dense financial interfaces and payment flows.

Display Priceless 48px / 1.0 / -0.02em
Display-sm Pay with confidence 40px / 1.1 / -0.02px
Heading-lg Secure payments 32px / 1.2 / -0.02px
Heading Transaction details 24px / 1.25 / -0.01px
Heading-sm Account summary 20px / 1.3 / -0.01px
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0.01px
Caption Meta info · Timestamps · Labels 12px / 1.5 / 0.04px

Fonts

Primary Mastercard Sans 400-700 · 12-18px
Display Mastercard Display 700-800 · 40-48px · Heroes only
Mono Mastercard Mono 400-700 · 12-16px · Financial data
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Compact density for information-dense financial interfaces. 12-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
default 8px
lg 12px
cards 16px
pill 9999px

Shadows

Small cards
Medium default
Large dropdowns
XLarge modals
Focus interactive
Elevation

Depth & Surfaces

Shadow-based elevation on a light canvas. 4 distinct surface levels with progressive shadow depth.

Depth Levels

White
Base page background — the canvas
Level 0
Snow
Secondary sections, alternating rows
Level 1
Mist
Nested containers, input backgrounds
Level 2
Filled Card
Elevated cards with border and shadow
Level 3

Surface System

White #FFFFFF
Snow #F7F7F7
Mist #F0F0F0
Filled Card shadow + border
Components

Button & Form Variants

Brand gradient primary, outlined secondary, and ghost variants. Input fields with Cardinal Red focus states for clear interaction feedback.

Primary CTA Button
Main call to action — highest visual weight
.btn-primary
Brand Gradient (red-to-orange) background, White text, 8px radius, red shadow glow. Use for the single most important action.
Secondary Button
Secondary actions, alternative paths
.btn-secondary
Cardinal Red text and border on transparent background. Clear hierarchy below the primary CTA.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Midnight Blue text, transparent background, no border. For navigation and less prominent actions.
Input Field
Form inputs, search bars, data entry
input
White background, Silver border, 8px radius. Focus state uses Cardinal Red border with subtle red glow ring.
Status Badges
Transaction states, account statuses
.badge
Completed Pending Failed Processing
Pill-shaped badges with semantic colors. Use for transaction states, account statuses, and notification indicators.
Filled Card
Content blocks, feature highlights
.card
World Elite
Earn 2% on every purchase. No annual fee for the first year.
White background, 16px radius, 24px padding, Silver border, medium shadow. Clean elevation for content blocks.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#FFFFFF) as primary background
  • Brand Gradient for premium CTAs
  • Cardinal Red (#EB001B) for key brand moments
  • Midnight Blue (#1A1F71) for trust and links
  • 8px radius for buttons, 16px for cards
  • Compact spacing for financial data density
  • WCAG AA contrast on all text
Don't — Avoid
  • Cardinal Red for large background areas
  • Red and orange adjacent without gradient
  • Brand gradient for body text
  • Dark backgrounds for primary content
  • Dense text without 1.5 line-height
  • Mono fonts for non-financial content
  • Altering Mastercard circle proportions