Design System Catalog

Design System Inspiration of Mastercard

A complete, token-level catalog generated from DESIGN.md. Dark variant inverts surfaces while preserving brand accents and the orbital motif.

Section 01

Color Palette

Surfaces derived from Ink Black, deepened for the dark canvas. Brand accents (Signal, Light Signal, Clay) remain identical to the light system. Text inverts to white and translucent-white tiers.

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.
White
#FFFFFF
Inverts to primary CTA surface in dark mode.

Secondary & Accent

Signal Orange
#CF4500
Consent/legal actions — unchanged from light mode.
Light Signal Orange
#F37338
Carousel indicators and decorative orbital arcs.
Clay Brown
#9A3A0A
Deep rust for secondary link-style actions.

Surface & Background

Dark Canvas
#0E0E0D
Deepened ink — default body background in dark mode.
Lifted Surface
#1A1A19
Cards and nested containers — one step above canvas.
Raised Surface
#252523
Input surfaces and secondary elevated blocks.
Deep Well
#050505
Footer surface and framed demo backgrounds.

Neutrals & Text

Primary Text
#FFFFFF
Headlines and primary text on all dark surfaces.
Body Text
rgba(255,255,255,0.85)
Reading body paragraphs — slightly dimmed white.
Muted Text
rgba(255,255,255,0.6)
Secondary labels, captions, footer columns.
Dust Text
rgba(255,255,255,0.4)
Whisper / disabled content on dark canvas.
Soft Border
rgba(255,255,255,0.12)
Translucent borders around cards and inputs.

Semantic & Accent

Link Blue (dark)
#6C8EE0
Lifted from #3860BE so links remain readable on dark canvas.
Section 02

Typography Scale

Identical scale to the light system — MarkForMC (Sofia Sans substitute) with −2% display tracking and 450 body weight. Only the color tokens change.

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

In dark mode the ink pill inverts to a white pill. Signal Orange stays unchanged — it's the same consent color regardless of theme.

Primary — White Pill
bg #FFFFFF · text #141413 · border 1.5px · radius 20px · padding 6px 24px · 16/500 · −0.32 tr
Secondary — Outlined Pill
bg transparent · text #FFFFFF · border 1.5px white · 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 transparent · border 1px white · radius 50% · size 48px · carousel / search
Section 04

Card Examples

Same three signature card shapes on dark surfaces. Borders lift cards a step off canvas where shadows alone would vanish in the dark.

Stadium Hero Frame

Radius 40px · bg lifted · border soft · shadow wide low-opacity
Services

Circular Portrait Card

Full-Pill Editorial Row

Radius 999px · bg #252523 · shadow atmospheric
Section 05

Form Elements

Inputs keep their 999px pill radius. Borders use translucent white at 35% default, firm white on focus, Signal Orange on error.

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

Spacing Scale

Base 8px unit — unchanged from the light system. Section rhythm and gutter values apply identically.

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

Border Radius Scale

The scale is theme-agnostic. Every radius below renders identically in light and dark variants.

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

Shadows on dark surfaces use higher opacity (0.4–0.6) to register. Borders carry most of the separation work — shadows handle the atmospheric float.

Level 0 — Flat
border only · sits flush on canvas
Level 1 — Float
0 4 24 / 0.4 · floating nav pill
Level 2 — Lift
0 24 48 / 0.5 · hero frames
Level 3 — Halo
0 70 110 / 0.6 · rare feature