企业官网建设流程全解析

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

本文以仓库内设计系统包 design-systems/openai 的官方规范文档为主体，系统拆解 OpenAI 风格设计系统的视觉理念、色彩令牌、字体排印层级、组件样式、间距动效与使用边界，并结合仓库中的 tokens.css 实现、TOKEN_SCHEMA 契约与 USAGE.md 使用指南，讲清楚"规范如何被翻译成可复制的 CSS 令牌，以及令牌如何被审计校验"。读完你既能按规范从零搭出这套"冷静、近单色、编辑主义"的界面，也能理解它在 OpenDesign 设计系统生态中的工程化落地方式。

OpenAI 风格设计系统（Design System Inspired by OpenAI）是一套被收录在 OpenDesign 仓库 design-systems/openai 目录下的品牌设计语言包。它的核心气质是：以深黑青（teal-black）为锚点的近乎单色体系，搭配大量留白与编辑主义衬线标题——界面读起来像一座向公众开放的研究实验室：临床、克制、刻意安静。本包同时是 OpenDesign Design System 2.0 规范（TOKEN_SCHEMA 四层令牌契约）的样板实现之一，规范文件为 DESIGN.md（仓库同时维护多语言版本，本文依据的 DESIGN-uk.md 与其内容一致）。

1. 视觉主题与氛围：把模型输出放在最前台

OpenAI 的产品表面读起来像一座向公众开放的研究实验室——临床、克制、刻意安静。页面背景是真正的纯白（#ffffff），叠在近乎黑色的墨色（#0d0d0d）之上，墨色带有一丝几乎不可察觉的青绿底色，因此连文字都显得微微偏冷，而非咄咄逼人的深黑。这种色度中性带来的结果是：模型输出、代码和散文被推到最前台，而不是它们周围的"镀铬边框"。

系统最具辨识度的手法，是使用Söhne（或其系统替身Inter）配合克制的字重——正文 400、导航与标签 500、强调 600——并搭配Signifier，一款用于编辑主义展示标题的当代衬线字体。当大多数 AI 品牌偏向未来主义时，OpenAI 的衬线标题赋予了产品一种安静的文字气息，仿佛每一条公告都是一篇随笔。

形状系统整体柔和：8–12px 圆角、标签与芯片用 9999px 胶囊形、任何角落都没有生硬尖角。区块之间的过渡用留白而非分隔线来标识；当边界出现时，它们是#e5e5e5的发丝线，读起来像"颜色的缺席"而非"颜色的在场"。

关键特征（Key Characteristics）：

• 纯白画布（#ffffff）+ 深黑青墨色（#0d0d0d）
• Söhne / Inter 使用克制的字重（400、500、600）——克制优先于强调
• Signifier 衬线字体用于编辑主义展示标题
• 全站 8–12px 柔和圆角；芯片使用 9999px 胶囊形
• 发丝线边框（#e5e5e5）用得很少；留白是主要的分隔手段
• 深青色的单色插画——标志中没有渐变
• 慷慨的行高（1.55–1.65），字距趋近于零

2. 色彩系统：中性为主、青色点睛

原规范将整套色板按角色划分为六组，本文完整继承如下：

2.1 主色（Primary）

2.2 表面与背景（Surface & Background）

2.3 品牌强调色（Brand Accent）

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

2.5 语义色与边框色（Semantic & Border）

2.6 从规范到 CSS 令牌：tokens.css 的映射

规范中的色彩角色在 tokens.css 的:root块中被一一绑定为语义化 CSS 变量，例如：

:root { --bg: #ffffff; /* pure white — 主背景 */ --surface: #f5f5f5; /* pearl — 卡片表面、抬升面板 */ --surface-warm: #fafafa; /* mist — 区块断裂、页脚 */ --fg: #0d0d0d; /* ink black — 主文本、品牌标志 */ --fg-2: #1a1a1a; /* soft black — 替代标题 */ --muted: #6e6e6e; /* slate — 次级文本、说明 */ --meta: #9b9b9b; /* ash — 三级文本、占位符 */ --border: #e5e5e5; /* hairline — 标准分隔线 */ --border-soft: #ededed; /* 白色表面上的卡片描边 */ --accent: #10a37f; /* OpenAI Teal — 链接、高亮、CTA */ --accent-on: #ffffff; --accent-hover: #0a7a5e; /* teal deep — 悬停/按压 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #10a37f; /* 青绿 — 成功路径 */ --warn: #f5a623; /* 琥珀 — 建议性状态 */ --danger: #ef4146; /* 错误 — 校验、破坏性操作 */ }

值得注意的两个工程细节：一是按压态--accent-active使用现代 CSS 的color-mix(in oklab, ...)由品牌青绿动态派生，而非硬编码新色值；二是规范中的语义色 Error/Warning 在令牌层直接复用--danger/--warn命名，与 token-schema.ts 中的语义令牌槽位一一对应。此外，契约审计文件 source/token-contract.report.json 记录了 56 个令牌的声明来源（如--bg指向tokens.css:34），并给出 100 分的契约完整度评分，证明该包对 TOKEN_SCHEMA 的覆盖是完整的。

3. 字体排印系统：衬线给灵魂、无衬线给系统

3.1 字体族（Font Family）

3.2 层级表（完整继承）

3.3 原则（Principles）

• 克制即身份：字重上限为 600；700+ 会显得不符合品牌调性。层级由尺寸和颜色决定，而非字重。
• 衬线给灵魂，无衬线给系统：Signifier 只出现在编辑主义展示时刻；产品界面只用无衬线。
• 大尺寸用负字距：display 尺寸使用 -0.02em；到 16px 时字距回归为零。

在 tokens.css 中，这套层级被翻译为--text-xs（12px）到--text-4xl（56px）的完整字号刻度，以及--leading-body: 1.65、--leading-tight: 1.08、--tracking-display: -0.02em三个关键节奏变量：

--font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif; --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --text-xs: 12px; /* label — 眉题、大写导航 */ --text-sm: 13px; /* caption — 元数据、徽章 */ --text-base: 16px; /* body — 标准阅读 */ --text-lg: 18px; /* body large — 导语段落 */ --text-xl: 20px; /* h3 — 子区块 */ --text-2xl: 28px; /* h2 — 区块标题 */ --text-3xl: 40px; /* h1 — 页面标题 */ --text-4xl: 56px; /* display — Signifier 编辑主义英雄区 */

4. 组件样式规范

4.1 按钮（Buttons）

Primary（主按钮）

• 背景：#0d0d0d；文本：#ffffff
• 内边距：10px 18px
• 圆角：芯片用 9999px（全胶囊），矩形 CTA 用 12px
• 悬停：背景变#1a1a1a
• 用途：主 CTA、"Try ChatGPT"、"Sign in"

Secondary（次按钮）

• 背景：#ffffff；文本：#0d0d0d
• 边框：1px solid#e5e5e5
• 内边距：10px 18px；圆角：12px
• 悬停：背景#fafafa，边框#d4d4d4

Brand Accent（品牌强调按钮）

• 背景：#10a37f；文本：#ffffff
• 内边距：10px 18px；圆角：12px
• 悬停：#0a7a5e
• 用途：高亮升级 CTA、成功路径

4.2 卡片（Cards）

• 背景：#ffffff；边框：1px solid#ededed
• 圆角：16px；内边距：24px–32px
• 阴影：默认无；悬停时0 4px 16px rgba(13,13,13,0.06)

4.3 输入框（Inputs）

• 背景：#ffffff；边框：1px solid#e5e5e5
• 圆角：12px；内边距：12px 14px
• 聚焦态：边框#10a37f，外圈光晕0 0 0 3px rgba(16,163,127,0.12)

4.4 胶囊与标签（Pills & Tags）

• 背景：#f5f5f5；文本：#3c3c3c
• 内边距：4px 10px；圆角：9999px；字体：12px / 500

以上组件样式在 tokens.css 中有对应的圆角、抬升与聚焦令牌：--radius-sm: 12px（按钮、输入框）、--radius-md/lg: 16px（卡片）、--radius-pill: 9999px（胶囊）；--elev-flat: none、--elev-raised: 0 4px 16px rgba(13,13,13,0.06)（卡片悬停阴影）；--focus-ring: 0 0 0 3px rgba(16,163,127,0.12)（输入聚焦光晕）。仓库的 components.manifest.json 记录了该组件夹具共含 41 个选择器、18 个类、24 个元素，所有可见值均来自 tokens.css——这正是"规范 → 令牌 → 组件"单向数据流的体现。

5. 间距与布局（Spacing & Layout）

• 基准单位：4px。刻度：4、8、12、16、24、32、48、64、96、128。
• 容器：max-width 1200px；移动端内边距 24px，桌面端 48px。
• 区块节奏：主要区块之间垂直间距 96–128px；移动端 64px。
• 网格：桌面端 12 列，移动端 4 列，间距 24px。

在 tokens.css 中，这套布局规范被固化为可复用的令牌：--space-1（4px）到--space-16（64px，品牌扩展，用于主要页面区块间的大间隔），区块节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px，以及布局--container-max: 1200px与三级 gutter 变量：

--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 48px; --container-max: 1200px; --container-gutter-desktop: 48px; --container-gutter-tablet: 24px; --container-gutter-phone: 24px;

6. 动效规范（Motion）

• 时长：悬停 150–220ms；布局过渡 280–360ms。
• 缓动：cubic-bezier(0.16, 1, 0.3, 1)（平滑出）用于元素入场。
• 克制：无视差、无滚动劫持，只允许细微的淡入与位移。

对应令牌为 tokens.css 中的--motion-fast: 150ms、--motion-base: 220ms与--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)。

7. 使用边界（Usage Guardrails）

• 中性编辑主义克制、柔和圆角与克制的强调色使用必须三者一起保持；单靠绿色强调色无法营造出 OpenAI 风格表面。
• Signifier 风格的展示时刻只用于编辑主义或公告性层级，产品控件必须留在无衬线系统中。
• 避免装饰性动效、厚重的阴影和超大装饰卡片；系统应当让人感觉平静、易读、刻意。

8. 工程落地：TOKEN_SCHEMA 四层契约与 OpenDesign 生态

理解这套设计系统的工程价值，不能只看视觉规范本身，还要看它如何被 OpenDesign 的 Design System 2.0 体系约束。契约定义在 packages/contracts/src/design-systems/token-schema.ts，它规定生态内每个品牌的tokens.css令牌必须严格归属四层之一：

• A1-identity：必填。令牌本身就是品牌（如--bg、--fg、--accent、字体栈），没有任何回退可以替代。
• A1-structure：必填。令牌是结构性决策（字号刻度、布局网格、区块节奏），各品牌必须自行撰写。
• A2：最终tokens.css中必填，但 design-systems/_schema 下的defaults.css提供了合理回退，derive 脚本（PR-B）会在品牌文档未指定时内联该值。设计这个"必填但有回退"层级的原因是：产物由 Agent 把某个品牌的:root块直接粘贴进单个<style>，没有全局默认样式表的运行时级联——若粘贴的 tokens.css 缺失某个var()目标，transition: var(--motion-fast)会退化成空规则而被浏览器丢弃。
• B-slot：可选槽位。品牌没有更丰富层级时可别名到同名兄弟令牌（如--fg-2可aliasTo: var(--fg)），引用 B-slot 的组件永远能解析成功。
• C-extension：品牌专属令牌，必须显式声明，通用跨品牌组件不得引用。

OpenAI 包作为样板，其 source/token-contract.report.json 显示 56 个令牌全部有tokens.css源码背书，A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个，评分 100、评级 excellent——即当前版本无需重建。这是理解"规范如何被机器校验"的最佳参考样例。

9. 在项目中使用本设计系统包

按 USAGE.md 的推荐阅读与使用顺序：

1. 先读USAGE.md理解包契约；
2. 再读DESIGN.md（或本文对应章节）理解视觉意图、约束与反模式；
3. 把tokens.css的:root令牌块粘贴到首个产物的<style>块中，再写组件 CSS——不要在复制的:root令牌块之外使用裸 hex 色值；
4. 使用 components.manifest.json 查看紧凑组件清单；需要精确选择器或状态时打开 components.html；
5. 需要视觉抽查时查看 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页。

包清单 manifest.json 记录了整体结构：DESIGN.md（设计规范）、tokens.css（令牌源）、design-tokens.json与tailwind-v4.css（派生输出，应从报告与令牌样式表重新生成而非手工编辑）、components.html（组件夹具），并标注source类型为bundled（基于 OpenDesign 精选捆绑夹具，不声称对上游品牌仓库做过全新抓取）。

若你的项目使用 Tailwind v4，可直接通过 tailwind-v4.css 接入——它用@theme块把每个 CSS 变量映射为 Tailwind 工具类令牌（如--color-accent、--font-sans、--spacing-section-desktop、--shadow-raised），实现"设计令牌一处定义、框架工具类处处可用"。注意其文件头明确声明"Derived from tokens.css. Keep tokens.css as the source of truth"，即所有派生产物都以 tokens.css 为唯一事实来源。

10. 小结

OpenAI 风格设计系统的价值在于它的"双重身份"：视觉上，它示范了如何用纯白画布、深黑青墨色、衬线展示标题与克制的青绿强调色，营造出一种冷静、临床、编辑主义的产品气质；工程上，它展示了 OpenDesign Design System 2.0 如何把一份 DESIGN 文档翻译为结构化的 CSS 令牌，并用 TOKEN_SCHEMA 四层契约 + token-contract.report.json 审计保证每个令牌都有据可查、可跨品牌切换。复制这套系统时，请始终遵循其使用边界：把留白当分隔线、把青绿留给唯一焦点、把衬线留给公告、把 600 以上的字重留给"不适用"。

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