文档【免费下载链接】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点击查看免费下载xAI 是 Elon Musk 的前沿 AI 实验室其官网以近黑画布、白色描边胶囊按钮、Universal Sans 单一字重与 Geist Mono 大写眉题构建出一种工程化宇宙感engineered-cosmic的克制视觉姿态。本文以仓库中的 xAI DESIGN.md 为绝对主体逐层拆解其颜色令牌、排版层级、间距与圆角体系、组件规格及使用禁区并给出将该文件放入项目、让 AI 编码代理生成一致 UI 的落地方式帮助你完整掌握这套白描边胶囊 深空画布的设计系统。一、xAI 视觉语言总览一张近黑画布上的工程克制xAI 官网的设计姿态可以用工程化克制概括整站采用近黑画布{colors.canvas}#0a0a0a通铺到边所有交互元素都是白色描边胶囊唯一的展示字型是私有几何无衬线字体Universal Sans全部大标题统一 weight 400。没有渐变 hero、没有氛围背景、没有产品截图——品牌读起来是自信的稀疏一个研究实验室在发布自己的成果而不是一个 SaaS 营销站点。这份解读在 DESIGN.md 中以 YAML frontmatter 开头的结构化设计令牌design tokens承载随后是 Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Dos and Donts 等章节完全遵循本仓库 README 所说明的 Google StitchDESIGN.md规范见 README.md。文档给出的核心特征Key Characteristics单一近黑画布{colors.canvas}#0a0a0a白色描边胶囊是全部交互词汇。Universal Sans weight 400 承载展示文本Geist Mono 大写加宽字距承载标签——双字体对比就是品牌声音本身。每个按钮都是{rounded.pill}描边胶囊带半透明白边框品牌几乎不使用实心 CTA唯一的例外是一个白色实心胶囊用于 Sign Up。卡片是紧凑的{rounded.sm}8px 圆角矩形使用略亮的{colors.canvas-card}#191919填充 发丝线hairline边框无阴影。一组克制的日落橙 / 暮色紫 / 暮光紫 / 微风蓝强调色存在于设计令牌中但很少出现在营销主表面被保留给产品插画与图标。展示标题上的大幅负字距96px 处-2.4px赋予排版精确、聚拢的观感。二、颜色令牌全解析colors 字段文档在 frontmatter 的colors字段中定义了完整的色板分四个层级。Brand Accent品牌与强调令牌色值角色{colors.primary}#ffffff白品牌的主色——按钮描边、button-primary 填充、全部展示文本。白配近黑是品牌签名{colors.accent-sunset}#ff7a17日落橙用于产品插画内部与强调时刻{colors.accent-sunset-soft}#ffc285柔日落日落橙的浅变体{colors.accent-dusk}#7c3aed暮色紫产品插画内使用的深紫{colors.accent-twilight}#c4b5fd暮光紫柔紫——插画强调色{colors.accent-breeze}#a0c3ec微风蓝柔蓝——插画强调色{colors.accent-midnight}#0d1726午夜蓝插画背景用深蓝黑Surface表面令牌色值角色{colors.canvas}#0a0a0a默认近黑页面背景品牌唯一真正的表面{colors.canvas-soft}#1a1c20略亮的深色填充用于导航项 hover 与 tooltip{colors.canvas-card}#191919木炭色卡片填充用于产品特性卡片内部{colors.canvas-mid}#363a3f中深色用于嵌套表面与代码 mockup 背景{colors.hairline}#212327深色表面上 1px 实线分隔线Text文本令牌色值角色{colors.ink}#ffffff画布上的默认文本纯白{colors.ink-hover}#fafaf7略偏灰白用于 hover 状态按组件规范中的 no-hover 策略被过滤掉{colors.body}#dadbdf次级正文——支撑文案{colors.body-mid}#7d8187中等强调正文{colors.mute}同为#7d8187用于说明文字、小字Semantic语义品牌在营销站点上没有单独的语义色板。校验提示validation cues直接复用白 on 画布的层级关系而不是引入红/绿等语义色。这是值得注意的差异化设计决策——意味着实现校验状态时应当维持近黑 白的对比关系。三、排版系统typography 令牌与双字体策略排版是 xAI 设计语言中第二个决定性的声音。字体族系统由两套字体构成阶梯universalSans—— 私有几何无衬线字体承担所有 display、body、button、link 角色。营销表面上只用 weight 400克制本身也是品牌的一部分display 尺寸上的负字距是视觉签名。GeistMono—— 用于大写眉题eyebrows、标签说明与指标计数器在 12–14px 上使用正字距1.2–1.4px。完整层级表frontmatter 中typography字段定义了 11 个令牌文档正文用表格归纳如下令牌字号字重行高字距用途{typography.display-xl}96px40096px-2.4px最大 hero 尺度{typography.display-lg}72px40072px-1.8px副 hero 展示{typography.display-md}48px40048px-1.2px章节大标题{typography.display-sm}32px40036px-0.6px卡片组标题{typography.display-xs}20px40028px0行内展示{typography.body-lg}18px40028px0引导段{typography.body-md}16px40024px0默认正文{typography.body-sm}14px40020px0次级正文{typography.caption-mono}14px40020px1.4px章节眉题GeistMono 大写{typography.caption-mono-sm}12px40016px1.2px小号 mono 标签{typography.button-md}14px40020px0按钮标签排版原则一切皆 weight 400。品牌从不加粗负字距 字号层级承担强调工作。display 尺寸上收紧负字距。回到中性字距会丢掉精密感。GeistMono 大写眉题。正字距1.4px让 mono 读起来像一段代码注释而非营销标签。字体替换建议universalSans 是私有字体文档给出开源替代方案Display BodyInterweight 400并在 display 尺寸上使用-0.04em到-0.02em字距最接近Geist是第二选择。MonoGeist Mono是文档标注的品牌搭档JetBrains Mono或IBM Plex Mono是备选。补充本仓库 README 中特斯拉条目同样标注使用 Universal Sans可交叉印证该字型的行业化应用见 README.md 汽车板块。四、布局与间距spacing、网格与响应式间距系统基准单位4px。令牌{spacing.xxs}2px ·{spacing.xs}4px ·{spacing.sm}8px ·{spacing.md}12px ·{spacing.lg}16px ·{spacing.xl}24px ·{spacing.2xl}32px ·{spacing.3xl}48px ·{spacing.4xl}64px。区块内边距桌面端 hero / content 带使用{spacing.4xl}64px。卡片内边距{spacing.xl}24px。网格与容器营销内容居中宽度约1200px。产品 / 公告卡片网格桌面端 2 列2-up移动端 1 列1-up。响应式策略断点名宽度关键变化Mobile 768pxhero 从 96 → 48px网格转 1 列汉堡导航Desktop≥ 768px完整 hero 2 列网格触控目标按钮渲染高度约 32–40px8px 垂直内边距 20px 行高移动端放大触控区以满足 WCAG 44 × 44px。图像行为品牌为产品时刻Grok、Voice、API使用稀疏的 SVG 插画营销表面上不使用摄影图。五、深度与形状无阴影、全胶囊层级与深度层级处理用途Level 0 — Flat无阴影、无边框默认Level 1 — Hairline1px 实线{colors.hairline}边框卡片 chrome、按钮描边配合半透明白品牌不使用任何阴影全部层级线索由发丝线边框承担——这是与其他深色品牌依赖弥散阴影最显著的区别之一。圆角体系令牌值用途{rounded.none}0px通铺区块full-bleed bands{rounded.sm}8px卡片 chrome品牌实际使用的--radius值{rounded.pill}9999px每一个按钮——品牌通用的交互形状{rounded.full}9999px圆形图标容器六、组件规格components 令牌逐一解析frontmatter 的components字段用{colors.*}、{typography.*}、{spacing.*}、{rounded.*}引用语法组装出全部组件正文逐一定义如下。按钮Buttonsbutton-primary—— 罕见的白色实心胶囊仅用于唯一的 Sign Up CTA背景{colors.primary}白、文本{colors.on-primary}近黑、1px 实线白边框、标签{typography.button-md}、内边距{spacing.xs} {spacing.md}、形状{rounded.pill}9999px。button-outline-on-dark—— 规范的白描边胶囊用于所有非 primary CTA背景{colors.canvas}实践中透明rgba(0,0,0,0)、文本{colors.ink}白、1px 实线{colors.hairline}边框运行时为半透明白、与 primary 相同的排版 / 内边距 / 形状。button-outline-sm—— 卡片簇 CTA 用的更小描边胶囊与button-outline-on-dark相同仅内边距收紧为{spacing.xs} {spacing.md}。卡片与容器Cards Containerscard-content—— 默认内容卡片背景{colors.canvas-card}#191919、文本{colors.ink}、1px 实线{colors.hairline}边框、内边距{spacing.xl}、形状{rounded.sm}8px。card-feature-product—— 产品特性卡片Grok / Voice / API与card-content相同 chrome内部承载 SVG 插画 标题 正文 描边胶囊 CTA。输入与表单Inputs Formstext-input—— 深色上的标准文本输入背景{colors.canvas-soft}、文本{colors.ink}、1px 实线{colors.hairline}、正文{typography.body-md}、内边距{spacing.md} {spacing.lg}、形状{rounded.sm}8px。导航Navigationnav-bar—— 粘性顶部导航背景{colors.canvas}、文本{colors.ink}、内边距{spacing.md} {spacing.xl}。nav-link—— 导航内链接项文本{colors.ink}、{typography.body-sm}。footer—— 页脚带背景{colors.canvas}、文本{colors.body}、内边距{spacing.3xl} {spacing.xl}正文{typography.body-sm}。签名组件Signature Componentshero-band—— 深色 hero 巨型展示标题背景{colors.canvas}、文本{colors.ink}、内边距{spacing.4xl} {spacing.xl}标题{typography.display-xl}96px、weight 400、-2.4px字距。content-band—— 标准内容区块背景{colors.canvas}、文本{colors.ink}、内边距{spacing.4xl} {spacing.xl}章节标题{typography.display-md}标题前必须带{typography.caption-mono}大写的 GeistMono 眉题。eyebrow-mono—— 每个章节标题上方的大写字距 GeistMono 标签文本{colors.ink}、{typography.caption-mono}是品牌的签名标签样式。divider-hairline—— 章节带之间的 1px 线{colors.hairline}实线。七、示例表面ex-* 组件kit-mirror 演示面文档在components尾部附带了 10 个ex-*示例条目。按文档说明它们是自动派生的 kit-mirror 演示表面来自生成管线文档标注为scripts/derive-examples-block.mjs每个ex-*条目引用品牌原生原语使下游消费端文档标注的/preview-design、/generate-kit能以一致方式重换皮肤re-skin这 10 个表面TO_FILL标记表示缺失的原语交由 LLM 判断阶段补齐。从当前仓库快照的目录结构看design-md/x.ai/目录下实际保留的文件为 DESIGN.md 与 README.md因此上述脚本与预览面属于上游生成设施本仓库以 DESIGN.md 文本形态完整保留了其规格定义。各示例条目及其属性令牌描述关键属性ex-pricing-tier默认定价层卡片复用特性卡片 chrome canvas-soft 表面backgroundColor、textColor、borderColor、rounded、paddingex-pricing-tier-featured高亮定价层——极性反转表面浅色模式下深填充 浅文字深色模式下浅填充 深文字backgroundColor、textColor、rounded、paddingex-product-selectorWhats Included 汇总卡——为 SaaS / B2B 垂直领域改造非字面产品画廊backgroundColor、rounded、paddingex-cart-drawer订阅汇总——为 SaaS / B2B 改造每个附加项一行非字面购物车backgroundColor、rounded、padding、item-dividerex-app-shell-rowApp Shell 示例中的侧边导航行激活态用品牌 primary 作指示器backgroundColor、activeIndicator、rounded、paddingex-data-table-cell数据表默认 th td chrome表头用 mono 大写眉题排版正文用 body-smheaderBackground、headerTypography、bodyTypography、cellPadding、rowBorderex-auth-form-card登录 / 注册卡片复用特性卡片 chrome内部为 text-input 原语backgroundColor、rounded、paddingex-modal-card模态对话框表面——同特性卡片 chrome 提升阴影backgroundColor、rounded、paddingex-empty-state-card空状态插画框backgroundColor、rounded、padding、captionTypographyex-toast通知 toast 表面——特性卡片形状 中等阴影backgroundColor、rounded、padding、typography注意这些表面在无阴影主风格之外是唯一允许使用阴影modal 提升阴影、toast 中等阴影的例外场景说明阴影被严格限定在浮层类组件中。八、Dos and Donts使用禁区与红线Do应当将{colors.canvas}#0a0a0a保留为唯一页面表面。该品牌只做深色画布。hero 标题使用{typography.display-xl}Universal Sans weight 400 -2.4px字距——精密感就是声音。所有交互元素一律使用{rounded.pill}9999px——胶囊即品牌。Universal Sans句首大写与 GeistMono 大写眉题、标签、指标计数器配对使用。描边按钮使用半透明白边框——品牌从不在描边胶囊上使用纯白实线边框。Dont禁止不要引入浅色模式对应版本。xAI仅深色画布。不要加粗展示标题。weight 400 就是整条字重刻度。不要广泛使用实心按钮。品牌几乎只用描边胶囊唯一的 Sign Up 白色实心胶囊是罕见例外。不要给卡片加投影。发丝线边框承担层级表达。不要用通用几何无衬线直接替换 Universal Sans 而不调整字距——负字距是品牌的一部分。九、实战把这份 DESIGN.md 放进你的项目xAI 的 DESIGN.md 本质是一份纯 Markdown 的设计系统文档——没有 Figma 导出、没有 JSON schema、无需特殊工具。按仓库 README.md 的说明使用方式只有两步将站点的DESIGN.md复制到你的项目根目录如design-md/x.ai/DESIGN.md这份告诉你的 AI 编码代理build me a page that looks like this代理即读取该文件生成与这套近黑画布、白描边胶囊、双字体排版保持视觉一致的 UI。文档本身已按 Stitch DESIGN.md 格式组织YAML frontmatter 承载机器可读的设计令牌colors / typography / spacing / rounded / components正文承载 Overview、排版原则、组件定义与 Dos and Donts 等人类与 LLM 都可读的语义说明。这也是为什么这份文档同时适合复制进项目直接使用与作为设计参考阅读。在把文档落进代码时建议重点检查三条红线是否被代理遵守背景只允许#0a0a0a系深色按钮必须是9999px圆角描边胶囊唯一实心白胶囊保留给主 CTA展示标题保持 weight 400 与负字距。只有这三条同时成立生成的页面才读起来像 xAI。十、总结从 design-md/x.ai/DESIGN.md 可以看到xAI 的设计系统是减法的极致样本一个近黑画布、一种交互形状胶囊、一套字重400、两种字体Universal Sans Geist Mono、一个间距基准4px——所有丰富度都由排版负字距、大写 mono 眉题与克制插画色的对比提供。对任何想在深色场景中复刻精密、克制、实验室气质的团队而言这份 DESIGN.md 既是一份可直接投喂给 AI 代理的规格文件也是一套值得收藏的极简深色设计方法论。赞分享文档【免费下载链接】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点击查看免费下载相关推荐UFO Server 监控与可观测性实战指南健康检查、性能指标、结构化日志与多通道告警UFO Server 监控与可观测性实战指南健康检查、性能指标、结构化日志与多通道告警 本指南面向 UFO ServerUFO 数字智能体星系的核心服务端文档Ant Design设计语言与视觉体系Ant Design设计语言与视觉体系 Ant Design作为企业级UI设计语言其核心设计价值观为设计者提供了评价设计好坏的内在标准这些价值观不仅指导着设前端UI组件设计系统Notion 设计系统深度解析从 DESIGN.md 视觉规范到 tokens.css 语义化落地Notion 设计系统深度解析从 DESIGN.md 视觉规范到 tokens.css 语义化落地 本文以 design systems/notion httAI 应用人工智能AI 技能设计系统媒体生成上一篇TMI安全最佳实践确保图片分析过程的数据隐私与安全下一篇ViMax异步处理优化asyncio在视频生成流水线中的应用实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
从 awesome-design-md 解读 xAI 网站设计语言：基于 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点击查看免费下载xAI 是 Elon Musk 的前沿 AI 实验室其官网以近黑画布、白色描边胶囊按钮、Universal Sans 单一字重与 Geist Mono 大写眉题构建出一种工程化宇宙感engineered-cosmic的克制视觉姿态。本文以仓库中的 xAI DESIGN.md 为绝对主体逐层拆解其颜色令牌、排版层级、间距与圆角体系、组件规格及使用禁区并给出将该文件放入项目、让 AI 编码代理生成一致 UI 的落地方式帮助你完整掌握这套白描边胶囊 深空画布的设计系统。一、xAI 视觉语言总览一张近黑画布上的工程克制xAI 官网的设计姿态可以用工程化克制概括整站采用近黑画布{colors.canvas}#0a0a0a通铺到边所有交互元素都是白色描边胶囊唯一的展示字型是私有几何无衬线字体Universal Sans全部大标题统一 weight 400。没有渐变 hero、没有氛围背景、没有产品截图——品牌读起来是自信的稀疏一个研究实验室在发布自己的成果而不是一个 SaaS 营销站点。这份解读在 DESIGN.md 中以 YAML frontmatter 开头的结构化设计令牌design tokens承载随后是 Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Dos and Donts 等章节完全遵循本仓库 README 所说明的 Google StitchDESIGN.md规范见 README.md。文档给出的核心特征Key Characteristics单一近黑画布{colors.canvas}#0a0a0a白色描边胶囊是全部交互词汇。Universal Sans weight 400 承载展示文本Geist Mono 大写加宽字距承载标签——双字体对比就是品牌声音本身。每个按钮都是{rounded.pill}描边胶囊带半透明白边框品牌几乎不使用实心 CTA唯一的例外是一个白色实心胶囊用于 Sign Up。卡片是紧凑的{rounded.sm}8px 圆角矩形使用略亮的{colors.canvas-card}#191919填充 发丝线hairline边框无阴影。一组克制的日落橙 / 暮色紫 / 暮光紫 / 微风蓝强调色存在于设计令牌中但很少出现在营销主表面被保留给产品插画与图标。展示标题上的大幅负字距96px 处-2.4px赋予排版精确、聚拢的观感。二、颜色令牌全解析colors 字段文档在 frontmatter 的colors字段中定义了完整的色板分四个层级。Brand Accent品牌与强调令牌色值角色{colors.primary}#ffffff白品牌的主色——按钮描边、button-primary 填充、全部展示文本。白配近黑是品牌签名{colors.accent-sunset}#ff7a17日落橙用于产品插画内部与强调时刻{colors.accent-sunset-soft}#ffc285柔日落日落橙的浅变体{colors.accent-dusk}#7c3aed暮色紫产品插画内使用的深紫{colors.accent-twilight}#c4b5fd暮光紫柔紫——插画强调色{colors.accent-breeze}#a0c3ec微风蓝柔蓝——插画强调色{colors.accent-midnight}#0d1726午夜蓝插画背景用深蓝黑Surface表面令牌色值角色{colors.canvas}#0a0a0a默认近黑页面背景品牌唯一真正的表面{colors.canvas-soft}#1a1c20略亮的深色填充用于导航项 hover 与 tooltip{colors.canvas-card}#191919木炭色卡片填充用于产品特性卡片内部{colors.canvas-mid}#363a3f中深色用于嵌套表面与代码 mockup 背景{colors.hairline}#212327深色表面上 1px 实线分隔线Text文本令牌色值角色{colors.ink}#ffffff画布上的默认文本纯白{colors.ink-hover}#fafaf7略偏灰白用于 hover 状态按组件规范中的 no-hover 策略被过滤掉{colors.body}#dadbdf次级正文——支撑文案{colors.body-mid}#7d8187中等强调正文{colors.mute}同为#7d8187用于说明文字、小字Semantic语义品牌在营销站点上没有单独的语义色板。校验提示validation cues直接复用白 on 画布的层级关系而不是引入红/绿等语义色。这是值得注意的差异化设计决策——意味着实现校验状态时应当维持近黑 白的对比关系。三、排版系统typography 令牌与双字体策略排版是 xAI 设计语言中第二个决定性的声音。字体族系统由两套字体构成阶梯universalSans—— 私有几何无衬线字体承担所有 display、body、button、link 角色。营销表面上只用 weight 400克制本身也是品牌的一部分display 尺寸上的负字距是视觉签名。GeistMono—— 用于大写眉题eyebrows、标签说明与指标计数器在 12–14px 上使用正字距1.2–1.4px。完整层级表frontmatter 中typography字段定义了 11 个令牌文档正文用表格归纳如下令牌字号字重行高字距用途{typography.display-xl}96px40096px-2.4px最大 hero 尺度{typography.display-lg}72px40072px-1.8px副 hero 展示{typography.display-md}48px40048px-1.2px章节大标题{typography.display-sm}32px40036px-0.6px卡片组标题{typography.display-xs}20px40028px0行内展示{typography.body-lg}18px40028px0引导段{typography.body-md}16px40024px0默认正文{typography.body-sm}14px40020px0次级正文{typography.caption-mono}14px40020px1.4px章节眉题GeistMono 大写{typography.caption-mono-sm}12px40016px1.2px小号 mono 标签{typography.button-md}14px40020px0按钮标签排版原则一切皆 weight 400。品牌从不加粗负字距 字号层级承担强调工作。display 尺寸上收紧负字距。回到中性字距会丢掉精密感。GeistMono 大写眉题。正字距1.4px让 mono 读起来像一段代码注释而非营销标签。字体替换建议universalSans 是私有字体文档给出开源替代方案Display BodyInterweight 400并在 display 尺寸上使用-0.04em到-0.02em字距最接近Geist是第二选择。MonoGeist Mono是文档标注的品牌搭档JetBrains Mono或IBM Plex Mono是备选。补充本仓库 README 中特斯拉条目同样标注使用 Universal Sans可交叉印证该字型的行业化应用见 README.md 汽车板块。四、布局与间距spacing、网格与响应式间距系统基准单位4px。令牌{spacing.xxs}2px ·{spacing.xs}4px ·{spacing.sm}8px ·{spacing.md}12px ·{spacing.lg}16px ·{spacing.xl}24px ·{spacing.2xl}32px ·{spacing.3xl}48px ·{spacing.4xl}64px。区块内边距桌面端 hero / content 带使用{spacing.4xl}64px。卡片内边距{spacing.xl}24px。网格与容器营销内容居中宽度约1200px。产品 / 公告卡片网格桌面端 2 列2-up移动端 1 列1-up。响应式策略断点名宽度关键变化Mobile 768pxhero 从 96 → 48px网格转 1 列汉堡导航Desktop≥ 768px完整 hero 2 列网格触控目标按钮渲染高度约 32–40px8px 垂直内边距 20px 行高移动端放大触控区以满足 WCAG 44 × 44px。图像行为品牌为产品时刻Grok、Voice、API使用稀疏的 SVG 插画营销表面上不使用摄影图。五、深度与形状无阴影、全胶囊层级与深度层级处理用途Level 0 — Flat无阴影、无边框默认Level 1 — Hairline1px 实线{colors.hairline}边框卡片 chrome、按钮描边配合半透明白品牌不使用任何阴影全部层级线索由发丝线边框承担——这是与其他深色品牌依赖弥散阴影最显著的区别之一。圆角体系令牌值用途{rounded.none}0px通铺区块full-bleed bands{rounded.sm}8px卡片 chrome品牌实际使用的--radius值{rounded.pill}9999px每一个按钮——品牌通用的交互形状{rounded.full}9999px圆形图标容器六、组件规格components 令牌逐一解析frontmatter 的components字段用{colors.*}、{typography.*}、{spacing.*}、{rounded.*}引用语法组装出全部组件正文逐一定义如下。按钮Buttonsbutton-primary—— 罕见的白色实心胶囊仅用于唯一的 Sign Up CTA背景{colors.primary}白、文本{colors.on-primary}近黑、1px 实线白边框、标签{typography.button-md}、内边距{spacing.xs} {spacing.md}、形状{rounded.pill}9999px。button-outline-on-dark—— 规范的白描边胶囊用于所有非 primary CTA背景{colors.canvas}实践中透明rgba(0,0,0,0)、文本{colors.ink}白、1px 实线{colors.hairline}边框运行时为半透明白、与 primary 相同的排版 / 内边距 / 形状。button-outline-sm—— 卡片簇 CTA 用的更小描边胶囊与button-outline-on-dark相同仅内边距收紧为{spacing.xs} {spacing.md}。卡片与容器Cards Containerscard-content—— 默认内容卡片背景{colors.canvas-card}#191919、文本{colors.ink}、1px 实线{colors.hairline}边框、内边距{spacing.xl}、形状{rounded.sm}8px。card-feature-product—— 产品特性卡片Grok / Voice / API与card-content相同 chrome内部承载 SVG 插画 标题 正文 描边胶囊 CTA。输入与表单Inputs Formstext-input—— 深色上的标准文本输入背景{colors.canvas-soft}、文本{colors.ink}、1px 实线{colors.hairline}、正文{typography.body-md}、内边距{spacing.md} {spacing.lg}、形状{rounded.sm}8px。导航Navigationnav-bar—— 粘性顶部导航背景{colors.canvas}、文本{colors.ink}、内边距{spacing.md} {spacing.xl}。nav-link—— 导航内链接项文本{colors.ink}、{typography.body-sm}。footer—— 页脚带背景{colors.canvas}、文本{colors.body}、内边距{spacing.3xl} {spacing.xl}正文{typography.body-sm}。签名组件Signature Componentshero-band—— 深色 hero 巨型展示标题背景{colors.canvas}、文本{colors.ink}、内边距{spacing.4xl} {spacing.xl}标题{typography.display-xl}96px、weight 400、-2.4px字距。content-band—— 标准内容区块背景{colors.canvas}、文本{colors.ink}、内边距{spacing.4xl} {spacing.xl}章节标题{typography.display-md}标题前必须带{typography.caption-mono}大写的 GeistMono 眉题。eyebrow-mono—— 每个章节标题上方的大写字距 GeistMono 标签文本{colors.ink}、{typography.caption-mono}是品牌的签名标签样式。divider-hairline—— 章节带之间的 1px 线{colors.hairline}实线。七、示例表面ex-* 组件kit-mirror 演示面文档在components尾部附带了 10 个ex-*示例条目。按文档说明它们是自动派生的 kit-mirror 演示表面来自生成管线文档标注为scripts/derive-examples-block.mjs每个ex-*条目引用品牌原生原语使下游消费端文档标注的/preview-design、/generate-kit能以一致方式重换皮肤re-skin这 10 个表面TO_FILL标记表示缺失的原语交由 LLM 判断阶段补齐。从当前仓库快照的目录结构看design-md/x.ai/目录下实际保留的文件为 DESIGN.md 与 README.md因此上述脚本与预览面属于上游生成设施本仓库以 DESIGN.md 文本形态完整保留了其规格定义。各示例条目及其属性令牌描述关键属性ex-pricing-tier默认定价层卡片复用特性卡片 chrome canvas-soft 表面backgroundColor、textColor、borderColor、rounded、paddingex-pricing-tier-featured高亮定价层——极性反转表面浅色模式下深填充 浅文字深色模式下浅填充 深文字backgroundColor、textColor、rounded、paddingex-product-selectorWhats Included 汇总卡——为 SaaS / B2B 垂直领域改造非字面产品画廊backgroundColor、rounded、paddingex-cart-drawer订阅汇总——为 SaaS / B2B 改造每个附加项一行非字面购物车backgroundColor、rounded、padding、item-dividerex-app-shell-rowApp Shell 示例中的侧边导航行激活态用品牌 primary 作指示器backgroundColor、activeIndicator、rounded、paddingex-data-table-cell数据表默认 th td chrome表头用 mono 大写眉题排版正文用 body-smheaderBackground、headerTypography、bodyTypography、cellPadding、rowBorderex-auth-form-card登录 / 注册卡片复用特性卡片 chrome内部为 text-input 原语backgroundColor、rounded、paddingex-modal-card模态对话框表面——同特性卡片 chrome 提升阴影backgroundColor、rounded、paddingex-empty-state-card空状态插画框backgroundColor、rounded、padding、captionTypographyex-toast通知 toast 表面——特性卡片形状 中等阴影backgroundColor、rounded、padding、typography注意这些表面在无阴影主风格之外是唯一允许使用阴影modal 提升阴影、toast 中等阴影的例外场景说明阴影被严格限定在浮层类组件中。八、Dos and Donts使用禁区与红线Do应当将{colors.canvas}#0a0a0a保留为唯一页面表面。该品牌只做深色画布。hero 标题使用{typography.display-xl}Universal Sans weight 400 -2.4px字距——精密感就是声音。所有交互元素一律使用{rounded.pill}9999px——胶囊即品牌。Universal Sans句首大写与 GeistMono 大写眉题、标签、指标计数器配对使用。描边按钮使用半透明白边框——品牌从不在描边胶囊上使用纯白实线边框。Dont禁止不要引入浅色模式对应版本。xAI仅深色画布。不要加粗展示标题。weight 400 就是整条字重刻度。不要广泛使用实心按钮。品牌几乎只用描边胶囊唯一的 Sign Up 白色实心胶囊是罕见例外。不要给卡片加投影。发丝线边框承担层级表达。不要用通用几何无衬线直接替换 Universal Sans 而不调整字距——负字距是品牌的一部分。九、实战把这份 DESIGN.md 放进你的项目xAI 的 DESIGN.md 本质是一份纯 Markdown 的设计系统文档——没有 Figma 导出、没有 JSON schema、无需特殊工具。按仓库 README.md 的说明使用方式只有两步将站点的DESIGN.md复制到你的项目根目录如design-md/x.ai/DESIGN.md这份告诉你的 AI 编码代理build me a page that looks like this代理即读取该文件生成与这套近黑画布、白描边胶囊、双字体排版保持视觉一致的 UI。文档本身已按 Stitch DESIGN.md 格式组织YAML frontmatter 承载机器可读的设计令牌colors / typography / spacing / rounded / components正文承载 Overview、排版原则、组件定义与 Dos and Donts 等人类与 LLM 都可读的语义说明。这也是为什么这份文档同时适合复制进项目直接使用与作为设计参考阅读。在把文档落进代码时建议重点检查三条红线是否被代理遵守背景只允许#0a0a0a系深色按钮必须是9999px圆角描边胶囊唯一实心白胶囊保留给主 CTA展示标题保持 weight 400 与负字距。只有这三条同时成立生成的页面才读起来像 xAI。十、总结从 design-md/x.ai/DESIGN.md 可以看到xAI 的设计系统是减法的极致样本一个近黑画布、一种交互形状胶囊、一套字重400、两种字体Universal Sans Geist Mono、一个间距基准4px——所有丰富度都由排版负字距、大写 mono 眉题与克制插画色的对比提供。对任何想在深色场景中复刻精密、克制、实验室气质的团队而言这份 DESIGN.md 既是一份可直接投喂给 AI 代理的规格文件也是一套值得收藏的极简深色设计方法论。赞分享文档【免费下载链接】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点击查看免费下载相关推荐UFO Server 监控与可观测性实战指南健康检查、性能指标、结构化日志与多通道告警UFO Server 监控与可观测性实战指南健康检查、性能指标、结构化日志与多通道告警 本指南面向 UFO ServerUFO 数字智能体星系的核心服务端文档Ant Design设计语言与视觉体系Ant Design设计语言与视觉体系 Ant Design作为企业级UI设计语言其核心设计价值观为设计者提供了评价设计好坏的内在标准这些价值观不仅指导着设前端UI组件设计系统Notion 设计系统深度解析从 DESIGN.md 视觉规范到 tokens.css 语义化落地Notion 设计系统深度解析从 DESIGN.md 视觉规范到 tokens.css 语义化落地 本文以 design systems/notion httAI 应用人工智能AI 技能设计系统媒体生成上一篇TMI安全最佳实践确保图片分析过程的数据隐私与安全下一篇ViMax异步处理优化asyncio在视频生成流水线中的应用实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
