awesome-design-md案例Mastercard轨道胶囊造型与编辑级温暖画布拆解【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md本文拆解 awesome-design-md 仓库里的 Mastercard 案例一份把「轨道胶囊造型」与「编辑级温暖画布」完整写进 DESIGN.md 的设计系统文档。它能让 AI 编程助手照着生成风格高度一致的 UI无需 Figma、无需 JSON 配置——这正是该仓库 70 份品牌设计文档的核心价值。案例文件在哪里Mastercard 案例包含两个文件设计系统正文design-md/mastercard/DESIGN.md案例说明design-md/mastercard/README.md每个案例的 DESIGN.md 都遵循统一结构共 9 个章节视觉主题与氛围、色彩调色板与角色、字体排印规则、组件样式、布局原则、深度与高程、Dos and Donts、响应式行为、以及给 AI 的提示词指南。这种「人机都能读」的写法是它能直接驱动 UI 生成的关键。一、轨道胶囊造型Mastercard 的形状语言超大圆角40px 体育场、999px 胶囊与完美圆形 Mastercard 最强烈的视觉手势是「几乎没有任何直角」。它的圆角刻度非常反常规圆角用途3–6px微小的装饰元素20px正文里的主/次按钮签名按钮圆角40px英雄媒体框宽屏下形成体育场形状50%圆形人物肖像、卫星 CTA、图标按钮999px完整胶囊——导航、轮播卡、页脚国家选择器注意它刻意跳过 8–12px 的中间地带。系统只有精确功能感≤6px和柔软编辑感20px两档中间值会被视为平庸。轨道弧线 卫星 CTA让静态页面转起来这是 Mastercard 当前设计语言中最独特的部分圆形肖像服务图片全部裁成完美圆形直径 260–340px绝不使用矩形服务图卫星 CTA每个圆形肖像右下角停靠一个 50–60px 的白色圆钮带黑色箭头图标像月亮一样突出肖像外约 40%轨道弧线约 1px 的浅橙#F37338弧线横跨视口把各个圆连成星座暗示服务间的连接。页面静止但圆像在公转——这就是轨道胶囊造型的由来。二、编辑级温暖画布色彩与排印奶咖画布#F3F0EE为什么坚决不用纯白整页底色是一块熟石灰奶油色——不是白也不是灰而是高级年报纸张的质感。它构成了三档表面节奏Canvas Cream#F3F0EE默认正文画布Lifted Cream#FCFBFA嵌套浮起区块像纸叠在纸上Ink Black#141413温暖的近黑页脚带大字号对话式标题品牌红#EB001B与品牌黄#F79E1B只出现在 Logo 上永不进入 UI 调色板——身份锁定在品牌标记而非界面颜色。MarkForMC 字体与半档字重 450全站只用一款字体MarkForMC无衬线、无第二字体对比对比全部来自字号、字重和字距大标题 64px / 500 字重 /字距收紧 -2%词与词咬合出编辑级密度正文使用少见的450 字重——比 400 更软、比 500 更稳这是该品牌的承重细节换成 400 会立刻失去身份感开源替代首选Sofia Sans官方回退栈里就有它Inter 450/500/700 也可胜任。 一个容易忽略的信号橙#CF4500它只用于 Cookie 同意、隐私合规等法律动作绝不用于营销 CTA——营销按钮永远是墨黑胶囊 奶油色文字。三、三步把这套设计交给 AI把 design-md/mastercard/DESIGN.md 复制到你的项目根目录对 AI 编程助手说用 DESIGN.md 里的设计系统构建页面迭代时参考文档第 9 章「Agent Prompt Guide」一次只改一个组件引用色名色值不确定时从 20px / 40px / 999px 三档圆角里选。仓库根目录的 README.md 列出了全部 70 案例AI 平台、开发者工具、金融科技、汽车、复古网页等每个品牌目录结构完全一致方便横向对比。四、落地速查Do / Dont 清单✅ Do背景一律用 Canvas Cream永不纯白服务图裁成完美圆形并挂白色卫星 CTA标题 500 字重 -2% 字距正文 450 字重导航做成悬浮胶囊距视口顶部约 24px不与顶边贴齐❌ Dont不用 8–16px 的中间态圆角——只会显得平庸不混排第二字体无衬线点缀、无手写体不用信号橙做营销按钮——它是合规橙不把圆形肖像摆上规整网格——不对称星座式排布才是灵魂阴影只用 48px 以上弥散、透明度 ≤10% 的呼吸感光晕延伸阅读项目说明与案例总索引README.md贡献规范改进色值、补齐 tokenCONTRIBUTING.md许可证LICENSE想对比其他温暖系案例星巴克四层大地绿 奶油画布design-md/starbucks/DESIGN.md、Notion温暖极简 衬线标题design-md/notion/DESIGN.mdMastercard 案例展示了一个重要思路把设计判断写成 Markdown——圆角为什么是 40px 而不是 12px、橙色为什么只做合规色这些为什么全部写进文档AI 生成的 UI 才不会止步于表面相似而是还原品牌的设计逻辑。【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
