企业官网建设流程全解析

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

本指南以 design-systems/discord 设计包为核心骨架，系统拆解 Discord 风格设计系统的视觉基调、色彩令牌、排版层级、组件样式、间距布局与动效规范，并结合 tokens.css 的 CSS 变量落地、components.html 的参考组件实现与 USAGE.md 的包契约，给出可直接复制的实战方案。读完你将掌握：如何用三层明度阶梯构建 dark-first 界面、如何将 Blurple 定位为唯一饱和强调色、如何用 4px 基准网格组织聊天类布局，以及如何把整套规范封装为可复用的 Design Token 供 Tailwind v4 消费。

1. 设计系统包结构：从规范到可运行产物

OpenDesign 仓库将每个品牌设计系统组织为自包含的包（package）。以 Discord 为例，design-systems/discord/目录同时承载了人类可读的规范文档与机器可消费的产物：

阅读顺序遵循 USAGE.md 的约定：先读 USAGE.md 理解包契约 → 再读 DESIGN 文档把握视觉意图 → 将tokens.css粘贴进首个 artifact 的<style>块 → 用components.manifest.json做组件盘点 → 需要时用preview/页面做视觉检查。

manifest.json 记录了这个包的来源类型为bundled，即"OpenDesign 精选内置夹具"，不声明对上游品牌仓库的实时抓取——source/evidence.md 明确说明了这一点。同时它建议在项目中使用时应用 color 与 accessibility-baseline 两条 craft 规则，前者约束色彩角色分配，后者保证对比度基线达标。

2. 视觉主题与氛围：为"夜晚、突袭与群聊"设计的 Dark-First

Discord 的产品场景是晚间、多人语音与群聊，因此整个界面采用 dark-first 策略。默认画布是深色Background Primary（#313338），聊天列以略亮或略暗的层次叠加，用于区分频道、子线程与侧面板。

核心特征（Key Characteristics）：

• Dark-first 表面：#1e1f22/#2b2d31/#313338（三层深度）
• Blurple#5865f2作为聊天表面上唯一饱和的强调色
• gg sans（Whitney 风格）用于全部文字——友好、几何、中性
• 圆角方形服务器头像（16px 圆角）悬停时变为圆形
• 聊天行紧凑间距、侧面板宽裕留白
• 状态点：绿色在线、黄色离开、红色勿扰、灰色离线
• 像素对齐的 1px 分隔线，低透明度、off-white 色调

在 tokens.css 中，这套氛围被压缩成三条品牌宣言（文件头注释），并精确映射为 Token：三层深度阶梯、gg sans 的 400–800 字重梯度、Blurple 作为唯一饱和强调。--surface-warm: #1e1f22被注释为"服务器列表轨道——最深一层"，恰好对应规范中 Background Tertiary 的职责。

3. 色彩角色与 Token 映射

3.1 主色（Primary）

3.2 表面色（Dark 主题默认）

3.3 表面色（Light 主题）

3.4 文本色

3.5 状态与语义色

3.6 边框与分隔线

3.7 从规范到 CSS 变量

规范中的每一对"角色→色值"在 tokens.css 里都有同名或近义映射。例如：

:root { /* 表面三层深度 */ --bg: #313338; /* 聊天表面 / 主深色 */ --surface: #2b2d31; /* 频道侧栏、设置侧栏 */ --surface-warm: #1e1f22; /* 服务器列表轨道——最深一层 */ /* 前景 */ --fg: #dbdee1; /* text-normal */ --fg-2: #f2f3f5; /* header-primary */ --muted: #949ba4; /* text-muted */ --meta: #80848e; /* channels-default */ /* 强调 */ --accent: #5865f2; /* Blurple */ --accent-on: #ffffff; --accent-hover: #4752c4; --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 语义 */ --success: #23a55a; /* status-online */ --warn: #f0b232; /* status-idle */ --danger: #f23f43; /* status-dnd / 破坏性红 */ }

值得注意的工程细节：--accent-active用color-mix(in oklab, ...)从主色派生按下态，避免硬编码近似色；--border与--border-soft分别代表"低透明度白分隔线"与"卡片实线"，与规范中两类边框角色一一对应。source/tokens.source.json 为每个 Token 记录了layer（A1-identity / A2 / B-slot）与source行号（如tokens.css:32），相当于一份机器可读的"规范追溯表"。

4. 排版规则：gg sans、字重层级与永不缩小的 16px 正文

4.1 字体族

• 正文 / UI / 标题：gg sans，fallback："Helvetica Neue", Helvetica, Arial, sans-serif
• Display（遗留 / Whitney）：Whitney，fallback：gg sans
• 代码 / 等宽："gg mono"，fallback：Consolas, Andale Mono, Courier New, Courier, monospace

4.2 字号层级表

4.3 三条排版原则

1. 友好几何：gg sans 取代 Whitney，a/g/s 采用圆润终端——追求亲切而不牺牲小字号可读性；
2. 以字重而非颜色建立对比：层级来自 400→500→600→700→800 的字重梯度，表面保持中性；
3. 正文恒为 16px：聊天消息不低于 16px，密度来自行高（1.375）而非缩小字号。

在 tokens.css 中，字号被编码为从--text-xs: 12px到--text-4xl: 56px的 8 级刻度，行高与字距则拆成--leading-body: 1.375、--leading-tight: 1.10、--tracking-display: -0.02em。注释明确说明：h2 (32px) → 1.20、h3 (24px) → 1.25是品牌手感的一部分；components.html 的样式块据此实现——h1用--text-4xl + --tracking-display，h2覆盖为line-height: 1.20，h3覆盖为line-height: 1.25。

5. 组件样式规格

5.1 按钮

主按钮（Primary）：背景#5865f2，文本#ffffff，内边距8px 16px，圆角4px，Hover#4752c4。用于主 CTA、"Continue"、"进入服务器"。次按钮（Secondary）：背景#4e5058，文本#ffffff，内边距8px 16px，圆角4px，Hover#6d6f78。三级/弱化（链接风格）：背景透明，文本#dbdee1，Hover 仅加下划线、背景不变。破坏性（Destructive）：背景#da373c，文本#ffffff，Hover#a12d2f。

参考实现（components.html）为.btn基类补充了细节：line-height: 1、gap: var(--space-2)、transition: background-color var(--motion-fast) var(--ease-standard)，并用.btn:focus-visible { box-shadow: var(--focus-ring) }（0 0 0 3px rgba(88, 101, 242, 0.3)）处理键盘焦点可见性——这与 manifest 中推荐的 accessibility-baseline 规则一致。

5.2 输入框

• 背景：#1e1f22
• 文本：#dbdee1
• 边框：1px solid #1e1f22
• 圆角：4px
• 内边距：10px 12px
• 聚焦：边框#5865f2

components.html 中.field是"标签+输入框"的纵向 flex 容器，标签采用大写 +0.04em字距 + 600 字重（text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600），placeholder 使用--muted，聚焦态通过transition: border-color var(--motion-fast) var(--ease-standard)平滑切换到 Blurple 边框。

5.3 服务器头像

• 尺寸：48×48px
• 圆角：默认16px（圆角方形）；hover 与激活态过渡到50%
• 激活态：图标列左缘 4px 白色胶囊指示条

components.html 把动画封装在.server-icon中：transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1)，hover 时border-radius: 50%——这与规范第 6 节的 350ms 圆形变换曲线完全一致。

5.4 状态点

• 尺寸：10×10px
• 边框：3px solid background-tertiary（制造"凹槽"效果）
• 位置：头像右下角

5.5 卡片 / Embeds

• 背景：#2b2d31（dark）或#f2f3f5（light）
• 左边框：4px solidembed 强调色
• 圆角：4px
• 内边距：8px 16px

参考实现将.card定义为：background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-6)。

5.6 提及胶囊

• 背景：rgba(88, 101, 242, 0.3)
• 文本：#c9cdfb
• 内边距：0 2px
• 圆角：3px

components.manifest.json 的组件分组审计显示：buttons、inputs、cards、links、typography、layout 六组存在，badges、keyboard、icons 三组未出现在该夹具中（present: false）。它同时记录了literals统计（7 个颜色字面量、17 个像素值、3 个硬编码字体族），并提供了"已声明未引用"Token 清单（如--danger、--success、--radius-pill等），这些 Token 属于为完整 schema 预留但当前组件未消费的槽位。

6. 间距与布局：4px 基准网格与三栏骨架

• 基准单位：4px。刻度：4、8、12、16、20、24、32、40
• 服务器轨道：宽 72px，固定
• 频道侧栏：宽 240px
• 成员列表：桌面端宽 240px
• 聊天列：流体，最小 380px

tokens.css 将刻度编码为--space-1（4px）到--space-12（40px），并额外提供区块纵向节奏：--section-y-desktop: 80px/--section-y-tablet: 48px/--section-y-phone: 32px，以及容器约束--container-max: 1200px与三档响应式 gutter（24/16/16px）。布局基元方面，components.html 提供.container（max-width + margin-inline: auto）、.stack-3/.stack-4（相邻兄弟间距）、.hero-grid（1.3fr/1fr，1023px 断点收窄为单列）与.features-grid（3 列 → 2 列 → 1 列），并把分隔线做成section + section { border-top: 1px solid var(--border) }，呼应规范中"1px 低透明度分隔线"的品牌特征。

7. 动效规范

• 时长：hover 200ms；服务器头像变圆 350ms；tooltip 淡入淡出 80ms
• 缓动：头像变换使用cubic-bezier(0.215, 0.61, 0.355, 1)（先快后缓）
• 通知脉冲：未读提及指示器1.4s ease-in-out infinite

Token 层将动效压缩为：--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)，头像的专用缓动曲线直接出现在.server-icon的 transition 中。聚焦环--focus-ring同样属于动效/可达性基础设施的一部分。

8. 使用准则与反模式

• 保留暗色外壳、紧凑密度与 blurple 动作层级这三者的一体性；在浅色营销布局中单独使用 blurple 会破坏 Discord 产品气质。
• 高导航强度界面应组织为轨道（rail）、侧栏与聊天列结构，而非孤立的装饰卡片。
• 表现人物、服务器或在线状态时，使用圆角方形头像 + 状态点的语言。

USAGE.md 的 Do/Avoid 清单给出了工程侧约束：严格保留 schema Token 名称以保证跨品牌切换可靠；用--accent承担主操作、链接与焦点态；优先复用components.manifest.json中的组件分组而非发明新控件；避免在:rootToken 块之外使用裸色值，避免绕过tokens.css单独定义 Tailwind 值，避免声称拥有上游原始来源证据。

9. 落地集成：从 CSS Token 到 Tailwind v4 与可视化验证

9.1 直接引入 tokens.css

按 USAGE.md 的流程，将 tokens.css 粘贴进首屏 artifact 的<style>块，之后所有组件 CSS 一律引用var(--token)，不出现裸色值。参考夹具 components.html 本身就示范了这种用法：它的全部可见色值均来自 Token。

9.2 Tailwind v4 桥接

tailwind-v4.css 是自动派生的桥接层，头部注释明确"Derived from tokens.css. Keep tokens.css as the source of truth."（从 tokens.css 派生，tokens.css 才是事实来源）：

@import "tailwindcss"; @import "./tokens.css"; @theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-success: var(--success); --font-display: var(--font-display); --text-4xl: var(--text-4xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-focus-ring: var(--focus-ring); --duration-base: var(--motion-base); --ease-standard: var(--ease-standard); /* ...其余映射见文件 */ }

这样即可在 Tailwind 工具类（如bg-accent、text-muted、rounded-md）中消费整套 Discord Token。该文件是派生物，应基于token-contract.report.json与 tokens.css 重新生成，而非手工编辑（source/evidence.md 对此有明确说明）。

9.3 契约审计与预览

• source/token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行，用于契约审计；
• components.manifest.json 提供组件盘点与 Token 引用统计，undeclaredReferenced: []说明夹具中没有引用未声明的 Token；
• preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页用于对色彩、排版与间距做视觉 sanity check。

10. 可移植的 Discord 风格实现模板

将上述规范汇总为一个可直接运行的落地骨架（所有值来自 tokens.css，并复用组件夹具中的类名）：

<style> /* 第一步：粘贴 tokens.css 的 :root 块（见第 3.7 节） */ body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); } .server-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--surface-warm); border-radius: var(--radius-md); } .server-icon { width: 48px; height: 48px; border-radius: 16px; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1); } .server-icon:hover { border-radius: 50%; } .mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; padding: 0 2px; border-radius: 3px; font-weight: 500; } .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-6); } </style> <main> <div class="server-rail"> <div class="server-icon">OD</div> <div class="server-icon">🎮</div> </div> <div class="card"> <strong>Ada</strong> <span style="color: var(--meta); font-size: var(--text-xs)">今日 16:32</span> <p>为 <span class="mention">@batch-2</span> 品牌添加 Token 夹具。</p> </div> </main>

总结

Discord 设计系统的精髓可以浓缩为三句话：dark-first 的三层明度阶梯（#1e1f22 → #2b2d31 → #313338）定义空间结构；Blurple（#5865f2）作为唯一饱和强调色承担品牌与主操作；gg sans 以 400–800 字重梯度建立层级，16px 正文永不缩小。在 OpenDesign 仓库中，这套规范已经沉淀为 tokens.css 的 Token 实现、components.html 的参考组件与 components.manifest.json 的审计清单，Agent 可以按 USAGE.md 的流程直接复制消费，并通过 tailwind-v4.css 桥接到 Tailwind 生态。若需查阅其他语言版本，仓库还提供了 DESIGN-zh.md、DESIGN-ja.md、DESIGN-de.md 等 20 余种翻译。

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