文档【免费下载链接】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点击查看免费下载本篇文章围绕 design-md/stripe/DESIGN.md 展开系统讲解如何把 Stripe 的视觉语言——深海军蓝墨水色、电光靛蓝主色、占据营销页面上三分之一的渐变网格gradient mesh、Sohne 300 细字重显示层与表格数字tabular figure排版——沉淀为一份结构化设计令牌文档并让编码 Agent 据此生成视觉一致的界面。读完你将掌握这份 DESIGN.md 中全部色彩、字体、间距、圆角与组件令牌的定义方式理解其设计原则与响应式策略并能在自己的项目中直接复用这套金融基础设施品牌的设计系统。一、什么是 DESIGN.md从文档到 AI 可读的设计系统awesome-design-md仓库的核心是一批从真实品牌网站中提取的DESIGN.md文件。它源于 Google Stitch 提出的 DESIGN.md 概念一份纯文本的设计系统文档AI 编码代理读取后即可生成与品牌保持一致的 UI。它只是一个 Markdown 文件——不需要 Figma 导出、不需要 JSON Schema、不需要特殊工具放入项目根目录后任何 AI 编码代理或 Google Stitch 都能立刻理解界面应有的外观。正如仓库 README.md 所述AGENTS.md告诉编码代理如何构建项目而DESIGN.md告诉设计代理项目应该如何呈现。Stripe的DESIGN.md是这套体系中的 Fintech 代表它是一个受 Stripe 启发的设计分析将品牌定义为金融基础设施公司——深海军蓝墨水色、电光靛蓝主色、以及几乎每个营销页面都出现的渐变网格。文档采用统一的 YAML frontmatter 结构定义令牌colors / typography / rounded / spacing / components随后用长文章节讲解设计意图、使用原则与迭代方法。这份文档本身就是可被 Agent 直接消费的设计说明书。二、设计语言总览渐变网格、单一靛蓝 CTA 与暗色仪表盘轨道Stripe 的设计语言以渐变网格开篇一条宽阔的横向色带——淡奶油色、雪芭橙、薰衣草紫、电光靛蓝、宝石红粉——占据几乎每个营销页面的上三分之一成为品牌最具辨识度的氛围背景。类型与产品 UI 模型漂浮其上以{colors.canvas}白色呈现渐变既是装饰也是视觉锚点。页面下半部分回归白色功能说明落在{colors.canvas-soft}微冷调近白色上仪表盘产品模型则以深海军蓝合成出类 IDE/终端面板。色彩系统承担两个核心角色靛蓝{colors.primary}—#533afd是品牌标志性的 CTA 色使用克制每个区块只出现一个实心胶囊按钮。深海军蓝{colors.ink}—#0d253d是通用正文色同时是仪表盘模型、突出定价档位与仪表盘轨道暗色表面的填充色。宝石红{colors.ruby}与洋红{colors.magenta}只出现在渐变网格与产品 UI 模型的强调圆点中绝不用作按钮颜色。字体排印围绕Sohne 300 细字重 负字距构建——这是品牌编辑密度显示的标志显示字号32–56px使用 -1.4px 至 -0.64px 字距正文使用 0涉及金额与数字的表格标题字号则启用 OpenTypetnum特性并收紧 -0.36 至 -0.42px 字距全局开启ss01风格集。关键特征Key Characteristics每个营销 hero 都有渐变网格背景——奶油/橙/薰衣草/靛蓝/宝石红横向铺满页面上三分之一。单一靛蓝 CTA 层级实心{colors.primary}胶囊是营销面上唯一的实心按钮。Sohne 300 细显示层级负字距从 -1.4px 到 -0.2px 随字号变化。任何含金额或数字的单元格使用表格数字tnum正文——品牌低调的金融数据信号。暗色仪表盘轨道深海军蓝产品 UI 模型合成在白色画布之上内部常渲染代码或仪表盘表格。胶囊按钮{rounded.pill}9999px配紧凑8px 16px内边距——短促、果断、交易化。奶油色功能卡片{colors.canvas-cream}在蓝白区块间引入温暖插曲而不破坏品牌色彩逻辑。三、色彩系统完整令牌与角色划分来源页面首页/、/payments、/pricing、dashboard.stripe.com/register/payments文档中记录的取样来源。3.1 品牌与强调色Brand Accent令牌色值角色{colors.primary}#533afd品牌标志性 CTA 色实心胶囊按钮、链接强调、渐变锚点{colors.primary-deep}#4434d4更深靛蓝用于渐变中间停靠点也是按下态的偏暖替代{colors.primary-press}#2e2b8c主色的按下态提升色{colors.primary-soft}#665efd较浅靛蓝用于产品 UI 强调与图表高亮{colors.primary-bg-subdued-hover}#b9b9f9淡靛蓝填充用作柔和标签背景{colors.brand-dark-900}#1c1e54深海军蓝突出定价档位与仪表盘铬色{colors.ruby}#ea2261渐变强调与图表高亮绝不做按钮{colors.magenta}#f96bee渐变网格中更亮的粉色停靠点{colors.lemon}#9b6829渐变背景中的温暖雪芭橙停靠点3.2 表面色Surface令牌色值角色{colors.canvas}#ffffff默认页面背景{colors.canvas-soft}#f6f9fc冷调近白色用于渐变 hero 下方的功能区块{colors.canvas-cream}#f5e9d4温暖奶油色用作功能区块填充——品牌的色彩插曲{colors.hairline}#e3e8ee卡片与表格上的 1px 边框{colors.hairline-input}#a8c3de略冷的发丝线用于表单输入框边框3.3 文本色Text令牌色值角色{colors.ink}#0d253d品牌默认正文色。深海军蓝绝不使用纯黑{colors.ink-secondary}#273951白色背景上的次级文本{colors.ink-mute}#64748d辅助文本、标题、表格标签{colors.ink-mute-2}#61718a与 ink-mute 近似用于导航{colors.on-primary}#ffffff靛蓝 / 深海军蓝表面上的文本3.4 语义色Semantic值得注意营销系统中品牌并未使用独立的语义色板——错误 / 成功状态只存在于仪表盘产品 UI 中。这一取舍体现了营销面克制、产品面功能化的分层策略。四、字体排印Sohne 300 与负字距的编辑密度4.1 字体族与回退策略显示层与 UI 层使用SohneKlim Type Foundry 授权字体专有的 300细与 400常规字重。可变字体sohne-var加载时全局启用font-feature-settings: ss01——该风格集会替换单层a等字符变体构成品牌排印签名的一部分。当 Sohne 不可用时回退到SF Pro Display细字重再到 system-ui。追求最大品牌保真度时可使用开源Inter300 字重 font-feature-settings: ss01 显示字号letter-spacing: -1.4px能近似复刻这种节奏。4.2 完整层级表Hierarchy文档定义了 15 个字号令牌必须全部继承令牌字号字重行高字距用途{typography.display-xxl}56px3001.03-1.4pxHero 主标题{typography.display-xl}48px3001.15-0.96px章节开场{typography.display-lg}32px3001.1-0.64px卡片标题 / 子章节{typography.display-md}26px3001.12-0.26px紧凑卡片标题{typography.heading-lg}22px3001.1-0.22px定价档位名称{typography.heading-md}20px3001.4-0.2px章节副标题{typography.heading-sm}18px3001.40迷你章节标签{typography.body-lg}16px3001.40营销正文导语{typography.body-md}15px3001.40默认 UI 正文{typography.body-tabular}14px3001.4-0.42px金额 / 数字表格使用tnum{typography.button-md}16px4001.00胶囊按钮标签{typography.button-sm}14px4001.00紧凑胶囊标签{typography.caption}13px4001.4-0.39px辅助文字、表格标签{typography.micro}11px3001.40小字印刷{typography.micro-cap}10px4001.150.1px全大写眉题4.3 排印原则Principles细字重即品牌显示层级永远使用 300 字重。提升到 400 会破坏品牌的编辑感。显示层负字距56px 时 -1.4px按比例收窄到 20px 时的 -0.2px。负字距是品牌排印签名。金额用表格数字任何渲染货币、交易金额或数字计数的单元格必须使用font-feature-settings: tnum并配合收紧字距。品牌通过这一微细节低调传达其金融 DNA。ss01全局启用在 body 元素上应用font-feature-settings: ss01让风格集替换对所有文本角色生效。4.4 字体替代方案说明Sohne 为专有字体。开源替代首选InterGoogle Fonts 提供显示层级使用 300 字重 letter-spacing: -1.4pxfont-feature-settings: ss01正文层级使用 300 字重 适当时font-feature-settings: tnum。应避免 Helvetica 或 system-ui 默认值——它们比品牌需要的更重。五、布局8px 基距、约 1200px 容器与留白哲学5.1 间距系统Spacing System基准单位8px另配 2 / 4 / 12 子令牌用于精细工作。令牌{spacing.xxs}2px ·{spacing.xs}4px ·{spacing.sm}8px ·{spacing.md}12px ·{spacing.lg}16px ·{spacing.xl}24px ·{spacing.xxl}32px ·{spacing.huge}64px。区块内边距营销面 64–96px仪表盘 / 产品面 32–48px。卡片内边距功能卡片 32px仪表盘模型 24px。5.2 网格与容器Grid Container营销页内容居中在约1200px容器中渐变网格在其上满幅延伸。定价页在 1024 / 768 断点处按4 列 → 2 列 → 1 列折叠。仪表盘产品模型使用自身内部网格12 列表格、3 列卡片网格以静态合成图渲染。5.3 留白哲学Whitespace Philosophy渐变网格占据页面上三分之一下方白色画布慷慨留白。区块间距趋向 96px在仪表盘 / 定价页等用户需要比较与行动的场景内容收紧到 32px。六、层次与纵深Elevation Depth层级处理方式用途0平铺默认表面1box-shadow: rgba(0,55,112,0.08) 0 1px 3px白色上的卡片悬浮2box-shadow: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px浮动面板、仪表盘模型铬色3渐变网格背景品牌主要的纵深媒介——氛围色彩而非字面阴影装饰性纵深渐变网格就是品牌的纵深系统。实现方式为分层 SVG 或大幅背景图而非 CSS 渐变——真实的网格包含 CSS 无法渲染的有机块状形态organic blob shapes。网格提供品牌标志性的抬升感字面阴影保留给产品 UI 模型且保持微妙。七、形状从 4px 到 9999px 的圆角刻度7.1 圆角刻度表Border Radius Scale令牌值用途{rounded.xs}4px发丝线标签、表格铬色{rounded.sm}6px表单输入框{rounded.md}8px紧凑卡片、提示{rounded.lg}12px定价卡片、功能卡片{rounded.xl}16px仪表盘产品模型铬色{rounded.pill}9999px所有按钮、标签胶囊7.2 摄影几何Photography Geometry品牌更多使用产品 UI 模型而非摄影。仪表盘合成图渲染为类 IDE/终端/仪表盘铬色置于{rounded.lg}12px 容器内并带微妙box-shadow。真实摄影仅出现在客户 Logo 条与少见的案例研究卡片中按 4:3 内嵌处理且无阴影。八、组件体系从按钮到签名组件8.1 按钮Buttonsbutton-primary-pill— 全站主导 CTA背景{colors.primary}、文本{colors.on-primary}、类型{typography.button-md}、内边距{spacing.sm} {spacing.lg}8px 16px、圆角{rounded.pill}9999px。按下态button-primary-pill-pressed将背景切换为{colors.primary-press}。button-secondary— 描边式替代背景{colors.canvas}、文本{colors.primary}、1px 实线{colors.primary}边框、同款胶囊几何。button-on-dark— 用于仪表盘 / 暗色表面背景{colors.brand-dark-900}、文本{colors.on-primary}、同款胶囊几何。8.2 卡片与容器Cards Containerscard-feature-light— 白色上的功能说明卡片背景{colors.canvas}、内边距{spacing.xxl}32px、圆角{rounded.lg}12px、1px{colors.hairline}边框、可选 Level 1 阴影。card-pricing— 标准定价档位背景{colors.canvas}、内边距{spacing.xxl}、圆角{rounded.lg}、1px{colors.hairline}边框。标题{typography.heading-lg}、价格{typography.display-md}、正文{typography.body-md}、CTA 以button-primary-pill钉在底部。card-pricing-featured— 反转的暗色突出档位背景{colors.brand-dark-900}、文本{colors.on-primary}其余结构与card-pricing一致。深海军蓝填充是品牌鲜明的突出档位选择。card-cream-band— 温暖插曲卡片背景{colors.canvas-cream}、文本{colors.ink}、内边距{spacing.xxl}、圆角{rounded.lg}。用于以暖色调打破靛蓝 / 白节奏。card-dashboard-mockup— 合成的仪表盘 / 产品 UI 截图背景{colors.canvas}、类型{typography.body-tabular}含tnum、内边距{spacing.xl}24px、圆角{rounded.lg}12px、Level 2 阴影。常嵌套迷你模型代码预览 仪表盘表格 图表卡片。8.3 输入与表单Inputs Formstext-input— 标准表单字段背景{colors.canvas}、文本{colors.ink}、类型{typography.body-md}、内边距{spacing.sm} {spacing.md}8px 12px、圆角{rounded.sm}6px、1px{colors.hairline-input}边框。聚焦态text-input-focused边框切换为{colors.primary}。8.4 导航Navigationnav-bar-on-mesh— 悬浮于渐变 hero 之上的顶部导航背景{colors.canvas}或随滚动变透明、文本{colors.ink}、内边距{spacing.lg} {spacing.xl}16px 24px。左侧 Logo 字标、中间主导航、右侧登录 实心button-primary-pill。8.5 胶囊、标签与芯片Pills, Tags, and Chipspill-tag-soft— 柔和靛蓝标签背景{colors.primary-bg-subdued-hover}、文本{colors.primary-deep}、类型{typography.micro-cap}、内边距 4px 8px、圆角{rounded.pill}。8.6 签名组件Signature Components渐变网格背景Gradient Mesh Backdrop— 淡奶油 → 雪芭橙 → 薰衣草紫 → 靛蓝 → 宝石红粉的停靠点横向模糊铺满页面上三分之一。以 SVG 或大幅背景图实现而非扁平 CSS 渐变真实网格含有机块状形态。合成仪表盘模型Composited Dashboard Mockup— 多层类产品 UI 合成左侧 IDE 面板、中间仪表盘表格、右侧图表卡片全部以{rounded.lg}容器小尺寸渲染并带 Level 2 微妙阴影。这是品牌被拍摄最多的特征。表格数字金额类型Tabular-Figure Money Type— 每个渲染金额、计数或交易值的数字都使用font-feature-settings: tnum是品牌金融基础设施平台的安静信号。link-on-light— 亮色表面上的内联链接文本{colors.primary}、{typography.body-md}渲染、默认无下划线。footer-light— 全站页脚背景{colors.canvas}、文本{colors.ink-mute}、类型{typography.caption}、内边距{spacing.huge} {spacing.xl}64px 24px。承载 4–6 列链接组、社交图标与小型法律声明行。九、Dos and Donts设计护栏与反模式Do应当将{colors.primary}保留给实心 CTA 与内联链接强调——它应克制出现每个区块一个实心按钮。每个营销 hero 都应用渐变网格空白画布 hero 会显得偏离品牌。显示层级使用 300 字重 负字距——细字距是排印签名。每个金额 / 数字单元格使用font-feature-settings: tnum。在 body 元素全局应用font-feature-settings: ss01。每个功能说明都配一个合成产品 UI 模型——品牌的论点是看真实产品。Dont不应不要将显示字重提升到 300 以上——到 400 时品牌的编辑感会崩塌。不要在文档记录的渐变停靠点奶油 / 橙 / 薰衣草 / 靛蓝 / 宝石红 / 洋红之外新增强调色。不要将靛蓝{colors.primary}用作正文色——它是 CTA 与链接色不是正文尺寸的类型色。不要将按钮内边距缩到8px 16px以下——紧凑胶囊是品牌交易感的一部分。不要在金额单元格省略tnum——这会破坏安静的金融数据签名。不要用圆角矩形替代胶囊形状的按钮。十、响应式行为Responsive Behavior10.1 断点表Breakpoints名称宽度关键变化Wide≥ 1440px渐变网格满幅铺开仪表盘合成图全尺寸渲染Desktop1024–1440px默认内容最大宽度定价 4 列Tablet768–1023px定价 2 列仪表盘合成图简化为 2 面板Mobile 768px定价 1 列汉堡菜单显示字号从 56 降至 36px10.2 触控目标Touch Targets胶囊按钮通过内边距缩放达到移动端 ≥ 40×40px小屏上按钮放大到 44×44px 以满足 WCAG AAA。表单字段保持至少 40px 高度。10.3 折叠策略Collapsing Strategy显示层级沿断点阶梯式降级56 → 48 → 32 → 26 → 22px。渐变网格在移动端重新平铺re-tile以保持水洗效果而不消失。仪表盘合成图在移动端简化为单面板模型多层合成仅在桌面及以上渲染。定价档位阶梯式折叠4 列 → 2 列 → 1 列。10.4 图片行为Image Behavior产品 UI 合成图使用srcset配合主要断点处的艺术裁剪art-direction crops。移动端裁剪聚焦最具可操作性的内部面板桌面端裁剪展示完整多层合成。十一、迭代指南让 Agent 精确复刻品牌文档在结尾给出了供人机协作的迭代步骤这是把 DESIGN.md 用于实际开发的关键方法论一次只聚焦一个组件避免一次改动过多变量。直接引用组件名与令牌如{colors.primary}、{button-primary-pill}-pressed、{rounded.pill}让 Agent 与令牌系统精确对齐。每次编辑后运行npx google/design.md lint DESIGN.md校验文档结构。新增变体作为独立条目添加不覆盖既有定义。正文默认{typography.body-md}15px任何金额 / 数字单元格改用{typography.body-tabular}。在 body 上全局应用ss01对数字内容按元素应用tnum。渐变网格在营销 hero 上不可妥协——空白画布 hero 会破坏品牌。十二、在实际项目中落地把这份设计系统交给 Agent结合仓库 README.md 的使用方式落地流程非常简单将 design-md/stripe/DESIGN.md 复制到你的项目根目录告诉你的 AI 编码代理用这份设计系统构建一个页面Agent 读取文档中的 frontmatter 令牌与章节原则生成视觉一致的高质量 UI。这套工作流的价值在于文档以语义化令牌颜色、字重、圆角、间距全部具名而非一次性 CSS 值描述设计因此 Agent 能在跨页面、跨组件间保持一致性而 Dos and Donts、响应式断点与迭代指南则约束 Agent 不越界——例如不会把按钮改成圆角矩形、不会把显示字重提升到 400、不会遗漏金额单元格的tnum。这也正是仓库将每份文件按视觉主题、色彩角色、排印规则、组件样式、布局原则、纵深层次、护栏、响应式、Agent 提示九大章节组织见 README.md 的 Whats Inside Each DESIGN.md的原因。值得注意的是仓库中该品牌的 DESIGN.md 文件状态为version: alpha意味着这是一份持续迭代的分析文档其令牌全部来自公开可见的 CSS 值取样文档注明来源页面首页、/payments、/pricing与注册页仪表盘不构成对品牌视觉资产的所有权主张。若要在真实 Stripe 产品语境下使用还应将 Sohne 替换为开源 Inter 方案见 4.4 节并注意营销面与产品面的语义色分层差异。总结Stripe的DESIGN.md是一份将氛围感翻译为可执行令牌的范本它用渐变网格定义纵深、用靛蓝单一 CTA 定义行动层级、用 300 细字重与负字距定义编辑密度、用tnum表格数字定义金融身份。无论是直接复用这套令牌生成 Stripe 风格界面还是以此为模板为自己的品牌撰写 DESIGN.md 交给 Agent 消费本文梳理的完整令牌表、组件规格、响应式策略与迭代方法论都可以直接作为实现参考。仓库中该文档的完整源文件位于 design-md/stripe/DESIGN.mdREADME.md 则提供了 DESIGN.md 生态的整体背景与使用方式。赞分享文档【免费下载链接】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点击查看免费下载相关推荐复刻 Stripe 金融级设计语言open-design 中 Inspired by Stripe 设计系统包深度解析复刻 Stripe 金融级设计语言open design 中 Inspired by Stripe 设计系统包深度解析 本文以 design systemAI 应用人工智能AI 技能设计系统媒体生成Open CoDesign 品牌参考解读以 Coinbase DESIGN.md 为例构建金融级界面设计系统Open CoDesign 品牌参考解读以 Coinbase DESIGN.md 为例构建金融级界面设计系统 导读 本文以 Open CoDesign 内置的人工智能AI 应用桌面应用终极指南Ant Design设计哲学深度剖析——企业级应用的UI设计语言精髓终极指南Ant Design设计哲学深度剖析——企业级应用的UI设计语言精髓 Ant Design作为一款企业级UI设计语言和React UI库以其丰富的组UI组件前端设计系统上一篇Sunshine 游戏串流服务器快速上手从安装到调优的 5 个关键步骤下一篇终极PWA指南离线使用Linux命令大全的5个简单步骤创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考