企业官网建设流程全解析

OpenDesign 设计系统实战：复刻 Resend「虚空黑 + 霜蓝描边」高奢深色主题的完整指南

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design

本文以 design-systems/resend/DESIGN.md 为骨架，结合该包内的 tokens.css、components.html、components.manifest.json 与共享 token 模式 design-systems/_schema/tokens.schema.ts，系统拆解 OpenDesign 中 Resend 设计系统包的完整构成：从纯黑画布、霜蓝描边、三字体层级到多色强调体系，再到可供 Agent 直接复用的 Prompt 配方。读完本文，你将能够在 OpenDesign 生态中直接用一套 token + 组件配方，生成「画廊式暗黑 + 高级邮件基础设施」气质的落地页、仪表盘与代码展示面板。

1. 包结构与阅读顺序：一个可被 Agent 消费的设计系统包

Resend 设计系统包位于仓库的 design-systems/resend 目录，由 manifest.json 声明为od-design-system-project/v1规范版本，分类为「Productivity & SaaS」，类型为bundled（由 OpenDesign 策展的内置 fixture 派生，而非对上游官网的实时抓取，这一点在 source/evidence.md 中有明确声明）。

包内文件职责划分如下：

USAGE.md 给出了 Agent 与评审者应遵循的阅读顺序：

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

同时它强调两条铁律：保留 schema token 名称以保证跨品牌切换可靠；避免在拷贝的:roottoken 块之外使用裸 hex 值，也不得脱离 tokens.css 独立重定义 Tailwind 或 design-token 值。

2. 视觉主题与氛围：把邮件基础设施做成奢侈品

Resend 官网是一块「黑暗的电影画布」——它把邮件基础设施当作奢侈品来呈现。整页铺满纯黑（#000000），文字以近白（#f0f0f0）发光，营造出「内容在虚空舞台上表演」的剧场感。它区别于普通的开发者工具暗色：这是摄影画廊式的受控黑暗，每个元素都被有目的地照亮，没有任何东西争夺注意力。

2.1 三字体层级（系统的明星）

精心挑选的三款字体构成了既编辑感又技术感的层级：

• Domaine Display（Klim Type Foundry 衬线体）：96px 巨幅 hero 标题，行高几乎贴底（1.00），负字距（-0.96px），呈现出杂志封面式的展示文本；
• ABC Favorit（Dinamo 出品）：负责章节标题，以更激进的字距（56px 下 -2.8px）压缩出「工程化」的中层文本；
• Inter：承担正文与 UI，提供让展示字体发光的干净可读性；
• Commit Mono：承担代码块，让等宽字体成为一等公民。

2.2 标志性元素：霜蓝描边与多色强调

让 Resend 与众不同的是它的冰蓝色描边体系。它不用中性灰边框，而是用rgba(214, 235, 253, 0.19)—— 一条 19% 不透明度的淡蓝色霜线，赋予每个容器和分隔线在黑色背景上的冷冽晶体质感。结合胶囊形按钮（9999px 圆角）、多色强调体系（橙、绿、蓝、黄、红，各有独立 CSS 变量刻度）以及 OpenType 风格集（"ss01"、"ss03"、"ss04"、"ss11"），最终呈现出一套高级、精准、低调自信的设计系统。

关键特征清单（原文要点）：

• 纯黑背景 + 近白（#f0f0f0）文本 —— 剧场/画廊式黑暗；
• 三字体层级：Domaine Display（衬线 hero）、ABC Favorit（几何章节）、Inter（正文/UI）；
• 冰蓝描边rgba(214, 235, 253, 0.19)—— 每条边框都有冷冽晶体微光；
• 多色强调体系：橙、绿、蓝、黄、红，各有编号 CSS 变量刻度；
• 胶囊按钮与标签（9999px 圆角）+ 透明背景；
• 展示字体启用 OpenType 风格集（"ss01"、"ss03"、"ss04"、"ss11"）；
• Commit Mono 用于代码 —— 等宽字体是设计元素而非事后补救；
• 极轻阴影：用蓝色描边环rgba(176, 199, 217, 0.145) 0px 0px 0px 1px代替传统投影。

3. 色彩体系与角色分工

3.1 主色（Primary）

3.2 强调色刻度（Accent Scale）

橙（Orange）

绿（Green）

蓝（Blue）

其他

3.3 中性刻度（Neutral Scale）

3.4 表面与覆盖层（Surface & Overlay）

• Frost Primary（#fcfdff）：主色 token（轻微蓝调，94% 不透明度）；
• White Hover（rgba(255, 255, 255, 0.28)）：深色上的按钮悬停态；
• White 60%（oklab 表达，约 0.577 透明度）：半透明白用于弱化文本；
• White 64%（约 0.642 透明度）：稍亮的半透明白。

3.5 边框与阴影

• Frost Border（rgba(214, 235, 253, 0.19)）：标志性冰蓝边框，19% 不透明度；
• Frost Border Alt（rgba(217, 237, 254, 0.145)）：更淡的变体，用于列表项；
• Ring Shadow（rgba(176, 199, 217, 0.145) 0px 0px 0px 1px）：蓝色描边式「边框阴影」；
• Focus Ring（rgb(0, 0, 0) 0px 0px 0px 8px）：厚重黑色焦点环（产品语境中的可访问性设计）；
• Subtle Shadow（rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px）：极简卡片抬升。

4. 字体规则

4.1 字体族（Font Families）

4.2 层级表（Hierarchy）

4.3 字体原则

• 三字体编辑层级：Domaine Display（衬线 hero）、ABC Favorit（几何 sans 章节）、Inter（可读正文）。每种字体有严格角色，绝不越界；
• 展示层的激进负字距：Domaine -0.96px、ABC Favorit -2.8px。展示文本像杂志刊头一样被压缩、有紧迫感、经过精心设计；
• 导航的唯一正向字距：ABC Favorit 导航链接使用 +0.35px 字距，是全系统唯一的正向字距，营造出与压缩标题形成对比的「透气」导航文字；
• OpenType 即身份："ss01"、"ss03"、"ss04"、"ss11"风格集在全部 ABC Favorit 与 Domaine 文本上启用，激活替代字形，形成 Resend 字体的独特个性；
• Commit Mono 作为设计元素：等宽字体不藏在代码块里，而是显著用于代码示例与技术内容，被当作一等视觉元素对待。

在实现层面，components.html 的 body 级样式直接启用了font-feature-settings: "liga" 1, "ss01" 1, "ss04" 1, "ss11" 1，并搭配-webkit-font-smoothing: antialiased与text-rendering: optimizeLegibility；没有这些字体的浏览器会静默忽略指令，不会出现回退丑陋。

5. 组件样式

5.1 按钮

Primary Transparent Pill（主透明胶囊）

• 背景：transparent
• 文字：#f0f0f0
• 内边距：5px 12px
• 圆角：9999px（全胶囊）
• 边框：1px solid rgba(214, 235, 253, 0.19)（霜边框）
• 悬停：背景rgba(255, 255, 255, 0.28)（白玻璃）
• 用途：深色背景上的主 CTA

White Solid Pill（白实心胶囊）

• 背景：#ffffff
• 文字：#000000
• 内边距：5px 12px
• 圆角：9999px
• 用途：高对比 CTA（如 "Get started"）

Ghost Button（幽灵按钮）

• 背景：transparent
• 文字：#f0f0f0
• 圆角：4px
• 无边框
• 悬停：微妙背景色调
• 用途：次级操作、Tab 项

5.2 卡片与容器

• 背景：透明或极淡深色色调；
• 边框：1px solid rgba(214, 235, 253, 0.19)（霜边框）；
• 圆角：16px（标准卡片）、24px（大区块/面板）；
• 阴影：rgba(176, 199, 217, 0.145) 0px 0px 0px 1px（描边环）；
• 深色产品截图与代码演示作为卡片内容；
• 无传统 box-shadow 抬升。

5.3 输入与表单

• 文字：深色下#f0f0f0，浅色下#000000；
• 圆角：4px；
• 焦点：基于 shadow 的焦点环；
• 极简样式 —— 继承深色主题。

5.4 导航

• 粘性深色头部，底部霜边框：1px solid rgba(214, 235, 253, 0.19)；
• "Resend" wordmark 左对齐；
• 导航链接：ABC Favorit 14px、weight 500、+0.35px 字距；
• 胶囊 CTA 右对齐；
• 移动端：汉堡折叠。

5.5 图片处理

• 产品截图与代码演示主导内容区块；
• 深色主题截图在深色背景上无缝融合；
• 图片圆角：12px–16px；
• 全宽区块配微妙渐变覆盖层。

5.6 特色组件

Tab 导航

• 水平 Tab 配微妙选中指示器；
• Tab 项 8px 圆角；
• 激活态带微妙背景区分。

代码预览面板

• 使用 Commit Mono 的深色代码块；
• 霜边框（rgba(214, 235, 253, 0.19)）；
• 多色强调 token 语法高亮（橙、蓝、绿、黄）。

多色强调徽章

• 每个产品特性从 CSS 变量刻度取自己的强调色；
• 徽章用低不透明度（12–42%）强调色作背景、全不透明度作文字。

从 components.manifest.json 可以确认这些组件的实现规模：按钮组.btn/.btn-ghost/.btn-pill/.btn-pill-white（含 hover 与:focus-visible状态）、表单.field（含::placeholder、:hover、:focus-visible）、卡片.card、徽章.badge-accent/.badge-muted/.badge-success/.badge-dot、链接a.link-accent、代码面板.code-panel（含.tok-key/.tok-str/.tok-fn/.tok-com四个语法 token 类）以及布局原语.container/.row-between/.stack-3/.stack-4/.stack-6，共 9 个组件分组、73 个选择器。

6. 布局原则

6.1 间距系统

• 基础单位：8px；
• 刻度：1px、2px、4px、5px、6px、7px、8px、10px、12px、16px、20px、24px、30px、32px、40px。

6.2 栅格与容器

• 居中内容配宽裕 max-width；
• 全宽黑色区块内嵌受限内容；
• 单列 hero 向下扩展为特性栅格；
• 代码预览面板作为全宽或受限展示。

6.3 留白哲学

• 电影感黑空间：黑色背景本身就是留白。区块间 80px–120px+ 的慷慨垂直间距创造出「穿越黑暗的滚动体验」，每个区块像一幕幕场景浮现；
• 紧凑内容、广袤环绕：文本块与卡片内部紧凑，却漂浮在广袤的暗色空间中 —— 形成孤立的「内容之岛」；
• 排版主导节奏：96px 的巨型展示字体自成垂直节奏，每个标题都是锚定周边空间的视觉事件。

6.4 圆角刻度

7. 深度与层级（Depth & Elevation）

阴影哲学：Resend 几乎完全不用阴影。在纯黑背景上传统阴影是隐形的 —— 你无法向虚空投射影子。Resend 转而通过标志性霜边框（rgba(214, 235, 253, 0.19)）创造深度 —— 那些捕捉光线、在黑暗中发光的纤细冰蓝线条，营造出「悬浮在空间中的玻璃面板」美学，边框是主要的深度机制。

装饰性深度

• hero 内容后方的微妙暖色渐变辉光（橙/琥珀色调）；
• 产品截图通过自身内部 UI 创造视觉深度；
• 无渐变背景 —— 深度来自边框亮度与内容对比。

8. 该做与不该做（Do's and Don'ts）

Do

• 用纯黑（#000000）作页面背景 —— 虚空就是画布；
• 所有结构线使用霜边框（rgba(214, 235, 253, 0.19)）—— 它们是蓝调签名；
• Domaine Display只用于 hero 标题（96px），ABC Favorit 用于章节标题，Inter 用于其余一切；
• 在 Domaine 与 ABC Favorit 文本上启用 OpenType"ss01"、"ss04"、"ss11"；
• 主 CTA 与标签使用胶囊圆角（9999px）；
• 使用多色强调刻度（橙/绿/蓝/黄/红）配不透明度变体做语境化高亮；
• 阴影保持在描边环层级（0px 0px 0px 1px）—— 黑底上传统阴影无效；
• ABC Favorit 导航链接使用 +0.35px 字距 —— 唯一的正向字距。

Don't

• 不要把背景提亮到#000000以上 —— 纯黑虚空不可妥协；
• 不要用中性灰边框 —— 所有边框必须带霜蓝调；
• 不要把 Domaine Display 用到正文 —— 它是展示专用衬线体；
• 不要在同一组件中混用强调色 —— 每个特性只用一个强调色；
• 不要在深色背景上用 box-shadow 做抬升 —— 用霜边框代替；
• 不要跳过 OpenType 风格集 —— 它们定义了排版的个性；
• 不要在导航链接上用负字距 —— ABC Favorit 导航用正向 +0.35px；
• 不要在深色上做不透明按钮 —— 透明 + 霜边框才是该模式。

9. 响应式行为

断点

注：Resend 使用极简断点系统 —— 只检测 480px 与 600px。设计为桌面优先，配干净的移动端折叠。

触控目标

• 胶囊按钮：充足内边距（5px 12px 起）；
• Tab 项：8px 圆角配舒适命中区域；
• 导航链接以 0.35px 字距做视觉分隔。

折叠策略

• Hero：Domaine 96px → 移动端 76.8px；
• 导航：横向 → 汉堡菜单；
• 特性区块：并排 → 堆叠；
• 代码面板：保持宽度，必要时横向滚动；
• 间距按比例压缩。

图片行为

• 产品截图保持宽高比；
• 深色截图在任何尺寸下与深色背景无缝融合；
• 圆角（12px–16px）跨断点保持。

10. Agent Prompt Guide：把整套规则交给生成模型

快速色彩参考

• 背景：Void Black（#000000）
• 主文本：Near White（#f0f0f0）
• 次级文本：Silver（#a1a4a5）
• 边框：Frost Border（rgba(214, 235, 253, 0.19)）
• 橙色强调：#ff801f
• 绿色强调：#11ff99（18% 不透明度）
• 蓝色强调：#3b9eff
• 焦点环：rgb(0, 0, 0) 0px 0px 0px 8px

示例组件 Prompt（可直接复用）

• Hero 区块：「在纯黑（#000000）背景上创建 hero 区块。标题 96px Domaine Display、weight 400、行高 1.00、字距 -0.96px、近白（#f0f0f0）文字、OpenType 'ss01 ss04 ss11'。副标题 20px ABC Favorit、weight 400、行高 1.30。两个胶囊按钮：白色实心（#ffffff、9999px 圆角）与透明霜边框（rgba(214,235,253,0.19)）。」
• 导航栏：「设计导航栏：深色背景配底部霜边框（1px solid rgba(214,235,253,0.19)）。导航链接 14px ABC Favorit、weight 500、字距 +0.35px、OpenType 'ss01 ss03 ss04'。白色胶囊 CTA 右对齐。」
• 特性卡片：「构建特性卡片：透明背景、霜边框（rgba(214,235,253,0.19)）、16px 圆角。标题 56px ABC Favorit、weight 400、字距 -2.8px。正文 16px Inter、weight 400、#a1a4a5 文字。」
• 代码块：「用 Commit Mono 16px 在深色背景上创建代码块。霜边框容器（24px 圆角）。语法颜色：橙（#ff801f）、蓝（#3b9eff）、绿（#11ff99）、黄（#ffc53d）。」
• 强调徽章：「设计强调徽章：背景 #ff5900 22% 不透明度、文字 #ffa057、9999px 圆角、12px Inter、weight 500。」

迭代指南

1. 从纯黑开始 —— 万物悬浮于虚空；
2. 霜边框（rgba(214, 235, 253, 0.19)）是普适结构元素 —— 不是灰、不是中性色；
3. 三字体、三角色：Domaine（hero）、ABC Favorit（章节）、Inter（正文）—— 绝不跨界；
4. 展示字体上 OpenType 风格集是强制项 —— 它们定义个性；
5. 多色强调在背景用低不透明度（12–42%）、文字用全不透明度；
6. 胶囊形（9999px）用于 CTA 与徽章，标准圆角（4px–16px）用于容器；
7. 不用阴影 —— 用霜边框对抗虚空创造深度。

11. 实现层：tokens.css 的 14 条品牌决策

design-systems/resend/tokens.css 不只是值的堆砌 —— 它的头部注释逐条记录了将共享 schema（design-systems/_schema/tokens.schema.ts，通过 design-systems/_schema/defaults.css 提供 A2 回退）适配到 Resend 品牌语气的 14 条决策，每条都能回溯到 DESIGN.md 的对应章节：

1. --bg与--surface都绑到#000000：卡片不靠填充抬升，只靠霜边框识别（对应 §7「纯黑不可妥协」）；--surface-warm别名到 surface，因为品牌没有任何第二个背景色；
2. --border直接绑定 alpha 值rgba(214, 235, 253, 0.19)而非实心 hex：让--elev-ring（0 0 0 1px var(--border)）默认就能复现冰线，也让所有组件用border: 1px solid var(--border)取到同一值；--border-soft降至rgba(217, 237, 254, 0.145)用于不与该竞争的内部行分隔；
3. --fg是#f0f0f0而非#ffffff：四级前景梯度（#f0f0f0 → #a1a4a5 → #5c5c5c → #464a4d）独立绑定，对应 §2 的中性刻度，把纯白留给白胶囊 CTA 与链接高亮；
4. --accent是 Resend Orange#ff801f（§2 中唯一标注「primary orange accent」的条目），--accent-on是#000000—— 饱和橙底上用黑字最清晰（白胶囊模式属于#ffffff实心底，不属于橙色强调填充）；
5. hover 提亮 10%、active 压暗 12%：与 schema 默认「全压暗」相反 —— 在虚空画布上「按下」读作向暗处微陷，「悬停」读作亮度上浮，符合深色系统惯例；
6. 语义色直取 §2 多色刻度：--success: #11ff99（Green 4）、--warn: #ffc53d（Yellow 9）、--danger: #ff2047（Red 5）；文档化的 12–42% 低透明度色调由组件层用color-mix(in oklab, var(--success), transparent 80%)就地达成；
7. 字号刻度 12/14/16/18/20/24/56/96 全部有据，其中 36px 的--text-2xl是合成的中间档，桥接 24px 特性标题到 56px 章节标题，避免 H2 的 24→56 跳变；
8. --tracking-display: -0.05em由 §3 章节标题（-2.8px @ 56px = -0.05em）推导，ABC Favorit 的压缩强于 Domaine（-0.01em @ 96px），绑到 ABC Favorit 的特征值让整个展示层都带上「工程化刊头」感；
9. --font-display把 ABC Favorit 列首位、Inter 作结构性回退，而 Domaine Display刻意不进栈—— 它是付费 Klim 字体，缺失时会以突兀的衬线跌落暴露；需要 Domaine 的 hero 在组件层用font-family: "Domaine Display", var(--font-display)叠加；
10. 区块节奏 120px / 80px / 48px：桌面取 §5 文档范围（80–120px+）的上限，平板与手机按比例下落；
11. 圆角四档：4px（Sharp）、8px（Standard）、16px（Large）、9999px（Pill），24px 的 Section 圆角是组件内联值不入共享 schema；
12. --elev-raised把文档化的描边环与 §6 Level 2 的柔和投影叠加：纯黑上模糊阴影会消失，描边环负责边缘，柔和投影只补一点大气色调，覆盖时永不剥离描边环；
13. --focus-ring是 2px 橙色实环而非 schema 的 3px alpha 辉光：文档化的 8px 黑环在黑色画布上会被吞掉，换成橙色 2px 实环在虚空与卡片表面都清晰可辨；
14. --container-max: 1200px，桌面水槽 32px：营销页把水槽当作画廊留白而非出血。

这些决策全部受到契约约束：components.manifest.json的tokens.declared共列出 56 个 token，且undeclaredReferenced为空 —— 即组件 fixture 引用的每一个 token 都在:root中声明过，无悬挂引用。审计产物 source/token-contract.report.json 给出了更细的量化结果：56 个 token 全部declared、全部sourceBacked，按层划分 A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个，契约分数 100、等级 "excellent"，且recommendRebuild为 false。

12. 在 OpenDesign 中消费这套系统

按 USAGE.md 的约定，实际使用方式是把 tokens.css 的:root块原样粘贴进 artifact 的第一个<style>块（components.html 第 18 行起即这样演示的），然后只通过var(--token)引用值，禁止在块外出现裸 hex。生产时注意：

• 所有品牌共用同一套 A2 token 名（由 design-systems/_schema/tokens.schema.ts 与 defaults.css 定义），跨品牌切换只换:root块即可；
• 语法高亮等组件配色属于组件层职责，用color-mix(in oklab, ...)就地完成 alpha 混合，不新增 token；
• 付费字体（ABC Favorit、Domaine Display、Commit Mono）不在本仓库内，回退栈已就位以保证未加载时的可读性；
• 想快速目检 token 是否生效，可打开 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页，或直接看 system/index.html 与 system/kit.dark.html；
• 若要在更广的语境中校验本系统的色彩可访问性，可对照 craft/color.md 与 craft/accessibility-baseline.md（manifest.json 的craft.suggested也正是指向这两项）。

13. 参考文件速查

• 设计意图与规则全文：design-systems/resend/DESIGN.md
• 包使用契约：design-systems/resend/USAGE.md
• Token 定义与 14 条决策：design-systems/resend/tokens.css
• 组件引用 fixture：design-systems/resend/components.html
• 组件清单与 token 引用关系：design-systems/resend/components.manifest.json
• 包清单（文件映射 / craft 建议 / 预览页）：design-systems/resend/manifest.json
• 共享 token schema：design-systems/_schema/tokens.schema.ts 与 A2 回退 design-systems/_schema/defaults.css
• 审计证据：design-systems/resend/source/evidence.md、design-systems/resend/source/token-contract.report.json

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design