Payments that move with people
Circle media, attached micro CTA and warm editorial spacing.
Diese Mastercard Preview folgt dem korrigierten Muster: warme Putty-Cream Canvas, schwebende Pill-Navigation, extreme Rundungen, Kreisportraits mit Satelliten-CTAs, orbitale Orange-Linien, schwarze CTAs und ein dunkler Premium-Footer.
Mastercard-nahe Komposition: keine generischen Token-Karten zuerst, sondern serviceartige Kreis-Portraits, Satelliten-Buttons und orbitale Bewegungs-Linien.
Circle media, attached micro CTA and warm editorial spacing.
Asymmetric placement keeps the constellation feeling alive.
Thin orange arcs connect services without becoming arrows.
Mastercard nutzt große pillenförmige Medienmodule und weiche Bildflächen, nicht rechteckige SaaS-Cards.
Payment-Netzwerk-Patterns werden als Akzeptanzterminal, Sicherheits-Status, Issuer Badge und Business Solution Cards gerendert.
Warm cream card, large radius, Mastercard mark treatment and black pill CTA.
Logo circles remain identity, while UI actions stay black or outlined.
Secure transactions represented with calm editorial cards.
Risk and trust surfaces avoid bright alert colors unless necessary.
Priceless content uses pill media and circular entry points.
Dark Mastercard surfaces are premium and quiet. The overlap mark anchors recognition, but the interface remains restrained.
Card present • tokenized
Warm canvas, ink CTAs, brand red/yellow only for the mark, orange as signal/orbit color.
#EB001B#F79E1B#141413#CF4500#F37338#F3F0EE#FCFBFA#696969#3860BEMarkForMC-artiger geometrischer Sans-Look: Gewicht 500 für Headlines, 450 für Body, enge negative Laufweite.
64 / 500 / -2%36 / 500 / -2%16 / 450 / 1.414 / 700 / +4%Buttons, forms, radius, elevation and spacing bleiben sichtbar, aber in Mastercard-artiger runder Sprache.
Copy-paste-fähige Variablen für Handoff an einen weiteren Agenten.
:root {
--mastercard-red: #EB001B;
--mastercard-yellow: #F79E1B;
--mastercard-ink: #141413;
--mastercard-signal-orange: #CF4500;
--mastercard-light-orange: #F37338;
--mastercard-canvas: #F3F0EE;
--mastercard-lifted: #FCFBFA;
--mastercard-slate: #696969;
--mastercard-link-blue: #3860BE;
--mastercard-radius-cta: 20px;
--mastercard-radius-hero: 40px;
--mastercard-radius-pill: 1000px;
--mastercard-section: 112px;
}