企业官网建设流程全解析

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

本文以design-systems/premium/DESIGN.md为骨架，结合同目录下的tokens.css、components.manifest.json、manifest.json、USAGE.md及source/审计文件，系统讲解 Open Design 项目中 Premium（专业与商务）风格设计系统的完整规范：从视觉基调、色彩、字体、间距栅格、布局、组件、动效到文案语调与反模式清单，并进一步深入到设计系统 2.0 的 Token 化落地机制。读者读完可掌握一套可直接复制的"规范 → Token → 组件"实施链路，并理解该包在 Open Design 跨品牌设计系统架构中的定位。

1. 包结构与阅读顺序

Premium 是 Open Design 仓库中design-systems/下的一个完整设计系统包，目录结构如下：

design-systems/premium/ ├── DESIGN.md # 视觉意图、约束与反模式（本文主体） ├── USAGE.md # 包契约与使用规则 ├── manifest.json # 包清单（schemaVersion、文件映射、预览页） ├── design-tokens.json # 设计 Token 的 JSON 形态（TOKEN_SCHEMA 契约） ├── tokens.css # Token 的 CSS 实现（唯一事实源） ├── tailwind-v4.css # Tailwind v4 主题映射（派生产物） ├── components.html # 参考组件 Fixture ├── components.manifest.json # 组件清单（选择器、类、元素、Token 引用） └── source/ # 审计证据（evidence.md、token-contract.report.json、tokens.source.json） ├── evidence.md ├── token-contract.report.json └── tokens.source.json

根据 USAGE.md 的规定，使用该包的正确阅读顺序是：

1. 先读USAGE.md，理解包契约；
2. 再读DESIGN.md，把握视觉意图、约束与反模式；
3. 将tokens.css粘贴到首个 artifact 的<style>块中，再编写组件 CSS；
4. 用components.manifest.json做紧凑的组件盘点，需要精确选择器或状态时打开components.html；
5. 需要视觉抽查时查看preview/目录下的页面。

包清单 manifest.json 声明其schemaVersion为od-design-system-project/v1，category为Professional & Corporate，importMode为normalized，并建议搭配 craft 规范中的color与accessibility-baseline使用。值得注意的是，其source.type为bundled，即该包基于 Open Design 精选的捆绑 Fixture 派生而来，而非对上游品牌官网的实时爬取——这一点在 source/evidence.md 中有明确声明。

2. 视觉基调与设计意图

DESIGN.md将 Premium 归类为Professional & Corporate，其核心美学描述为：

Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.

（受 Apple 启发的精奢美学：精确的间距、现代排版、精致打磨的视觉语言。）

三个关键定义字段：

• Visual style（视觉风格）：modern；
• Color stance（色彩立场）：primary, neutral, success, warning, danger——即主色 + 中性色 + 状态色组成的语义色板；
• Design intent（设计意图）：让输出在可被该风格家族识别的同时，保持可用性与可读性（"Keep outputs recognizable to this style family while preserving usability and readability"）。

这一"识别度优先、可用性兜底"的设计意图是全文档的纲：后续所有色彩、排版、间距、动效规范，本质上都是为"一眼可辨 + 好用可读"这两个目标服务。

3. 色彩体系：语义色板与使用规则

3.1 规范层的语义色板

DESIGN.md给出的是风格基座（style foundations）层的语义色板，每一枚颜色都被标记为"Token from style foundations"：

使用规则（原文要点）：

• Favor Primary（#3B82F6）for CTA emphasis——主色只用于 CTA 强调；
• Use Surface（#FFFFFF）for large backgrounds and cards——大面积背景与卡片统一使用 Surface；
• Keep body copy on Text（#111827）for legibility——正文保持深色以保证可读性。

3.2 实现层的 Token 绑定

规范层描述的是"语义角色"，而实际落地时每个品牌会将语义角色映射到具体的 Token 值。当前包中捆绑的 tokens.css 即为 Premium 的具体实现，其头部注释点明这套配色的真实取向：

premium marketing system with warm white canvas, graphite type, and muted bronze signal. （暖白画布、石墨色文字、哑光青铜色信号。）

实际声明的核心色彩 Token：

:root { --bg: #faf8f4; /* 暖白画布底色 */ --surface: #ffffff; /* 表面 */ --surface-warm: #f0e7d8; /* 暖色表面槽位 */ --fg: #1c1b19; /* 石墨色正文 */ --fg-2: #4b4740; /* 次级正文槽位 */ --muted: #746d63; /* 弱化文字 */ --meta: #a06a3b; /* 元信息槽位 */ --border: #ded6c9; /* 常规边框 */ --border-soft: #eee7dc; /* 弱边框槽位 */ --accent: #a06a3b; /* 主强调：哑光青铜 */ --accent-on: #ffffff; /* 强调色上的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #3f8f5f; --warn: #c4872c; --danger: #b84a4a; }

这里存在一个值得注意的分层关系：DESIGN.md中的 Primary/Secondary 属于"风格基座"语义层，而tokens.css中真正被组件消费的是--accent、--bg、--surface等 schema Token。hover/active 状态色采用color-mix(in oklab, ...)在 OKLab 色彩空间动态混合生成，而不是手写第二、第三个色值——这正是"不引入色板外颜色"这一反模式的机制化保障。从 components.manifest.json 的tokens字段可以看到，按钮组实际引用了--accent、--accent-on、--border、--surface、--fg等 Token，与 DESIGN.md 的"主色用于 CTA"规则一一对应。

3.3 契约报告与 Token 分层

source/token-contract.report.json 以 TOKEN_SCHEMA 契约对全部 Token 做了逐条审计：共56 个 Token，全部 56 个有源码背书（sourceBackedTokens: 56），整体评分 100、评级excellent，recommendRebuild: false。Token 分为四层：

• A1-identity（8 个）：品牌身份层，如--bg、--surface、--fg、--muted、--border、--font-display、--font-body；
• A1-structure（18 个）：结构层，如字号刻度、行高、字距、区块纵向间距、容器宽度与 gutter；
• A2（26 个）：派生/组件层，如--accent-hover、--accent-active、--success、--warn、--danger、间距刻度、圆角、阴影、动效时长；
• B-slot（4 个）：槽位层，如--surface-warm、--fg-2、--meta、--border-soft。

报告为每个 Token 记录了sources字段（如tokens.css:7），将契约声明行与 CSS 实现行一一锚定，构成可自动核验的审计链路。

4. 字体排印（Typography）

DESIGN.md规定的排版规范：

• 字号刻度（Scale）：12/14/16/18/24/30/36；
• 字体族（Families）：primary=Inter、display=Inter、mono=JetBrains Mono；
• 字重（Weights）：100/200/300/400/500/600/700/800/900全字重；
• 原则：标题承载风格个性（"Headings should carry the style personality"），正文优先可扫读性与对比度（"body text should optimize scanability and contrast"）。

实现层在tokens.css中给出了更细的排版 Token：字号从--text-xs: 12px一路到--text-4xl: 84px（12/14/16/19/26/40/60/84px），并配套--leading-body: 1.58、--leading-tight: 1.02、--tracking-display: -0.02em（展示标题的轻微负字距）。字体族实现为--font-display: "Canela", Georgia, serif、--font-body: Inter, system-ui, sans-serif、--font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace——衬线展示字体 + 无衬线正文字体 + 等宽代码字体的组合，与 DESIGN.md 的"标题有风格、正文可扫读"原则一致。

从组件清单看，排版组（typographygroup）包含了.eyebrow（眉题）、.lead（导语）与h1/h2/h3，其 Token 引用为--fg-2、--text-4xl、--text-lg、--text-xl，说明次级文字（--fg-2）在排版层级中承担辅助信息的角色。

5. 间距与栅格

DESIGN.md的间距规范非常精简：

• 间距刻度（Spacing scale）：4/8/12/16/24/32；
• 保持各区块与组件间纵向节奏一致（"Keep vertical rhythm consistent across sections and components"）；
• 列与模块对齐到可预测的栅格，避免临时偏移（"avoid ad-hoc offsets"）。

tokens.css将其展开为--space-1: 4px至--space-12: 48px的完整刻度（4/8/12/16/20/24/32/48px），并额外定义了区块纵向间距的响应式 Token：

--section-y-desktop: 112px; --section-y-tablet: 80px; --section-y-phone: 56px;

桌面 112px、平板 80px、手机 56px 的三档区块间距，是"保持纵向节奏"在实现层的直接落地。栅格方面，容器 Token 为--container-max: 1160px，gutter 分三档：桌面36px、平板24px、手机16px。布局组（layoutgroup）的选择器.container与section正是这些 Token 的消费方。

6. 布局与构图

DESIGN.md对布局与构图给出三条原则：

1. 倾向清晰的内容块，内部 padding 一致（"Prefer clear content blocks with consistent internal padding"）；
2. 层级一目了然：标题 → 支撑文案 → 主操作（"headline → support text → primary action"）；
3. 先用留白区分内容，再考虑边框与阴影（"Use whitespace to separate concerns before adding borders or shadows"）。

"先留白、后描边"是一条优先级规则：在引入视觉噪音之前，先依靠间距系统建立内容分组。这与 5.1 的间距刻度、5.2 的响应式区块间距共同构成完整的垂直节奏体系。从组件清单的cards组看，.card-row、.panel、.panel-head、.tile等卡片类引用的 Token 集中在--border、--elev-raised、--radius-lg、--surface——即卡片通过"表面色 + 大圆角 + 抬起阴影 + 细边框"来建立层级，符合"留白优先"的构图思想。

7. 组件规范

DESIGN.md对核心组件的约定：

• 按钮（Buttons）：主操作使用 Primary（规范层#3B82F6/ 实现层--accent），次级操作保持中性（"secondary actions stay neutral"）；
• 输入框（Inputs）：强 focus-visible 状态、清晰标签、可预测的错误提示；
• 卡片/区块（Cards/sections）：全页面统一使用一致的圆角、间距与抬升策略。

components.manifest.json给出了这套组件的完整盘点：1 个样式块、48 个选择器、26 个类、19 个元素，按 9 个组件组组织：

清单还记录了 Token 使用统计：4 处颜色表达式、24 个像素值、4 处硬编码字体族（literals字段），未声明引用与未使用声明的 Token 均为 0/7 的合理范围（--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn已声明但当前 Fixture 未引用，属于为完整契约预留的 Token）。

8. 动效与交互

DESIGN.md的动效规范：

• 微妙过渡：强调 Primary（#3B82F6）作为交互信号；
• 时长：默认短促且有目的的过渡，150–250ms，使用稳定缓动；
• 状态完备：hover、focus-visible、active、disabled、loading 五种状态必须显式可感知。

实现层的动效 Token 与此呼应：

--motion-fast: 170ms; --motion-base: 280ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* 先快后缓的出场缓动 */

--motion-fast: 170ms落在规范 150–250ms 区间内，是按钮、焦点等微交互的首选时长；--motion-base: 280ms用于页面级稍大的过渡；--ease-standard这条 cubic-bezier 曲线（0.22, 1, 0.36, 1）前段快速启动、后段平滑收尾，是"短促而有目的"这一原则的数学化表达。按钮组在清单中明确引用了--motion-fast与--ease-standard，说明.btn的 hover/active 状态正是这套动效 Token 的消费场景。

9. 文案与品牌语调

DESIGN.md对文案（Voice & Brand）的要求：

• 语调与视觉风格一致：简洁、自信、产品相关（"concise, confident, and product-specific"）；
• 微文案（microcopy）以行动为导向，避免空泛填充语（"action-oriented and avoid generic filler language"）；
• 标题保留风格个性，UI 标签保持字面直白（"Preserve the style identity in headlines while keeping UI labels literal and clear"）。

这条"标题有风格、标签要直白"的双轨原则与排版章的"标题承载个性、正文可扫读"互为表里——品牌个性集中在叙事性文字上，功能性 UI 文案始终服务于可用性，与 Premium 整体"精致但不妨碍使用"的设计意图闭环。

10. 反模式清单（Anti-patterns）

DESIGN.md明确列出四条红线，是评审与自动校验时的重要依据：

1. 禁止引入色板外的颜色——当现有 Token 能解决问题时，不得新造颜色（"Do not introduce off-palette colors when an existing token can solve the problem"）。实现层通过color-mix(in oklab, ...)派生 hover/active 色，正是这条规则的机制保障；
2. 禁止扁平化层级——不得对所有文本使用同一字号/字重（"Do not flatten hierarchy by using the same type size/weight for all text"）；
3. 禁止装饰性效果损害可读性与可访问性（"Do not add decorative effects that reduce readability or accessibility"）；
4. 禁止在同一界面混用无关视觉隐喻（"Do not mix unrelated visual metaphors in the same interface"）。

11. 落地链路：从规范到可运行产物

Premium 包在 Open Design 中不是一份静态文档，而是一条完整的、可校验的交付链路：

1. 规范层：DESIGN.md 定义意图与约束；
2. 事实源：tokens.css 中的:rootToken 块是唯一事实源，使用规则明确要求"避免在复制的:root块之外使用裸十六进制色值"、"不得脱离tokens.css单独重定义 Tailwind 或 design-token 值"；
3. 派生产物：tailwind-v4.css 通过@theme将每个 Token 映射为 Tailwind 主题变量（如--color-accent、--text-4xl、--shadow-raised、--duration-fast、--spacing-section-desktop），可直接生成bg-accent、text-4xl、shadow-raised等工具类；design-tokens.json 则以od-design-tokens/v1格式输出同一契约的 JSON 形态，供非 CSS 消费方使用；
4. 组件层：components.html 与 components.manifest.json 提供可直接复制的参考标记与选择器盘点；
5. 审计层：source/token-contract.report.json 将 56 个 Token 全部锚定回tokens.css的具体声明行；source/evidence.md 声明该包为 curated bundled fixture 的回填产物，并规定design-tokens.json与tailwind-v4.css应从报告与样式表重新生成而非手工编辑；
6. 视觉抽查层：preview/目录提供colors.html、typography.html、spacing.html三个预览页，分别对应 manifest.json 的preview.pages声明，供最终视觉核对。

这条链路与 USAGE.md 的 Do/Avoid 规则完全对应：保留 schema Token 名称以保证跨品牌切换可靠、用--accent承载主操作/链接/焦点态、优先复用清单中的组件组、以source/作为审计证据，同时避免新增清单中不存在的组件配方。对于需要在 Open Design 中复用或仿照此模式构建新品牌包的使用者而言，这一"规范 → Token → 派生产物 → 组件 → 审计"的五段式结构即是可直接套用的模板。

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