Design System Inspired by Mastercard（万事达卡设计系统）

1. 视觉主题与氛围

Mastercard 的体验读作一份由柔石与信号橙构成的温暖编辑式杂志。画布是哑光腻子色奶油（#F3F0EE）—— 既不是白也不是灰，而是一种像高端年度报告纸张的颜色。在画布之上，所有重要内容都塑造成体育场形、胶囊形或完美圆形。主导的视觉姿态是超大圆角：hero 带 40 点角，卡片完全胶囊形，服务图片裁成圆形轨道，按钮要么是完整胶囊、要么紧贴 20 点。页面上几乎没有尖角。

第二个姿态是轨道与轨迹。圆形图像蒙版不静止 —— 它们由细的、感觉手绘的橙色弧线连接，跨越整个视口宽度，暗示一个服务星座而非列表。每个圆附有一颗小"卫星" —— 一个带箭头图标的白色微型 CTA —— 像月球一样停靠在其边缘上。这是 Mastercard 当前设计语言中最具识别度的特征：圆即使在页面静止时也感觉在运动。

字体完全用 MarkForMC 渲染 —— Mastercard 的专有几何无衬线。标题设为中字重（500）配紧负字距（-2%），给予它们自信而不喧哗。正文以同一字族在略轻的字重（450）下排版 —— 这是网络上少见的字重，因为读起来比常规 400 柔和又不显瘦。整个系统 —— 暖奶油表面、胶囊形、圆形肖像、描绘的橙色轨道、黑色 CTA —— 同时感觉机构化（一家 60 年的支付网络）和编辑式（一个现代品牌杂志），这正是 Mastercard 想保持的张力。

关键特征：

• 暖奶油画布（#F3F0EE）取代传统白色 —— 每个表面都带染色，从不冷淡
• 极端圆角作为设计语言：40px、99px、1000px 主导；方形元素只出现在 cookie 横幅等第三方
• 圆形图像肖像配附着的白色卫星 CTA 与描绘的橙色轨道路径
• 幽灵"水印"标题（标题尺度的奶-on-奶文字）层叠在圆形肖像后方
• 黑色主 CTA 在正文中使用 20px 圆角 —— cookie 横幅的橙色被保留给同意流程
• 悬浮胶囊形导航，停靠在视口顶部下方，配圆角肩部
• 眉板标签带一个微型点缀圆点 + 大写粗字距 —— 用作章节分类信号
• 深暖黑页脚（#141413）配四列链接布局和大型对话式标题

2. 配色与角色

主色

• Mastercard 红（#EB001B）：Mastercard 标志的左圆 —— 仅用于品牌 logo，从不作 UI 色。
• Mastercard 黄（#F79E1B）：Mastercard 标志的右圆 —— 仅用于品牌 logo，从不作 UI 色。
• 墨黑（#141413）：暖近黑，用于主 CTA、奶油上的标题文字和页脚表面。略暖（蓝色值 13 拉向奶油），所以在暖画布上从不感觉死黑。

次色与点缀

• 信号橙（#CF4500）：用于同意动作和眉板圆点的焦/锈色 CTA 橙。比品牌黄深、比墨色亮，是页面唯一激进的颜色，必须克制使用。
• 浅信号橙（#F37338）：用于轮播激活指示器和装饰轨道弧的较浅胡萝卜色。始终作为注意力提示，从不作为正文色。
• 粘土棕（#9A3A0A）：用于次要链接风格按钮（例如 cookie 详情）的深锈。位于墨色和信号橙之间。

表面与背景

• 画布奶油（#F3F0EE）：页面画布。暖腻子色，默认正文背景。所有编辑章节坐落其上。
• 浮起奶油（#FCFBFA）：比画布亮一档 —— 用于想要感觉像纸叠纸的嵌套"凸起"章节。
• 白（#FFFFFF）：留给悬浮导航胶囊、模态卡、次要按钮填充和附在图像肖像上的小卫星 CTA 圆。
• 柔骨白（#F4F4F4）：用于少数组件子区域内的冷灰替代表面。

中性色与文字

• 墨黑（#141413）：主标题和正文色。
• 炭灰（#262627）：一些文字交替用的略柔和的黑。
• 板岩灰（#696969）：弱化次要文字 —— 眉板标签替代、禁用态、"Privacy Choices" 底行文字。
• 花岗岩（#555555）和石墨（#565656）：行内正文强调和链接替代的较深灰。
• 尘灰褐（#D1CDC7）：用于禁用或"低语"文字（例如占位符般的空状态标签）的极弱奶灰。奶上低对比度；仅用于克制内容。

语义与点缀

• 链接蓝（#3860BE）：用于行内链接和信息提示的深、略灰蓝。足够饱和读作链接而非霓虹。
• Priceless 红 + 黄：完整彩色 Mastercard 标志是品牌红与黄共同出现的唯一地方；它们把身份锁定在页面上，不充当 UI 调色板。

渐变系统

Mastercard 在核心 UI 中不使用程序化渐变。"渐变"的视觉印象来自两个地方：

• 圆形图像肖像中暖橙色的照片主题（卡片、向日葵、饮品）在边缘向奶油画布淡出
• 提升内容上的深卡阴影（rgba(0,0,0,0.08) 0px 24px 48px）在胶囊形媒体下创造柔和光晕

3. 字体规则

字体族

• 主字体：MarkForMC —— Mastercard 的专有几何无衬线。页面上每个标题、正文段、按钮、导航链接和页脚链接。
• 次字体：MarkOffcForMC —— 用于少数语境（法律文字、某些表单）的"官方"切分。
• 降级栈：SofiaSans, Arial, sans-serif —— Sofia Sans 是合理的开源替代；Arial 是最终的 web-safe 降级。

层级

原则

• 450 字重承担重任。多数品牌用 400/500/700；Mastercard 用 450 给正文，制造异常柔和的阅读声调。用 400 替代会扁平化身份。
• 标题的紧负字距（-2%）给展示字其编辑式密度 —— 词锁定在一起而非呼吸。
• 大写字距仅用于眉板尺度（14px / 700 / +4% 字距）。不要在别处用大写；不要嘶喊式章节标题。
• 单字体系统。抵抗添加第二种字体的诱惑。对比来自尺度、字重和字距，而非衬线或展示点缀。
• 行高比随字号下降。H1 是 1:1，H3 是 1.2，正文是 1.4。展示紧，阅读舒适。

字体替代说明

MarkForMC 是专有授权字体。在没有原字体的情况下重建匹配美学：

• Sofia Sans（Google Fonts）是最接近的开源匹配 —— 已在 Mastercard 声明的降级栈中。
• Inter 在字重 450/500/700 下作为通用替代；x 高度略高、字形略松。
• Neue Haas Grotesk 或 Geist 可为商业项目近似几何感。
• 无论用哪种替代，保留标题 -2% 字距和正文 450 字重（在可变字体上用 font-weight: 450，或用 font-weight: 400 并将字距收紧约 -0.5% 来补偿）。

4. 组件样式

按钮

主按钮 —— 墨色胶囊

• 背景：墨黑（#141413）
• 文字：画布奶油（#F3F0EE）—— 非纯白
• 边框：1.5px 实心墨黑（与底同色，创造清晰边缘）
• 圆角：20px
• 内边距：6px 24px
• 字体：MarkForMC 16px / 字重 500 / 字距 -0.32px
• 默认：如上；奶油画布上的实心暖黑胶囊
• 激活/按下：微妙内缩或 2px 偏移（非悬停变体）
• 用途：正文中的所有营销 CTA（"Learn more"、"Explore"、"Discover"）

次按钮 —— 描边胶囊

• 背景：白（#FFFFFF）
• 文字：墨黑（#141413）
• 边框：1.5px 实心墨黑
• 圆角：20px
• 内边距：6px 24px
• 字体：MarkForMC 16px / 字重 450 / 行高 20.8px
• 默认：奶上带清晰墨色描边的白胶囊
• 激活/按下：微妙压缩
• 用途：与主按钮配对的次要动作，或独立工具 CTA

同意 / 信号 —— 橙色胶囊

• 背景：信号橙（#CF4500）
• 文字：白（#FFFFFF）
• 边框：0
• 圆角：24px
• 内边距：1px 30px（垂直极紧、水平宽）
• 字体：MarkForMC 13px / 字重 400 / 字距 0.13px
• 默认：如上；白字的明亮锈色胶囊
• 用途：cookie 同意、隐私偏好和其他法律上不同的确认。不要把橙色用于营销 CTA —— 它读作合规色。

卫星 —— 圆形微型 CTA

• 背景：白（#FFFFFF）
• 图标：墨色箭头（→）约 20px
• 边框：无
• 圆角：50%（完美圆）
• 尺寸：约 50–60px 直径
• 阴影：无或极柔（肖像的阴影承担浮起）
• 默认：停靠在圆形肖像的右下边缘，部分突出于肖像圆外
• 用途：进入服务/解决方案卡的主入口；始终与圆形肖像配对

仅图标圆按钮（轮播、播放/暂停）

• 背景：透明或白
• 图标：10–20px 居中
• 边框：1px 实心墨黑（在奶上时）或无（在媒体上时）
• 圆角：50%
• 尺寸：轮播控件最小 40px 直径；hero 视频播放 80px
• 用途：轮播分页/播放暂停、hero 视频播放、搜索切换

卡片与容器

Hero 媒体框（体育场形）

• 背景：深色视频或满版图像（通常黑 #000000 或 #2B2B2B 视频后）
• 圆角：所有角 40px（在宽视口上形成体育场形）
• 宽：约全视口减去每边 ~48px 沟槽
• 高：视口的约 60–70%
• 阴影：无（直接坐在画布上）
• 角：媒体元素上极端的 40px 圆角是 Mastercard 最具标志性的姿态 —— 不要圆得少

服务 / 解决方案肖像卡

• 形状：完美圆（圆角 50%）或椭圆（圆角 999px / 1000px）
• 直径：桌面 260–340px；手机约 220px
• 图像裁剪：方形源图裁成圆
• 附着元素：白色卫星圆 CTA（见上）停靠右下，约 40% 突出于肖像外
• 下方眉板：点缀圆点 + 大写标签（例如 "• SERVICES"、"• SOLUTIONS"）
• 下方标题：H3（24px / 字重 500 / -2% 字距），最多 1–2 行
• 装饰轨道：细的约 1px 浅信号橙曲线从该卡向外延伸到下一张，暗示连接

胶囊轮播卡

• 圆角：1000px（完整胶囊）或 40px 角（圆角体育场）
• 宽：视口的约 40–60%
• 高：约 380–420px（纵向胶囊方向）
• 内容：满版摄影配小型叠加 chip 标签
• 内嵌 chip：白胶囊（约 999px 圆角）、墨色文字、内边距 8px 20px，用作如 "Story" 的分类标签
• 大型内嵌 CTA：墨色胶囊按钮，超大号（内边距 16px 40px，圆角 40px）

幽灵水印文本块

• 字体：MarkForMC 72–128px / 字重 500 / 紧 -2% 字距
• 颜色：画布奶油略加深（#E8E2DA 或类似 —— 奶-on-奶）
• 位置：层叠在肖像圆后方，从视口边缘出血
• 用途：设置章节主题而不与前景文字竞争

输入与表单

营销页上的最小表单表面。导航头部中的搜索输入是：

• 初始态：48px 圆按钮带放大镜图标
• 展开态：水平输入框，边框 1px 实心墨黑约 50% 透明度，圆角 999px，内边距 12px 24px，白底

国家/语言选择器（页脚）

• 背景：墨黑（同页脚）
• 文字：白
• 边框：1px 实心 rgba(255,255,255,0.4)
• 圆角：999px（完整胶囊）
• 图标：右侧向下雪佛龙

导航

悬浮导航胶囊（桌面）

• 容器：白到半透明白胶囊悬浮在视口顶部下方约 24px 顶边距
• 圆角：999px / 1000px（完整胶囊）
• 内边距：约 16px 40px 内部
• 阴影：极柔（rgba(0, 0, 0, 0.04) 0px 4px 24px 0px）—— 仅够把它从奶油画布上抬起
• 内容：左侧 Mastercard 标志，中部主链接组（"For you"、"For business"、"For the world"、"For innovators"、"News and trends"），右侧搜索图标
• 链接间距：主链接间约 48–56px 间隔
• 链接样式：墨黑、字重 500、16px、无下划线，激活前无胶囊围绕

手机导航

• 同一胶囊形状但折叠为：logo + 汉堡菜单按钮 + 仅搜索图标
• 菜单打开为全屏遮罩，主链接垂直堆叠

图像处理

• 使用宽高比：1:1（所有服务肖像 —— 裁成圆）、约 3:4 或约 4:5（轮播胶囊卡）、16:9 或更宽（hero 视频框）
• 满版 vs 内边距：hero 是视口宽带沟槽；服务肖像总是以周围慷慨留白居中在其列中；页脚图像少见
• 遮罩：激进的圆形遮罩是定义性处理 —— 方形源图裁成相同直径的完美圆。绝不用矩形服务图像。
• 懒加载：标准 loading="lazy" 带柔和模糊渐入从奶油染色占位符，在加载期间保留暖色调

装饰轨道线

标志性母题：浅信号橙（#F37338）中的细（约 1–1.5px）单字重曲线，描绘圆形肖像间的弧。这些线：

• 在没有字面箭头的情况下暗示服务卡之间的连接
• 跨度从约 200px 一直到全视口弧
• 感觉手绘（微妙不规则）而非完美的 CSS 曲线
• 仅出现在带圆形肖像内容的章节中 —— 胶囊章节从不，页脚也从不

页脚

• 背景：墨黑（#141413）
• 文字：白
• 内边距：48px 水平 100px / 底部 148px（底部空间很高）
• 结构：左侧对齐的大型对话式 H2（"We're always here when you need us"），下方是 4 列链接栅格
• 列标题：大写、弱化、字重 700、字距 +4%
• 链接行：白、字重 450、14px；"NEED HELP?" 列的条目以小图标（支持气泡、卡片、地图针、问号）作为前缀
• 外链标记：链接文字后的小右上箭头（↗）
• 底行（1px 白色半透明度分隔线下方）：版权 + 隐私小字 + 国家语言胶囊下拉 + 四个社交图标（LinkedIn、Facebook、X、YouTube）

5. 布局原则

间距系统

• 基础单位：8px（由 dembrandt 提取和计算样式确认）
• 尺度：8 / 16 / 24 / 32 / 48 / 64 / 96 / 128（8 的倍数）
• 章节垂直内边距：桌面主章节间约 96–128px；手机约 48–64px
• 卡片内部内边距：桌面 32–40px，手机约 24px
• 导航顶边距：距视口顶部约 24px（胶囊悬浮，不接触）

网格与容器

• 最大内容宽：约 1200–1280px 居中，约 48–100px 水平沟槽
• 列模式：12 列隐含，但实际布局使用 2 栏非对称（左侧大标题、右侧支撑文字）、1 栏满版（hero、视频）、或交错单肖像放置（服务卡在变化的栅格位置中就座形成"星座"感）
• 页脚栅格：桌面 4 等列，手机折为单列手风琴

留白哲学

Mastercard 把留白视为结构而非缺席。典型服务章节有：

• 一个幽灵标题占据章节顶部约 40%（大部分空奶）
• 单个圆形肖像位于约 60% 处，非对称靠左或靠右
• 约 300–500px 的空白画布在肖像和下一章节之间

这种刻意的空告诉眼睛"慢下来，一次读一件事" —— 与密集的仪表盘 UI 相反。

圆角等级

这个尺度不寻常：多数系统用 4/8/12/16。Mastercard 跳过这些并承诺要么小（≤6）、中大（20–40）、要么完整胶囊（99+）。8–12 的中间地带缺席，这就是为什么 UI 要么感觉"精准和工具"要么"柔和编辑式"而没有中间状态。

6. 层次与浮起

阴影哲学

Mastercard 把阴影用作氛围缓冲，非方向光。Level 2 阴影有 48px 扩散和仅 8% 不透明度 —— 作为暗像素几乎不存在，但创造了"卡片在画布上呼吸"的感觉。系统中几乎没有硬边、紧的阴影。边框线（用于表单输入、页脚分隔）比阴影更受偏好用于功能划分。

装饰性深度

• 轨道弧（浅信号橙，约 1px）：跨章节描绘连接路径
• 幽灵水印标题：奶-on-奶文字给章节一种几乎被压入纸中的质感
• 圆形图像淡出：圆形肖像边缘的暖色摄影溶入画布，暗示柔和氛围深度

7. 推荐与避免

推荐

• 用画布奶油（#F3F0EE）作为默认正文背景 —— 永不用纯白
• 把服务/特征图像遮罩为完美圆，而非矩形或圆角矩形
• 在每个圆形肖像的右下附一个白色卫星 CTA
• 标题用 MarkForMC 500 配 -2% 字距设置
• 正文用字重 450（非 400）
• 主 CTA 保持墨色胶囊（20px 圆角）配奶油文字
• 信号橙仅用于同意、法律或合规动作
• 把导航作为圆角白胶囊悬浮在视口顶部下方，而非在 y=0 齐平
• 从三个表面色调构建页面节奏：画布奶油 → 浮起奶油 → 墨色页脚
• 在服务卡之间用浅信号橙细弧暗示连接

避免

• 不要用纯白作为页面背景 —— 它破坏暖编辑式声调
• 不要在 8–16px 处圆图像框 —— Mastercard 要么用完整胶囊、40px、要么完整圆。中间圆角看起来泛泛
• 不要用信号橙作营销 CTA —— 它读作 cookie 同意橙，稀释法律色信号
• 不要混用字体 —— 没有衬线点缀、没有手写体、没有次要展示字体
• 不要在导航里塞超过六个顶级链接 —— 胶囊意在感觉透气
• 不要硬投影 —— 所有浮起应使用 48px+ 扩散和 ≤10% 不透明度
• 不要在任何大于 14px 眉板标签的尺度用大写
• 不要省略眉板标签前的微型点缀圆点 —— 那是身份
• 不要把圆形肖像放在栅格上 —— 它们的魔力来自非对称放置

8. 响应式行为

断点

触控目标

所有交互元素舒适超过 44×44px。卫星 CTA（圆 + 箭头）约 50–60px。导航胶囊按钮约 48px 高。手机汉堡和搜索是 48×48px。在任何断点下没有链接或按钮低于 40px。

折叠策略

• 导航：完整胶囊 → 紧凑胶囊带汉堡。胶囊形状在所有断点保留 —— 始终圆角、始终悬浮。
• 服务栅格：非对称星座 → 2 栏 → 1 栏堆叠。轨道弧在手机上移除（它们仅在非对称放置下工作）。
• 间距：章节垂直内边距从 128px 压缩到 48px。
• 内容：双列 hero（标题左 / 支撑文字右）变为堆叠（标题在上、支撑文字在下）。
• 页脚：4 列 → 1 列手风琴配每节雪佛龙切换。

图片行为

圆形肖像按比例缩放（在每种尺寸下保持完美圆）。Hero 视频框在每个断点保持其 40px 圆角，但框本身随视口缩小。懒加载是标准配奶染色模糊渐入占位符，在加载期间保留调色板。

9. Agent 提示指南

快速配色参考

• 主 CTA："墨黑（#141413）—— 用于主胶囊按钮和页脚的暖近黑"
• 背景："画布奶油（#F3F0EE）—— 暖腻子正文画布，从不纯白"
• 浮起表面："浮起奶油（#FCFBFA）—— 比画布亮一档用于嵌套章节"
• 标题文字："墨黑（#141413）"
• 正文文字："墨黑（#141413）字重 450"
• 弱化文字："板岩灰（#696969）"
• 信号 / 同意："信号橙（#CF4500）—— 保留给 cookie 同意和法律动作"
• 点缀弧："浅信号橙（#F37338）—— 仅用于装饰轨道线"
• 边框 / 描边："墨色 1.5px 用于胶囊按钮；其他处 1px 低透明度"
• 页脚："墨黑（#141413）配白字"

示例组件提示

• "创建 300px 直径的圆形肖像卡，将方形照片裁成完美圆。在右下附一个 56px 白色卫星按钮带深色箭头图标，使其约 40% 突出于肖像外。肖像下方，添加带浅信号橙圆点的眉板标签和大写 'SERVICES' 文字，MarkForMC 字重 700 14px。眉板下方，用 24px / 字重 500 墨黑色设置标题。"
• "设计主 CTA 按钮：墨黑（#141413）背景、画布奶油（#F3F0EE）文字、20px 圆角、6px 垂直和 24px 水平内边距、MarkForMC 字体 16px 字重 500 配 -2% 字距。"
• "构建悬浮导航胶囊：白底配 rgba(0, 0, 0, 0.04) 0px 4px 24px 0px 阴影、999px 圆角、约 16px 垂直和 40px 水平内部内边距。把它放在视口顶部下方 24px、居中、左侧 Mastercard 标志、5 个主链接居中配 48px 间隔、右侧 48px 圆形搜索按钮。"
• "创建 hero 媒体框：所有角 40px 圆角、全视口宽减去 48px 沟槽、约 60% 视口高、深色背景用于视频内容。直接放在奶油画布上无阴影。"
• "设计页脚：墨黑（#141413）背景、白字、4 列链接栅格配大写弱化列标题 14px 字重 700 +4% 字距。包含栅格上方的大型对话式 H2、栅格下方 1px 白色 30% 不透明水平分隔线、底行含版权、法律小字链接、胶囊形国家选择器和四个社交图标。"

迭代指南

在用此设计系统精炼生成的现有屏幕时：

1. 一次专注一个组件 —— 不要并行重设计多个表面
2. 引用本文档中的具体颜色名和 hex 代码
3. 用自然语言（"暖腻子奶油"、"体育场胶囊"、"带卫星 CTA 的圆形肖像"）配合技术值
4. 与具体度量一起描述所需"感觉"（编辑式、柔和、机构化）
5. 拿不准时，伸手够这三个圆角之一：20px（按钮）、40px（hero/体育场）、999px（胶囊/导航）
6. 默认背景为画布奶油（#F3F0EE），非白 —— 这单一变化将整体氛围推向 Mastercard

已知缺口

• 线上页面使用 MarkForMC —— 专有授权字体。Sofia Sans 是最近的开源替代且已在 Mastercard 自己的降级栈中列出。
• 平板断点具体（768–1023px）由桌面和手机捕获推断；中间布局可能按章节而异。
• 用于圆形肖像后幽灵水印标题的确切"低语"奶色在捕获中读作 #E8E2DA 到 #D1CDC7 之间；精确值按章节而变。
• 第三方同意橙（#CF4500）是 Mastercard 文档化的同意信号，不应与任何营销 CTA 色混淆。
• Mastercard 标志（红 #EB001B + 黄 #F79E1B）是品牌资产，非 UI 调色板条目。