企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

Mastercard 设计系统（design-systems/mastercard）是 Open Design 仓库中沉淀的一套"金融科技与加密"类品牌设计规范，其核心是把一家全球支付网络的机构感与杂志化的编辑温情融合在一起：暖奶油画布、超大圆角、轨道圆形图片、手绘感橙色弧线与幽灵水印大标题共同构成辨识度极高的视觉语言。本文以 design-systems/mastercard/DESIGN.md 为主干，结合同目录下的 tokens.css、design-tokens.json、tailwind-v4.css、components.manifest.json 与 USAGE.md 等实现证据，逐层拆解这套系统的色彩、字体、组件、布局、阴影与响应式规则，并给出可直接喂给编码 Agent 的 Prompt 模板与迭代指南。

1. 视觉主题与氛围：暖石与信号橙构成的"编辑杂志感"

Mastercard 的线上体验读起来像一本"用柔软石材和信号橙印刷的温暖编辑杂志"。它既不像典型的科技金融站那样使用纯白与硬边，也不刻意追求炫技，而是把 60 年支付网络所代表的"机构可信赖感"和现代品牌杂志的"编辑感"捏合在一起。

整个系统的视觉由几个关键手势构成：

• 暖奶油画布（#F3F0EE）：不是白、不是灰，而是像高级年报纸张一样的暖色底。页面上几乎不存在未经过染色的"无菌白"表面；
• 超大圆角作为设计语言：Hero 使用 40px 圆角，卡片直接做成全药丸形（pill），服务图片被裁剪成正圆"轨道"，按钮要么是完整的药丸形、要么贴合 20px 圆角。页面几乎找不到锋利的直角；
• 轨道与轨迹（Orbit and Trajectory）：圆形图片遮罩并非静止摆放，而是由一根根细的、带手绘感的橙色弧线连接，横跨整个视口宽度，暗示"服务星座"而非列表。每个圆的外缘还"停靠"着一个白色微型 CTA（Satellite），像卫星环绕月球；
• 幽灵水印大标题（Ghost Watermark）：以奶油叠奶油的大字号文本层叠在圆形肖像背后，为区块定下主题而不与前景内容争夺注意力；
• 黑色主 CTA 与合规橙的严格分工：正文里所有营销 CTA 都是墨黑药丸（20px 圆角），信号橙只留给 Cookie 同意等合规流程。

从仓库证据看，tokens.css 第 8～10 行把--bg: #f3f0ee、--surface: #fcfbfa、--surface-warm: #f7e8de三个表面层级固化为 token，第 17 行用--accent: #cf4500承载信号橙——这正是"画布 → 抬升面 → 墨黑页脚"三段式节奏的底层实现。

核心特征清单

• 暖奶油画布（#F3F0EE）取代传统纯白，所有表面都有染色、绝不生硬；
• 极端的圆角设计语言：40px、99px、1000px 占据主导；凡是方形的都是第三方 Cookie 横幅；
• 圆形肖像图 + 白色卫星 CTA + 橙色轨道弧线；
• 幽灵"水印"大标题（奶油叠奶油的大字号文本）垫在圆形肖像之后；
• 黑色主 CTA（20px 圆角）；Cookie 横幅的橙色被严格限定在同意流程；
• 漂浮的药丸形导航，圆肩设计，悬停在视口顶部下方；
• Eyebrow 标签 = 小圆点 + 大写加粗字距，作为区块分类信号；
• 深暖黑页脚（#141413），四栏链接 + 大号对话式标题。

2. 色彩体系与角色分工

2.1 主色（Primary）

2.2 次色与强调色（Secondary & Accent）

2.3 表面与背景（Surface & Background）

2.4 中性色与文本（Neutrals & Text）

2.5 语义色与强调（Semantic & Accent）

2.6 渐变系统

Mastercard 的核心 UI 中没有任何程序化渐变。所谓"渐变感"来自两个地方：

• 圆形肖像图：暖橙色的照片主体（卡片、向日葵、饮料）在边缘渐隐融入奶油画布；
• 深卡片阴影：抬高内容上的rgba(0,0,0,0.08) 0px 24px 48px在药丸形媒体下方制造柔和光晕。

在 token 层，这一策略被固化为 tokens.css 中的--elev-ring: 0 0 0 1px var(--border)与--elev-raised: 0 24px 48px rgba(20, 20, 19, 0.10)（第 54～55 行），阴影全部采用低透明度、大扩散半径的形式。

3. 字体排印规则

3.1 字体族

• 主字体：MarkForMC——Mastercard 自有的几何无衬线体，页面上的每个标题、正文、按钮、导航链接与页脚链接都使用它；
• 次字体：MarkOffcForMC——"官方"字重切割，用于少数场景（法律文本、部分表单）；
• 回退栈：SofiaSans, Arial, sans-serif——Sofia Sans 是合理的开源替代，Arial 是最终 Web 安全兜底。

该栈在仓库中已被完整 token 化：tokens.css 第 24～26 行声明了--font-display、--font-body均为"MarkForMC", "Sofia Sans", Arial, sans-serif，--font-mono使用"MarkOffcForMC", ui-monospace, Menlo, monospace。

3.2 层级（Hierarchy）

对应 token 方面，tokens.css 第 27～37 行把字号阶梯--text-xs (12px)到--text-4xl (64px)、行高--leading-body: 1.4、--leading-tight: 1、显示字距--tracking-display: -0.02em全部落地，与上表一一对应。

3.3 原则（Principles）

• 450 字重是承重的：多数品牌只用 400/500/700，Mastercard 用 450 作正文，营造出异常柔和的阅读语调。把它替换成 400 会直接抹平品牌特征；
• 标题上的紧凑负字距（-2%）赋予展示文本编辑密度——字与字"锁"在一起而不是松散呼吸；
• 大写 + 字距只允许出现在 eyebrow 尺度（14px / 700 / +4%）。其他地方禁止大写，不允许"喊叫式"的区块标题；
• 单字体系统：克制引入第二种字体做对比的冲动。对比来自字号、字重与字距，而不是衬线或展示字体；
• 行高比随字号下降：H1 是 1:1、H3 是 1.2、正文是 1.4。展示文本紧、阅读文本松。

3.4 字体替代方案

MarkForMC 是商业授权字体。在没有原字体的前提下重建近似美学：

• Sofia Sans（Google Fonts）是最接近的开源替代——它本就在 Mastercard 声明的回退栈里；
• Inter用 450/500/700 字重可作通用替代，但 x-height 会略高、字形更松；
• Neue Haas Grotesk或Geist可以在商业项目中近似几何感；
• 无论用哪种替代，都要保留标题 -2% 字距和450 正文字重（可变字体直接写font-weight: 450；否则用 400 并收紧约 -0.5% 字距补偿）。

4. 组件规范

4.1 按钮

主按钮 — 墨黑药丸（Primary — Ink Pill）

• 背景：Ink Black（#141413）
• 文字：Canvas Cream（#F3F0EE）——不是纯白
• 边框：1.5px 实线 Ink Black（与背景同色，形成利落边缘）
• 圆角：20px；内边距：6px 24px
• 字体：MarkForMC 16px / 字重 500 / 字距 -0.32px
• 默认态如上；按下态做轻微内缩或 2px 位移（不做 hover 变色）
• 用途：页面正文所有营销 CTA（"Learn more"、"Explore"、"Discover"）

次级按钮 — 描边药丸（Secondary — Outlined Pill）

• 背景：White（#FFFFFF）；文字：Ink Black（#141413）
• 边框：1.5px 实线 Ink Black；圆角：20px；内边距：6px 24px
• 字体：MarkForMC 16px / 字重 450 / 行高 20.8px
• 按下态：轻微压缩
• 用途：与主按钮配对出现的次级动作，或独立工具型 CTA

同意/信号按钮 — 橙色药丸（Consent / Signal — Orange Pill）

• 背景：Signal Orange（#CF4500）；文字：White（#FFFFFF）；边框：0
• 圆角：24px；内边距：1px 30px（垂直极紧、水平极宽）
• 字体：MarkForMC 13px / 字重 400 / 字距 0.13px
• 用途：Cookie 同意、隐私偏好等法律性确认。禁止把这种橙色用于营销 CTA——它会被读成"合规色"

卫星 — 圆形微型 CTA（Satellite — Circular Micro-CTA）

• 背景：White；图标：Ink Black 箭头（→）约 20px；边框：无
• 圆角：50%（正圆）；尺寸：约 50–60px 直径
• 阴影：无或极弱（肖像自身的阴影承担抬升感）
• 默认：停靠在圆形肖像右下缘，部分突出圆外
• 用途：服务/解决方案卡片的主入口，必须与圆形肖像配对使用

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

• 背景：透明或白色；图标：10–20px 居中
• 边框：在奶油上为 1px Ink Black，在媒体上为无；圆角：50%
• 尺寸：轮播控件最小 40px 直径；Hero 视频播放 80px
• 用途：轮播分页/播放暂停、Hero 视频播放、搜索开关

4.2 卡片与容器

Hero 媒体框（体育场形 Stadium）

• 背景：深色视频或全出血图像（视频背后通常为#000000或#2B2B2B）
• 圆角：四角全部 40px（宽视口下形成体育场形）
• 宽度：约满视口减去每侧 48px 沟槽；高度：视口的 60–70%
• 阴影：无（直接坐在画布上）
• 关键约束：媒体元素上极端的 40px 圆角是最具标志性的 Mastercard 手势，不要少于这个值

服务/解决方案圆形肖像卡

• 形状：正圆（50%）或椭圆（999px / 1000px）
• 直径：桌面 260–340px；移动端约 220px
• 图片裁剪：方形源图裁成圆形
• 附属元素：白色卫星圆形 CTA 停靠右下，约 40% 突出圆外
• 下方 Eyebrow：圆点 + 大写标签（如"• SERVICES"、"• SOLUTIONS"）
• 下方标题：H3（24px / 500 / -2% 字距），最多 1–2 行
• 装饰轨道：约 1px 的 Light Signal Orange 细弧线从此卡延伸至下一卡，暗示连接

药丸轮播卡（Pill Carousel Card）

• 圆角：1000px（全药丸）或 40px 圆角（圆角体育场）
• 宽约视口 40–60%，高约 380–420px（竖版药丸方向）
• 内容：全出血摄影 + 小型叠放 chip 标签
• 内部 chip：白色药丸（约 999px 圆角）、Ink Black 文字、内边距 8px 20px，用于"Story"等分类标签
• 内部大号 CTA：Ink Pill 按钮超尺寸版（内边距 16px 40px，圆角 40px）

幽灵水印文本块（Ghost Watermark Text Block）

• 字体：MarkForMC 72–128px / 字重 500 / 紧 -2% 字距
• 颜色：Canvas Cream 略加深（#E8E2DA或相近——奶油叠奶油）
• 位置：垫在圆形肖像背后，溢出视口边缘
• 目的：为区块定主题，不与前景文案竞争

4.3 输入与表单

营销页上的表单表面极简。导航头的搜索输入：

• 初始态：48px 圆形按钮 + 放大镜图标
• 展开态：水平输入框，边框1px solidInk Black（约 50% 不透明度），圆角 999px，内边距 12px 24px，白色背景

页脚国家/语言选择器

• 背景：Ink Black（与页脚同色）；文字：White
• 边框：1px 实线rgba(255,255,255,0.4)；圆角：999px（全药丸）
• 图标：右侧向下 chevron

4.4 导航

漂浮导航药丸（桌面端）

• 容器：白色到半透明白的药丸，悬浮在视口顶部下方约 24px 处
• 圆角：999px / 1000px（全药丸）；内边距：约 16px 40px
• 阴影：极软（rgba(0, 0, 0, 0.04) 0px 4px 24px 0px）——刚好把它从奶油画布上"抬"起来
• 内容：左侧 Mastercard Logo，中间主链接组（"For you"、"For business"、"For the world"、"For innovators"、"News and trends"），右侧搜索图标
• 链接间距：主链接之间约 48–56px
• 链接样式：Ink Black、字重 500、16px、无下划线、激活前无药丸包围

移动端导航

• 同样的药丸形状，但收拢为：Logo + 汉堡菜单按钮 + 搜索图标
• 菜单展开为全屏覆盖层，主链接纵向堆叠

4.5 图像处理

• 宽高比：1:1（所有服务肖像，裁成圆）；约 3:4 或 4:5（药丸轮播卡）；16:9 或更宽（Hero 视频框）
• 全出血 vs 留白：Hero 全视口宽带沟槽；服务肖像永远在列内居中、四周大量留白；页脚极少出现图像
• 遮罩：激进的圆形遮罩是定义性处理——方形源图被裁成等直径正圆。永远不要用矩形服务图
• 懒加载：标准loading="lazy"+ 奶油色占位的柔和 blur-up 过渡，加载期间保持暖色盘

4.6 装饰性轨道线

标志性母题：约 1–1.5px 的细单线条，用 Light Signal Orange（#F37338）在圆形肖像之间描画弧线。这些线：

• 无需文字箭头即可暗示服务之间的连接
• 跨度从约 200px 到满视口弧线
• 有手绘感（轻微不规则），而非完美的 CSS 曲线
• 只出现在含圆形肖像的区块——绝不出现在药丸区块，绝不出现在页脚

4.7 页脚

• 背景：Ink Black（#141413）；文字：White
• 内边距：水平 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. 布局原则

5.1 间距系统

• 基础单位：8px（由 dembrandt 提取与计算样式确认）
• 刻度：8 / 16 / 24 / 32 / 48 / 64 / 96 / 128（8 的幂）
• 区块垂直内边距：桌面主区块之间约 96–128px；移动端约 48–64px
• 卡片内部内边距：桌面 32–40px，移动端约 24px
• 导航顶部边距：距视口顶约 24px（药丸悬浮、不贴边）

对应 token：tokens.css 第 38～45 行给出--space-1 (4px)至--space-12 (48px)，第 46～48 行给出--section-y-desktop: 104px、--section-y-tablet: 72px、--section-y-phone: 52px，其中桌面区块纵向 104px 与 DESIGN.md 的 96–128px 区间一致。

5.2 网格与容器

• 最大内容宽度：约 1200–1280px 居中，水平沟槽约 48–100px。token 层的实现为--container-max: 1180px（tokens.css 第 60 行）
• 列模式：隐含 12 列，但实际布局使用 2 列不对称（左大标题、右说明文字）、1 列全出血（Hero、视频）、或交错单肖像摆放（服务卡处于不同网格位置，制造"星座"感）
• 页脚网格：桌面 4 等宽列，移动端收拢为单列手风琴

5.3 留白哲学

Mastercard 把留白当作结构而非空缺。一个典型服务区块是：

• 幽灵大标题占据区块顶部约 40%（大部分是空的奶油）
• 单个圆形肖像定位在约 60% 高度处，向左或向右不对称
• 肖像与下一区块之间约 300–500px 的空白画布

这种刻意的空告诉眼睛"慢下来，一次只看一件事"——与高密度 Dashboard UI 完全相反。

5.4 圆角刻度

这套刻度很不寻常：多数系统用 4/8/12/16。Mastercard 跳过这些，只承诺**小（≤6）、中大（20–40）、全药丸（99+）**三档。8–12 的中间地带被刻意省略，这正是 UI 要么"精确实用"、要么"柔和编辑"、没有中间态的原因。仓库 token 把它映射为--radius-sm: 20px、--radius-md: 40px、--radius-lg: 64px、--radius-pill: 9999px（tokens.css 第 49～52 行）。

6. 深度与层级

阴影哲学

Mastercard 把阴影当作氛围缓冲垫而非方向性光源。Level 2 阴影有 48px 扩散、仅 8% 不透明度——作为深色像素几乎不存在，却制造出"卡片在画布上方呼吸"的感觉。整个系统几乎没有任何硬边紧阴影。功能分隔优先使用边框线（表单输入、页脚分隔线）。

装饰性深度

• 轨道弧线（Light Signal Orange，约 1px）：跨区块描画连接路径
• 幽灵水印大标题：奶油叠奶油文本给区块一种"纸张压印"的质感
• 圆形图渐隐：圆形肖像边缘的暖调摄影溶解进画布，暗示柔和大气的深度

7. 行为准则（Do's and Don'ts）

Do

• 用 Canvas Cream（#F3F0EE）作默认正文背景——永远不用纯白
• 把服务/功能图遮罩成正圆，而不是矩形或圆角矩形
• 给每个圆形肖像右下角停靠白色卫星 CTA
• 标题用 MarkForMC 字重 500 + -2% 字距
• 正文段落用 450 字重（不是 400）
• 主 CTA 保持墨黑药丸（20px 圆角）+ 奶油文字
• Signal Orange 只用于同意、法律、合规动作
• 导航做成视口顶部下方的圆角白色漂浮药丸，不贴 y=0
• 用三种表面色调构建页面节奏：画布奶油 → 抬升奶油 → 墨黑页脚
• 服务卡之间用细 Light Signal Orange 弧线暗示连接

Don't

• 不要用纯白做页面背景——会破坏暖调编辑语气
• 不要把图像框圆角做成 8–16px——Mastercard 要么全药丸、要么 40px、要么全圆，中间值会显得平庸
• 不要把 Signal Orange 用于营销 CTA——它会读成 Cookie 同意橙，稀释法律色信号
• 不要混用字体——不要衬线点缀、不要手写体、不要第二个展示字体
• 不要给导航塞超过六个顶级链接——药丸要显得透气
• 不要使用硬投影——所有抬升都应 48px+ 扩散且 ≤10% 不透明度
• 不要对大于 14px eyebrow 标签的文本使用大写
• 不要省略 eyebrow 标签前的小圆点——它是身份标识
• 不要把圆形肖像放进网格——它们的魅力来自不对称摆放

8. 响应式行为

断点

触控目标

所有交互元素都舒适地超过 44×44px。卫星 CTA（圆 + 箭头）约 50–60px；导航药丸按钮约 48px 高；移动端汉堡和搜索都是 48×48px。任何断点下，链接或按钮都不低于 40px。

收拢策略

• 导航：全药丸 → 紧凑药丸（带汉堡）。药丸形状在所有断点保留——始终圆角、始终漂浮
• 服务网格：不对称星座 → 2 列 → 1 列堆叠。轨道弧线在移动端移除（它们只在不对称摆放时有效）
• 间距：区块纵向内边距从移动端 128px 压缩到 48px
• 内容：双列 Hero（左标题/右说明）变上下堆叠
• 页脚：4 列 → 1 列手风琴，每区块带 chevron 开关

图像行为

圆形肖像按比例缩放（任何尺寸都保持正圆）。Hero 视频框在所有断点保持 40px 圆角，但整体随视口收缩。懒加载为标准配置，奶油色 blur-up 占位在加载期间保持暖色盘。

9. Agent Prompt 指南

快速颜色速查

• 主 CTA："Ink Black（#141413）——用于主药丸按钮和页脚的暖调近黑"
• 背景："Canvas Cream（#F3F0EE）——暖油灰正文画布，绝不纯白"
• 抬升面："Lifted Cream（#FCFBFA）——比画布亮一档，用于嵌套区块"
• 标题文字："Ink Black（#141413）"
• 正文文字："Ink Black（#141413）字重 450"
• 弱化文字："Slate Gray（#696969）"
• 信号/同意："Signal Orange（#CF4500）——预留给 Cookie 同意与法律动作"
• 点缀弧线："Light Signal Orange（#F37338）——仅作轨道装饰线"
• 边框/描边："Ink Black 1.5px（药丸按钮）；其他处 1px 低透明度"
• 页脚："Ink Black（#141413）+ White 文字"

组件 Prompt 示例

• "创建一个直径 300px 的圆形肖像卡，把方形照片裁成正圆。在右下角停靠一个 56px 白色卫星按钮，带深色箭头图标，使其约 40% 突出圆外。肖像下方加 eyebrow 标签：Light Signal Orange 圆点 + 大写 'SERVICES' 文字，MarkForMC 字重 700、14px。eyebrow 下方设置 24px / 字重 500 的 Ink Black 标题。"
• "设计一个主 CTA 按钮：Ink Black（#141413）背景，Canvas Cream（#F3F0EE）文字，20px 圆角，垂直 6px 水平 24px 内边距，MarkForMC 16px 字重 500、-2% 字距。"
• "构建漂浮导航药丸：白色背景 +rgba(0, 0, 0, 0.04) 0px 4px 24px 0px阴影，999px 圆角，垂直 16px 水平 40px 内边距。定位在视口顶部下方 24px 居中，左侧 Mastercard Logo，中间 5 个主链接间距 48px，右侧 48px 圆形搜索按钮。"
• "创建 Hero 媒体框：四角 40px 圆角，满视口宽减 48px 沟槽，约 60% 视口高，视频内容用深色背景。直接放在奶油画布上，无阴影。"
• "设计页脚：Ink Black（#141413）背景、白色文字、4 栏链接网格，栏目标题大写、弱化、14px 字重 700 +4% 字距。网格上方加大号对话式 H2，下方 1px 白色 30% 不透明度分隔线，底行含版权、法律小字链接、药丸国家选择器和四个社交图标。"

迭代指南

用这套设计系统精修既有页面时：

1. 一次只聚焦一个组件——不要并行重做多个表面
2. 同时引用本文档中的颜色名称和十六进制值
3. 用自然语言（"warm putty cream"、"stadium pill"、"circular portrait with satellite CTA"）搭配技术数值
4. 在描述具体测量值的同时描述期望的"感觉"（编辑、柔和、机构）
5. 拿不准时就选三个圆角之一：20px（按钮）、40px（Hero/体育场）、999px（药丸/导航）
6. 默认背景设为 Canvas Cream（#F3F0EE）而非白色——这一个改动就能把整体情绪拉向 Mastercard

已知缺口

• 线上页面使用商业授权的 MarkForMC；Sofia Sans 是最接近的开源替代，且已列在 Mastercard 自己的回退栈中
• 平板断点（768–1023px）细节是从桌面与移动端截图推断的；中间布局可能因区块而异
• 圆形肖像后幽灵水印标题使用的精确"低语"奶油色在截图中介于#E8E2DA与#D1CDC7之间，具体值随区块变化
• 第三方同意橙（#CF4500）是 Mastercard 声明的同意信号，不应与任何营销 CTA 颜色混淆
• Mastercard Logo 标志（红#EB001B+ 黄#F79E1B）是品牌资产，不是 UI 调色板条目

10. 仓库中的实现证据与使用方式

这套规范在仓库中不是孤立文档，而是一个完整、可校验、可消费的 Design System 2.0 包（见 manifest.json，schemaVersion: od-design-system-project/v1）。包内文件分工明确：

• DESIGN.md：视觉意图、约束与反模式，即本文主体；
• USAGE.md：包的消费契约，约定阅读顺序：先读 USAGE.md 理解契约 → 读 DESIGN.md 理解视觉意图 → 把tokens.css粘贴进首个 artifact 的<style>块再写组件 CSS → 用components.manifest.json做组件清单速查 → 必要时打开preview/页面做视觉核对；
• tokens.css：:root级 CSS 变量，是唯一的事实源（source of truth），共 56 个 token；
• design-tokens.json：token 契约报告，summary显示totalTokens: 56、sourceBackedTokens: 56、score: 100、grade: "excellent"，每个 token 都回链到tokens.css的具体声明行（如tokens.css:8对应--bg），层分布为 A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个；
• tailwind-v4.css：从tokens.css派生的 Tailwind CSS v4@theme映射，把--color-bg、--radius-pill、--shadow-raised等语义名桥接到品牌 token；
• components.manifest.json：组件清单，48 个选择器、26 个类，按buttons / inputs / cards / badges / links / typography / layout分组，并列出每个组件组引用的 token；
• components.html：带确切选择器与状态的参考组件 fixture；
• preview/colors.html、preview/typography.html、preview/spacing.html：颜色、字体、间距的可视化核对页；
• source/：审计证据目录（evidence.md 声明本包基于 OpenDesign curated bundled fixture，不声称对上游品牌仓库做了新抓取）。

USAGE.md 还给出了两条对 Agent 的直接约束：保持 schema token 名称不变以保证跨品牌切换可靠；避免在:roottoken 块之外使用裸十六进制值、避免脱离tokens.css独立重定义 Tailwind 或设计 token 值。这解释了为什么仓库同时提供tokens.css、design-tokens.json与tailwind-v4.css三份文件——它们共享同一事实源，分别服务原生 CSS、token 契约校验与 Tailwind v4 工具类场景。

结语

Mastercard 设计系统的价值在于它提供了一个极端的反面教材式思路：克制色彩（全页只有一个信号橙）、克制圆角（只取三档）、克制字体（单字体 + 450 半步字重）、克制布局（非对称 + 大量留白），最终反而获得了极高的辨识度。在 Open Design 仓库中，这套规范已经从"视觉描述"完整落地为"可执行资产"——DESIGN.md 负责传达意图，tokens.css 提供机器可读的事实源，design-tokens.json 保证契约可校验，而 Agent Prompt 指南则让编码 Agent 无需人工翻译即可把这份美学翻译成可运行的前端代码。对于任何希望复刻"温暖编辑 + 金融可信赖"气质的金融科技产品，这套系统都是一份可以照抄结构的参考实现。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成