Expo DESIGN.md 实战拆解：基于 awesome-design-md 仓库的 React Native 开发者平台设计令牌体系

• 文档

本文以 design-md/expo/DESIGN.md 为绝对主体，系统拆解 Expo 官网设计语言：从 YAML 前端元数据中的颜色、字体、圆角、间距与组件令牌，到"纯白画布 + 纯黑 CTA + 设备样机 Hero"的开发者平台美学，再到响应式策略与设计纪律。读完你可以直接把这套 DESIGN.md 复制进自己的项目，让 AI Agent 生成视觉一致、风格克制的高质量 UI，也能学会像设计系统工程师一样阅读和分析任何品牌的设计令牌。

DESIGN.md 是什么？这份文档在仓库中的位置

DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档概念：它就是一份 Markdown 文件，无需 Figma 导出、无需 JSON Schema、无需额外工具，把它放进项目根目录，任何 AI 编码 Agent 或 Google Stitch 都能立刻理解界面应该长什么样——Markdown 是 LLM 阅读效率最高的格式，无需解析与配置。本仓库即"从真实网站提取、可直接投入使用的 DESIGN.md 集合"，README.md 中将其与AGENTS.md做了分工对比：AGENTS.md告诉编码 Agent"如何构建项目"，DESIGN.md告诉设计 Agent"项目看起来应该是什么样"。

Expo 的设计系统文档位于 design-md/expo/DESIGN.md，其文件头声明version: alpha，并配有一份指向在线预览与下载页的 design-md/expo/README.md。整个文档采用"YAML 前端元数据 + 自然语言章节"的双层结构：前端元数据（colors / typography / rounded / spacing / components）是机器可直接读取的令牌字典；正文章节则负责解释每个令牌的语义、用法与边界，供 Agent 理解设计意图。

文档骨架：一份 DESIGN.md 的完整章节地图

README.md 中列出了仓库所有 DESIGN.md 遵循 Stitch 规范并扩展的九个模块。对照来看，Expo 这份文档覆盖并细化了其中的主要模块，并补充了迭代指南与已知空白：

这种结构对 Agent 极其友好：前端元数据保证"可计算"，正文章节保证"可理解"，两者结合即可生成既符合令牌数值、又符合品牌气质的 UI。

色彩体系：一个克制的黑白蓝三角

Expo 的色彩策略是整份文档的哲学核心——唯一品牌电压是纯黑，蓝色只作内联链接，天蓝渐变只属于 Hero。前端元数据中共声明 34 个颜色令牌，全部使用{colors.xxx}引用，禁止内联 hex。

品牌与强调色

• Black（{colors.primary}—#000000）：主 CTA 填充色。文档明确强调"Used scarcely"（用得极少）。
• Black Active（{colors.primary-active}—#1a1a1a）：按压态，比纯黑亮一档。
• Text Link Blue（{colors.text-link}—#0d74ce）：长文本中的内联正文链接。作用域极窄——绝不用于 CTA。
• Legal Link Blue（{colors.text-link-secondary}—#476cff）：页脚法律文案中的内联链接。
• Bright Cyan（{colors.accent-link-bright}—#47c2ff）：仅在文档组件内的链接中极少量使用。

表面色

• Canvas（{colors.canvas}—#ffffff）：纯白页面底色。
• Canvas Soft（{colors.canvas-soft}—#fafafa）：细微的交替色带。
• Surface Card（{colors.surface-card}—#ffffff）：纯白卡片。
• Surface Strong（{colors.surface-strong}—#f0f0f3）：徽章、生态伙伴磁贴、次级按钮。
• Surface Dark（{colors.surface-dark}—#171717）：暗色特性卡片、代码块、IDE 样机、高亮定价卡。
• Surface Dark Elevated（{colors.surface-dark-elevated}—#1a1a1a）：暗色卡片内部再亮一档的层级。

大气背景

• Sky Light（{colors.gradient-sky-light}—#cfe7ff）+Sky Mid（{colors.gradient-sky-mid}—#a8c8e8）：首页 Hero 背后的柔和天蓝渐变洗。不是品牌动作色，仅作为氛围背景。

细线（Hairline）

• Hairline（{colors.hairline}—#f0f0f3）：默认 1px 分隔线。
• Hairline Soft（{colors.hairline-soft}—#f5f5f7）：更浅的分隔线。
• Hairline Strong（{colors.hairline-strong}—#dcdee0）：更强的面板描边。

文本色

• Ink（{colors.ink}—#171717）：显示标题与正文强调，近黑。
• Body（{colors.body}—#60646c）：默认正文，偏冷的灰。
• Body Strong（{colors.body-strong}—#171717）：与 ink 相同。
• Muted（{colors.muted}—#999999）：副标题。
• Muted Soft（{colors.muted-soft}—#cccccc）：禁用文本。
• On Primary（{colors.on-primary}—#ffffff）：黑底 CTA 上的白字。
• On Dark（{colors.on-dark}—#ffffff）：暗色卡片上的白字。
• On Dark Soft（{colors.on-dark-soft}—#b0b4ba）：暗色面上的柔和米白。

语义色

• Warning（{colors.accent-warning}—#ab6400）：文档警示框内的警告文本。
• Preview（{colors.accent-preview}—#8145b5）："Preview"（预览）标签色。
• Success（{colors.semantic-success}—#16a34a）：确认成功态。
• Error（{colors.semantic-error}—#eb8e90）：表单校验错误。

从元数据看色彩的组织方式

观察前端元数据可以发现一条实现层面的规律：颜色令牌按"品牌 → 表面 → 背景 → 细线 → 文本 → 语义"分组声明，且文本色单独成组（ink/body/muted/on-*）。这意味着在生成 UI 时，Agent 可以按角色取色而不是按直觉取色——例如暗色卡片一律用surface-dark承载、文字一律用on-dark/on-dark-soft，从而天然保证对比度一致。

字体系统：Inter 600 显示、400 正文，JetBrains Mono 覆盖一切代码面

字体家族

Inter是唯一无衬线家族，覆盖所有文本角色；JetBrains Mono承载所有代码面；回退栈为-apple-system, system-ui, sans-serif。Expo 不引入自定义字体，文档明确点出这种选择的动机：信任 Inter 的编辑性中立（editorial neutrality）。Known Gaps 章节补充了现实依据：Inter 与 JetBrains Mono 均免费可得，无授权顾虑。

完整层级表

三条排版纪律

• 显示字重锁定 600——自信但不夸张，Inter 600 比 700 更耐读。
• 显示标题一律负字距——从 -0.5px 到 -1.92px，越大的字号负字距越深。
• 每个代码面都是 JetBrains Mono——代码块、IDE 样机、文档内代码无一例外。

值得注意的是button的行高是 1.0、nav-link是 1.4：交互控件的排版参数与正文刻意不同，这说明设计令牌需要区分"阅读型"与"点击型"文本，Agent 生成按钮时不应套用正文行高。

布局系统：96px 章节节奏下的编辑部式留白

间距系统

• 基础单位：4px。
• 令牌刻度：{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.base}16px ·{spacing.md}20px ·{spacing.lg}24px ·{spacing.xl}32px ·{spacing.xxl}48px ·{spacing.section}96px。
• 区块纵向 padding 统一为 96px（{spacing.section}），是整站节奏的锚点。

网格与容器

• 最大内容宽度约1200px。
• 编辑性正文采用12 列网格。
• 特性卡片网格：桌面端 Hero 分割区 2 列、利益点网格 3 列。
• 生态伙伴磁贴网格：桌面端 8 列。
• 页脚：桌面端 5 列。

留白哲学

编辑部式宽松节奏（generous editorial pacing）。纯白画布不与 Hero 的天蓝渐变洗争抢注意力；而工作流等密集区块内的卡片间距收紧到 16–24px。也就是说：章节之间用 96px 拉开呼吸感，卡片之间用 16–24px 保持紧凑。

深度与层级：一次柔投影，一次暗反转

文档用一个表格完整定义了六层深度体系：

这套体系的克制之处在于：全站只有一档阴影，层级区分主要靠描边（hairline）与暗反转，而不是层层堆叠的投影；天蓝渐变只作为 Hero 的氛围深度，不伪装成品牌色。装饰性深度方面，文档点明"设备样机合成图"才是页面镀铬（page chrome）——MacBook + iPhone 展示真实 Expo 开发界面，替代传统插画成为视觉主角。

形状系统：8px CTA、12px 卡片、胶囊只属于徽章

设计要点：紧凑的开发者人体工学圆角——8px 给 CTA、12px 给卡片；胶囊几何（pill）严格保留给徽章，绝不给 CTA。这条规则在 Do's and Don'ts 中被再次强调。

组件体系：从导航到定价的完整令牌实例

前端元数据中的components区块声明了 20 个组件令牌，正文逐一给出了规格。以下按功能分组整理（含可直接照搬的数值）：

顶部导航top-nav

背景{colors.canvas}、文本{colors.ink}、高度64px。布局：左侧 Expo wordmark，中间主菜单（Tools / Workflows / EAS / Pricing / Docs / Showcase），右侧 Sign In + Get started CTA。菜单字号即{typography.nav-link}（14px / 500）。

按钮四态

• button-primary——纯黑药丸。背景{colors.primary}、文本{colors.on-primary}、字体{typography.button}（14px / 500）、内边距10px × 18px、高度40px、圆角{rounded.md}（8px）。
• button-primary-active——按压态，背景切换为{colors.primary-active}（#1a1a1a）。
• button-secondary——白卡 + 1px{colors.hairline-strong}描边。背景{colors.surface-card}、文本{colors.ink}、内边距 9px × 17px、高度 40px。
• button-tertiary-text——内联蓝色文字链接。背景透明、文本{colors.text-link}。

四个按钮令牌恰好覆盖"主动作 / 按压 / 次动作 / 文字链接"四种语义，是 Agent 生成任何 CTA 区块时的查表对象。

Hero 与设备样机

• hero-band——背景{colors.canvas}，标题使用{typography.display-mega}（64px / 600 / -1.92px），副标题{typography.body-md}，单一主 CTA，下方是设备样机合成图，内边距 96px。
• device-mockup-card——MacBook + iPhone 双层合成图，展示真实 Expo 开发界面（MacBook 内为 EAS Build dashboard 或 Expo Studio 截图，iPhone 覆盖层显示 Expo Go 中运行的应用）。背景{colors.surface-card}、圆角{rounded.xl}（16px）、内边距 0。

卡片族

• feature-card——白卡：{colors.surface-card}背景、{colors.ink}文本、{typography.title-md}、圆角{rounded.lg}、内边距 24px、1px{colors.hairline-strong}描边。
• feature-card-dark——暗反转变体：{colors.surface-dark}背景、{colors.on-dark}文本，形状相同。
• workflow-step-card——"让应用抵达每一台设备"工作流行的步骤卡：白底、{colors.body}文本、圆角 12px、内边距 20px；内部为 32px 方形图标底板 + 步骤号 + 标签 + 正文。
• workflow-step-icon——方形底板：{colors.surface-strong}背景、圆角{rounded.md}、尺寸 32px。
• testimonial-card——引语卡：白底、{colors.body}文本、圆角 12px、内边距 24px。

代码与 IDE

• code-block——内联代码块：{colors.surface-dark}背景、{colors.on-dark}文本、{typography.code}（JetBrains Mono 13px）、圆角 12px、内边距 20px。白字衬暗底。
• ide-mockup-card——风格化 IDE 样机：暗底、圆角 12px，多窗格编辑器 + 终端预览。

定价

• pricing-tier-card——标准定价档：白底、圆角 12px、内边距 32px、1px{colors.hairline-strong}描边。
• pricing-tier-featured——高亮档：{colors.surface-dark}背景、{colors.on-dark}文本，暗反转突出。

生态伙伴磁贴ecosystem-tile

TypeScript、React、Sentry 等伙伴 logo 的方形底板：{colors.surface-card}背景、圆角{rounded.md}、尺寸64px、1px{colors.hairline}描边。

表单与标签

• text-input——输入框：白底、{colors.ink}文本、圆角 8px、内边距 12px × 16px、高度44px、1px{colors.hairline-strong}描边；聚焦态描边加粗为 2px ink。
• badge-pill——小号大写胶囊徽章：{colors.surface-strong}背景、{colors.ink}文本、{typography.caption-uppercase}（11px / 600 / 0.88px 字距 / 大写）、圆角{rounded.pill}、内边距 4px × 10px。

CTA 与页脚

• cta-band——页脚前 CTA 带：纯白底、居中{typography.display-lg}标题、单一黑色药丸 CTA、内边距 96px。
• footer-light——收尾白页脚：{colors.canvas}背景、{colors.body}文本、5 列链接、内边距 64px × 48px。
• footer-link——页脚链接：背景透明、{colors.body}文本、{typography.body-sm}。

从组件令牌的整体布局可以看到清晰的对照关系：button-primary/feature-card与button-primary的暗反转对应pricing-tier-featured、feature-card-dark、code-block等暗面组件，Agent 只需要掌握"白卡 ↔ 暗卡"的映射规律就能成体系地切换深浅场景。

Do's and Don'ts：设计纪律红线

Do（应当）

• 将{colors.primary}（纯黑）只保留给主 CTA。
• {colors.text-link}（蓝）只用于内联正文链接——绝不用于 CTA 或按钮。
• 所有 CTA 圆角统一为{rounded.md}（8px）——开发者方言。
• 显示用 Inter 600、正文用 Inter 400。
• 每个代码面都用 JetBrains Mono 渲染。
• Hero 必须搭配设备样机合成图——它是页面镀铬。

Don't（禁止）

• 不要引入饱和的品牌动作色，黑色是唯一 CTA 填充。
• 不要把蓝（{colors.text-link}）用在 CTA 上，它只属于内联链接。
• 不要把显示字重降到 600 以下或抬到 700 以上。
• 不要在 CTA 上使用全胶囊圆角——胶囊只属于徽章。
• 不要把天蓝渐变洗复制到 Hero 之外。
• 不要从第三方组件（如 cookie 同意、OneTrust）中提取 CTA 颜色——品牌的 CTA 只以真实页面 CTA 上出现的为准。

最后一条尤其值得注意：它约束的是"数据采集边界"——当分析工具从页面 DOM 抓取颜色时，第三方小组件的颜色会被误抓为品牌色，文档明确要求排除这类污染源，这与仓库 README"提取的令牌代表公开可见的 CSS 值"的定位是一致的。

响应式行为：断点、触摸目标与折叠策略

断点表

触摸目标

• 主 CTA 高度 40px——达到 WCAG AA，加内边距可满足 AAA。
• 搜索输入框 44px——直接达到 AAA。

折叠策略

• 顶部导航在768px以下切换为汉堡菜单。
• 设备样机在移动端从 MacBook + iPhone 合成图坍缩为单一 iPhone 预览。
• 特性网格按 3 列 → 2 列 → 1 列降级。
• 生态磁贴网格按 8 列 → 4 列 → 3 列 → 2 列降级。

迭代指南：像维护设计系统一样更新这份文档

文档末尾给出了 7 条迭代纪律，这同时也是任何人继续完善这份 DESIGN.md 的操作手册：

1. 一次只聚焦一个组件。
2. CTA 默认{rounded.md}（8px），卡片用{rounded.lg}（12px）。
3. 变体单独成条目（如button-primary-active、feature-card-dark各占一条）。
4. 全程使用{token.refs}引用，绝不内联 hex。
5. 悬停态永不写进文档（由 Agent 按交互规范自行处理）。
6. 显示用 Inter 600、正文用 Inter 400、代码用 JetBrains Mono。
7. 黑色永远是唯一 CTA 颜色，text-link 蓝永远只做内联链接。

这与仓库 CONTRIBUTING.md 中"修正错误的 hex、补齐缺失令牌、加强描述"的改进路径完全一致——令牌引用规范化是保证 Agent 输出一致性的前提。

Known Gaps：这份文档诚实的边界

• Inter 与 JetBrains Mono 均免费可得——无授权风险。
• 动画时序（设备样机视差、Hero 入场动画）不在范围之内。
• 应用内界面（EAS dashboard 交互、Expo Go 模拟器）仅通过营销样机部分捕获。
• 聚焦态以外的表单校验状态在已采集页面上不可见。

这些"已知空白"恰恰是文档质量的加分项：它明确划定了什么该由这份设计令牌负责、什么需要 Agent 根据交互规范自行补足，避免生成器在缺失信息上盲目猜测。

落地使用：把 Expo 设计系统接入你自己的项目

按照 README.md 的 How to Use 流程，两步行即可：

1. 把 design-md/expo/DESIGN.md 复制到你的项目根目录（保持文件名DESIGN.md不变，Agent 才会自动识别）。
2. 对 AI 编码 Agent 说"build me a page that looks like this"（参照 README 中的原话），Agent 会读取 YAML 令牌与正文规则，生成与 Expo 设计语言一致的高质量 UI。

使用前可以对照几点检查自己的项目是否适配这份设计语言：你的页面是否以纯白画布为主？是否只需要一个"主 CTA 纯黑 + 内联链接蓝色"的极简调色板？代码块是否希望呈现 JetBrains Mono 的终端质感？如果是，Expo 这份"低调自信的基础设施品牌"风格（文档 frontmatter 中description字段的原话是 "a quietly-confident infrastructure brand"）就是开箱即用的最佳起点。

仓库采用 MIT 协议（见 LICENSE），所有 DESIGN.md 均为"按原样"提供的公开可见 CSS 值提取物，不主张对任何站点视觉身份的拥有权，可放心用于 AI 生成一致 UI 的学习与实践。

• 文档