Mastercard
Identity
Fintech & Crypto
Bundled OpenDesign package for Mastercard, derived from curated DESIGN.md, tokens.css, and components.html fixtures.
Typography
Ag
Ag
Ag
--text-4xl · 64pxThe quick brown fox--text-3xl · 48pxThe quick brown fox--text-2xl · 36pxThe quick brown fox--text-xl · 24pxThe quick brown fox--text-lg · 18pxThe quick brown fox--text-base · 16pxThe quick brown fox--text-sm · 14pxThe quick brown fox--text-xs · 12pxThe quick brown foxPalette
#f3f0eePage background — defines the brand canvas.#fcfbfaCard / lifted container background.#f7e8deTertiary surface tier (kami warm-sand).#141413Primary text color.#262627Secondary text tier (kami dark-warm).#696969Subtext / captions.#9a3a0aTertiary FG / metadata tier (kami stone).#d1cdc7Default border / card edge.#e7e1dcInner row separator that should not visually compete.#cf4500Brand accent. ≤2 visible uses per screen (lint enforced).#ffffffFG when --accent is the bg.#2e7d32Success state.#f79e1bWarning state.#eb001bDanger state.Also named in DESIGN.md
#f37338A lighter carroty orange used for carousel active indicators and decorative orbital arcs. Always acts as an a…#f4f4f4A cool-gray alternative surface used inside a handful of component subregions.Imagery & layout
Radius
20px40px64px9999pxSpacing
--space-1 · 4px--space-2 · 8px--space-3 · 12px--space-4 · 16px--space-5 · 20px--space-6 · 24px--space-8 · 32px--space-12 · 48pxElevation
--elev-raisedLayout
4 equal columns on desktop, collapses to single column accordion on mobile
Layout rules
- Base unit: 8px (confirmed by dembrandt extraction and computed styles)
- Scale: 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 (powers of 8)
- Section vertical padding: ~96–128px between major sections on desktop; ~48–64px on mobile
- Card internal padding: 32–40px on desktop, ~24px on mobile
- Nav top margin: ~24px from viewport top (the pill floats, doesn't touch)
- Max content width: ~1200–1280px centered, with ~48–100px horizontal gutter