OpenDesign 设计系统包实战解析：HashiCorp 企业级基础设施设计语言（DESIGN.md 全量指南）-平芜编程栈

OpenDesign 设计系统包实战解析：HashiCorp 企业级基础设施设计语言（DESIGN.md 全量指南）

【免费下载链接】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/hashicorp/DESIGN.md为骨架，结合tokens.css、components.html、manifest.json、USAGE.md等仓库文件，系统讲解 OpenDesign 中 HashiCorp 设计系统包的双模式视觉语言、多产品色彩体系、工程级排版规则与 Whisper 级阴影哲学。读完你将掌握：如何在 OpenDesign 的 Agent 工作流中按契约消费该设计包、如何用--mds-color-*/语义 token 复刻 HashiCorp 的「昼夜双模」界面，以及如何编写能被编码 Agent 直接执行的设计提示词。

HashiCorp 的官网是把企业基础设施「具象化」的典型样本：它必须同时传达云基础设施管理的复杂度与亲近感。OpenDesign 将这套视觉语言固化成一个可移植的设计系统包（design-system package），位于 design-systems/hashicorp/。这个包不只是静态的样式快照，而是一套面向 Agent 与 LLM 的「可执行设计契约」——DESIGN.md是给 Agent 的规范散文，tokens.css是编译后的语义 token 样式表，components.html是组件证据夹具。本文逐一拆解其全部规则，并给出源码级实现依据。

1. 包结构：一个设计系统包的最小可移植形态

在 OpenDesign 中，每个设计系统子目录都是一个便携包。据 design-systems/README.md，HashiCorp 包符合「最小机器可读形态」：manifest.json（发现元数据与来源）、DESIGN.md（Agent 规范）、tokens.css（编译后的语义 token 样式表）。HashiCorp 包还补齐了丰富的派生文件：

design-systems/hashicorp/ ├── manifest.json # 包发现元数据、来源、文件清单 ├── DESIGN.md # 规范散文（本文主体） ├── USAGE.md # Agent 阅读顺序与使用守则 ├── tokens.css # 语义 token 权威样式表 ├── design-tokens.json # 派生：Design Tokens JSON（56 个 token） ├── tailwind-v4.css # 派生：Tailwind v4 映射 ├── components.html # 组件证据夹具（53 个选择器 / 27 个类） ├── components.manifest.json # 派生：组件与 token 索引 ├── preview/ # colors / typography / spacing 预览页 ├── source/ # evidence.md、token-contract 报告、tokens.source.json └── system/ # kit.html 等系统级演示页

manifest.json声明了id: "hashicorp"、category: "Backend & Data"，并将craft.suggested绑定为color与accessibility-baseline——也就是说，当该包被选中时，OpenDesign 会把 craft/color.md 与 craft/accessibility-baseline.md 一并组合进 Agent 提示词上下文。

按 USAGE.md 规定的阅读顺序：先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘入第一个 artifact 的<style>块 → 用components.manifest.json做组件清单速查 → 需要精确选择器/状态时打开components.html→ 视觉核对时看preview/页面。

2. 视觉主题：昼夜双模与企业基础设施气质

HashiCorp 设计语言的核心张力，是「白昼/黑夜」双模式并存：信息型版块用干净的白底，Hero 与产品展示区用戏剧性的深色（#15181e、#0d0e12）。这组「build in light, deploy in dark」的昼夜二元性，直接映射了开发者工作流——白天编写、夜晚部署。

排版上，品牌字体 HashiCorp Sans（以__hashicorpSans_96f0ca形式加载）承担「重量」：标题使用 600–700 字重、1.17–1.19 的紧密行高，形成密集而权威的文本块。Hero 大标题 82px、字重 600、开启 OpenType"kern"——这是基础设施级别的排版，而非装饰。

组件体系使用mds（Markdown Design System）前缀，指向一套完全由 CSS 变量驱动的 token 系统——颜色、间距、状态全部经由变量管理。阴影则极其克制：双层微阴影使用rgba(97, 104, 117, 0.05)，几乎不可见，仅足够把交互表面从背景中分离出来。

关键特征清单（源自 DESIGN.md §1）：

双模式：干净白色区块 + 戏剧性深色（#15181e）Hero/产品区
自定义 HashiCorp Sans 字体，600–700 字重，开启"kern"
多产品色彩体系，经由--mds-color-*CSS 自定义属性
产品品牌色：Terraform 紫、Vault 黄、Waypoint 青、Vagrant 蓝
大写字母间距标签（13px、字重 600、字距 1.3px）
微阴影：双层 0.05 透明度——以「耳语」而非「嘶吼」制造深度
token 驱动的mds组件体系，语义化变量命名
收紧的圆角：2px–8px，绝无胶囊形或圆形
次要文本使用 system-ui 回退栈

在 tokens.css 中，这套「黑暗优先」的识别度被固化为--bg: #15181e（Dark Charcoal，Hero 画布）与--surface: #0d0e12（Near Black，卡片与输入框），并明确注释：HashiCorp 最具品牌识别度的表面是深色的，因此--bg绑定深色画布而非白色。

3. 色彩体系与角色分配

3.1 品牌主色

颜色	值	用途
黑	`#000000`	品牌主色，浅色表面上的文本，`--mds-color-hcp-brand`
深炭灰	`#15181e`	深色模式背景、Hero 区块
近黑	`#0d0e12`	最深的深色表面、深色表单输入框

3.2 中性色阶

颜色	值	用途
浅灰	`#f1f2f3`	浅色背景、细微表面
中灰	`#d5d7db`	边框、深色按钮文字
冷灰	`#b2b6bd`	边框强调（0.1–0.4 透明度）
深灰	`#656a76`	辅助文本、次级标签，`--mds-form-helper-text-color`
炭灰	`#3b3d45`	浅色次级文本、按钮边框
近白	`#efeff1`	深色表面上的主文本

3.3 产品品牌色（多产品体系）

产品	颜色	值
Terraform 紫	`#7b42bc`	`--mds-color-terraform-button-background`
Vault 黄	`#ffcf25`	`--mds-color-vault-button-background`
Waypoint 青	`#14c6cb`	`--mds-color-waypoint-button-background-focus`
Waypoint 青 Hover	`#12b6bb`	`--mds-color-waypoint-button-background-hover`
Vagrant 蓝	`#1868f2`	`--mds-color-vagrant-brand`
紫强调	`#911ced`	`--mds-color-palette-purple-300`
访问后紫	`#a737ff`	`--mds-color-foreground-action-visited`

这是「设计系统内的设计系统」：父品牌是黑白加蓝强调，每个子产品注入自己的色相身份。关键约束：产品色只允许出现在对应产品的上下文中（§7 明令禁止在 Vault 内容上使用 Terraform 紫）。

3.4 语义色

角色	值	Token / 用途
Action 蓝	`#1060ff`	深色上主操作链接
链接蓝	`#2264d6`	浅色主链接
亮蓝	`#2b89ff`	激活链接、Hover 强调
琥珀	`#bb5a00`	`--mds-color-palette-amber-200`，警告态
浅琥珀	`#fbeabf`	`--mds-color-palette-amber-100`，警告背景
Vault 微黄	`#fff9cf`	`--mds-color-vault-radar-gradient-faint-stop`
橙	`#a9722e`	`--mds-color-unified-core-orange-6`
红	`#731e25`	`--mds-color-unified-core-red-7`，错误态
藏青	`#101a59`	`--mds-color-unified-core-blue-7`

3.5 阴影与聚焦

微阴影：rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px（默认卡片/按钮浮起）
焦点描边：3px solid var(--mds-color-focus-action-external)——系统化焦点环

token 层的绑定决策：tokens.css将--warn绑定为#bb5a00（DESIGN.md 的 Amber-200）而非 schema 默认的#eab308，因为更亮的黄会在深色画布上被误读为「Vault 产品色」而非「警告态」；--success与--danger继承 schema 默认值，因为 DESIGN.md 文档化的红#731e25是深色错误背景调，而非前景信号色。

4. 排版规则

4.1 字体家族

品牌主字体：__hashicorpSans_96f0ca（HashiCorp Sans），回退__hashicorpSans_Fallback_96f0ca
系统 UI：system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial

4.2 层级表（完整继承）

角色	字体	字号	字重	行高	字距	备注
Display Hero	HashiCorp Sans	82px (5.13rem)	600	1.17 (tight)	normal	`"kern"`开启
Section Heading	HashiCorp Sans	52px (3.25rem)	600	1.19 (tight)	normal	`"kern"`开启
Feature Heading	HashiCorp Sans	42px (2.63rem)	700	1.19 (tight)	-0.42px	负字距
Sub-heading	HashiCorp Sans	34px (2.13rem)	600–700	1.18 (tight)	normal	特性区块
Card Title	HashiCorp Sans	26px (1.63rem)	700	1.19 (tight)	normal	卡片/面板标题
Small Title	HashiCorp Sans	19px (1.19rem)	700	1.21 (tight)	normal	紧凑标题
Body Emphasis	HashiCorp Sans	17px (1.06rem)	600–700	1.18–1.35	normal	加粗正文
Body Large	system-ui	20px (1.25rem)	400–600	1.50	normal	Hero 描述
Body	system-ui	16px (1.00rem)	400–500	1.63–1.69 (relaxed)	normal	标准正文
Nav Link	system-ui	15px (0.94rem)	500	1.60 (relaxed)	normal	导航项
Small Body	system-ui	14px (0.88rem)	400–500	1.29–1.71	normal	次级内容
Caption	system-ui	13px (0.81rem)	400–500	1.23–1.69	normal	元数据、页脚链接
Uppercase Label	HashiCorp Sans	13px (0.81rem)	600	1.69 (relaxed)	1.3px	`text-transform: uppercase`

4.3 原则

品牌/系统分工：标题与品牌关键文本用 HashiCorp Sans；正文、导航与功能性文本用 system-ui。「品牌字体承载重量，system-ui 承载文字」。
Kern 常开：所有 HashiCorp Sans 文本启用 OpenType"kern"——字距调整不容妥协。
紧密标题：所有标题使用 1.17–1.21 行高，形成密集、堆叠的文本块，传达「承重墙」般的基础设施感。
放松正文：正文使用 1.50–1.69 行高（相当慷慨），在密集标题下方营造舒适阅读节奏。
大写标签作寻路：13px 大写 + 1.3px 字距作为系统的分类/区块标记——永远是 HashiCorp Sans 字重 600。

在 components.html 的实现中，这一分工被落实为：h1/h2/h3使用--font-display并声明font-feature-settings: "kern"，而.lead、.body-muted、.field等正文级元素全部使用--font-body（system-ui）。.eyebrow类则完整复刻大写寻路标签：13px、600、1.3px 字距、text-transform: uppercase。

5. 组件样式

5.1 按钮

Primary Dark（主深色）

背景：#15181e；文本：#d5d7db
内边距：9px 9px 9px 15px（不对称，左侧更多）
圆角：5px；边框：1px solid rgba(178, 182, 189, 0.4)
阴影：rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px
焦点：3px solid var(--mds-color-focus-action-external)
Hover：使用--mds-color-surface-interactivetoken

Secondary White（次白）

背景：#ffffff；文本：#3b3d45
内边距：8px 12px；圆角：4px
Hover：--mds-color-surface-interactive+ 低阴影浮起
焦点：3px solid transparent描边；干净、极简外观

产品色按钮

Terraform：背景#7b42bc
Vault：背景#ffcf25（深色文本）
Waypoint：背景#14c6cb，Hover#12b6bb
每个产品按钮遵循相同结构模式，仅替换品牌色

components.html 中还提供了第三种类型.btn-accent：Action 蓝（--accent）背景 + 白文本，作为页面中「信号最高的唯一 CTA」，并硬性规定每屏可见的 accent 使用不超过 2 处。.btn:focus-visible使用box-shadow: var(--focus-ring)（3px 实心环），:active有translateY(0.5px)微下压反馈。

5.2 徽章 / 胶囊

背景：#42225b（深紫）；文本：#efeff1
内边距：3px 7px；圆角：5px
边框：1px solid rgb(180, 87, 255)；字体：16px

在components.html中，徽章被拆分为.badge（基础）、.badge-status（状态徽章，用color-mix以 80% 透明度的--success渲染）、.badge-dot（6px 状态圆点）。components.manifest.json显示徽章组引用了--font-body、--radius-pill、--space-2、--text-sm四个 token。

5.3 输入框

文本输入（深色模式）

背景：#0d0e12；文本：#efeff1
边框：1px solid rgb(97, 104, 117)；内边距：11px；圆角：5px
焦点：3px solid var(--mds-color-focus-action-external)描边

复选框

背景：#0d0e12；边框：1px solid rgb(97, 104, 117)；圆角：3px

实现层（components.html）中.field input的边框使用var(--meta)——注释明确指出#656a76（--meta）与文档化的rgb(97, 104, 117)同色相，聚焦时边框切换为--accent并叠加--focus-ring。

5.4 链接

浅色背景 Action 蓝：#2264d6，Hover → blue-600 变量，Hover 时下划线
深色背景 Action 蓝：#1060ff或#2b89ff，Hover 时下划线
深色背景白：#ffffff，透明下划线 → Hover 时可见下划线
浅色背景中性：#3b3d45，透明下划线 → Hover 时可见下划线
深色背景浅色：#efeff1，类似 Hover 模式
所有链接以var(--wpl-blue-600)作为 Hover 色

5.5 卡片与容器

浅色模式：白背景 + 微阴影浮起；深色模式：#15181e或更深的表面
卡片/容器圆角：8px
产品展示卡片带渐变边框或强调光

5.6 导航

干净的水平导航 + 巨型下拉菜单
HashiCorp logo 左对齐；system-ui 15px 字重 500 的链接
产品分类按生命周期管理分组
头部含 "Get started" 与 "Contact us" CTA；Hero 区有深色变体

6. 布局原则

6.1 间距系统

基础单位：8px
刻度：2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px

在 token 层，tokens.css 将结构节奏收敛为--space-1(4px) 到--space-12(48px) 共 8 档；2/3/6/7/9/11 等亚档增量属于过细粒度，留在组件内联处理。

6.2 栅格与容器

最大内容宽度：约 1150px（xl 断点）
全宽深色 Hero 区块 + 内容居中
卡片栅格：2–3 列布局
桌面端慷慨的水平内边距

6.3 断点

名称	宽度	关键变化
Mobile Small	<375px	紧密单列
Mobile	375–480px	标准移动端
Small Tablet	480–600px	微调
Tablet	600–768px	2 列栅格开始
Small Desktop	768–992px	完整导航可见
Desktop	992–1120px	标准布局
Large Desktop	1120–1440px	最大宽度内容
Ultra-wide	>1440px	居中、宽裕边距

6.4 留白哲学

企业级呼吸感：区块间 48px–80px+ 的慷慨纵向间距传达稳定与严肃。
密集标题、宽阔正文：紧密行高标题压在放松正文之上，形成每个区块「顶部有重量」的视觉。
深色作画布：深色 Hero 区块用额外纵向内边距让 3D 插画与渐变「呼吸」。

6.5 圆角刻度

Minimal（2px）：链接、小型内联元素
Subtle（3px）：复选框、小型输入
Standard（4px）：次级按钮
Comfortable（5px）：主按钮、徽章、输入框
Card（8px）：卡片、容器、图片

token 层的决策（tokens.css 注释 #9）：--radius-sm绑定 5px、--radius-md/--radius-lg绑定 8px 上限、--radius-pill绑定 5px——因为 HashiCorp 并不存在真正的 9999px 胶囊形，「无胶囊」是结构性规则而非风格选择。

7. 深度与浮起

层级	处理	用途
Flat（Level 0）	无阴影	默认表面、文本块
Whisper（Level 1）	`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`	卡片、按钮、交互表面
Focus（Level 2）	`3px solid var(--mds-color-focus-action-external)`描边	焦点环——与上下文匹配颜色

阴影哲学：HashiCorp 使用了现代网页设计中堪称最克制的阴影系统。5% 透明度的双层阴影几乎不可见——它们的存在不是为了制造视觉深度，而是为了发出「可交互」的信号。如果你能看到阴影，那它就已经太重了。这种克制传达出企业价值的「稳定」——没有东西漂浮，没有东西不确定。

这一哲学在 tokens.css 中逐字保留为--elev-raised（注释 #10 明确引用「If you can see the shadow, it's too strong.」），并配套--elev-flat: none与--elev-ring: 0 0 0 1px var(--border)（冷灰发丝线）。焦点环则绑定为--focus-ring: 0 0 0 3px var(--accent)——锐利实心环、无光晕，这是 schema 默认 3px alpha 光晕的工程化替代。

8. Token 契约实现：tokens.css 的 12 条绑定决策

tokens.css 不只是 CSS 变量，而是一份带注释的「品牌契约」。它逐条解释了每个 token 为何如此绑定，其中有 12 条核心决策最值得深读：

--bg是深色而非白色：HashiCorp 存在昼夜双模式，但深色表面才是身份定义面——82px 的 HashiCorp Sans、多产品强调色、Whisper 阴影都在深色画布上发挥作用。
--fg四级梯度独立绑定：近白#efeff1→ 中灰#d5d7db→ 冷灰#b2b6bd→ 深灰#656a76全部保留，因为品牌确实完整走完了这个梯度；合并任何一级都会压平 HashiCorp 内容的企业密度。
--border绑定带 alpha 的字面值：rgba(178, 182, 189, 0.4)直接取自 Primary Dark 按钮边框，让--elev-ring能复刻冷灰发丝线；--border-soft降到 0.15 alpha 用于内部行分隔。
--accent是 Action 蓝#1060ff，不是产品色：产品色是产品作用域 token，公司级功能 CTA 色是#1060ff。--accent-hover抬升为亮蓝#2b89ff（而非 schema 默认的压暗公式，否则深色画布上会失去对比度），:active态再用标准公式压暗。
--warn是烧琥珀#bb5a00，而非 schema 默认#eab308（原因见 §3.5）。
--font-display加载 HashiCorp Sans + 实质回退栈；--font-body用 system-ui——品牌/系统分工是结构规则。
类型刻度顶端 82px（--text-4xl+--leading-tight1.17）；--tracking-display为normal，因为品牌靠 kern 而非字距。
--leading-body1.63、--leading-tight1.17——「顶部重量」规则的字面落实。
圆角刻度收紧：5px/8px/8px/5px，8px 是天花板。
--elev-raised逐字保留 Whisper 阴影，组件 CSS 不得加强。
--focus-ring是 3px 实心环（0 0 0 3px var(--accent)）。
--section-y-desktop80px、--container-max1150px——DESIGN.md §5 文档化的上下端点。

这些决策还指向三个源契约文件：标准 token 名见 design-systems/_schema/tokens.schema.ts（其内容再导出自packages/contracts/src/design-systems/token-schema.ts）、A2 回退对等见_schema/defaults.css、lint 强制见apps/daemon/src/lint-artifact.ts。

派生产物 design-tokens.json 记录了这份契约的质量分数：56 个 token 全部声明且全部有源码背书，A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个，契约评分 100、等级 excellent，无需重建。source/evidence.md与source/token-contract.report.json则记录每个 token 绑定回tokens.css声明行的审计证据，并声明该包基于 curated bundled fixture 回填，不做上游重爬。

9. 组件清单与 Tailwind v4 派生

components.manifest.json 是组件夹具的机器可读索引：components.html含 1 个 style 块、53 个选择器、27 个类、25 个元素。它把组件划分为 9 个组，每组标注了 token 引用：

buttons：.btn/.btn-accent/.btn-primary/.btn-secondary及:hover、:active、:focus-visible，引用--accent、--border、--elev-raised、--focus-ring等 8 个 token
inputs：.field系列与表单结构，引用--fg-2、--meta、--text-sm、--text-xs
cards：.card
badges：.badge/.badge-dot/.badge-status
links：a/a:hover
keyboard：kbd（3px 圆角、--font-mono）
icons：.icon（16px SVG 槽位）
typography：.eyebrow/.lead/.body-*与标题元素，引用--font-display、--leading-tight、--text-2xl/3xl
layout：.container/.hero-grid/.features-grid/.form-row/.stack-*/.row-between，引用--container-max、--container-gutter-*、--border-soft

token 一致性审计显示：56 个声明 token 中 48 个被组件引用，未声明的引用为 0（undeclaredReferenced: []）——声明与消费完全闭合。另有 8 个 token（--danger、--elev-flat、--elev-ring、--motion-base、--radius-lg、--space-1、--surface-warm、--warn）为预留未用。

对 Tailwind v4 用户，tailwind-v4.css 把全部 token 桥接进@theme命名空间：--color-bg、--color-accent、--font-display、--text-4xl、--shadow-raised、--radius-pill、--spacing-section-desktop等，可在 Tailwind 类中直接使用bg-bg、text-fg-2、shadow-raised、rounded-pill这类工具类。文件头部注明「Derived from tokens.css. Keep tokens.css as the source of truth.」——它是缓存而非并列事实源。

10. 注意事项：Do's 与 Don'ts

Do

标题与品牌文本用 HashiCorp Sans，正文与 UI 文本用 system-ui
所有 HashiCorp Sans 文本启用"kern"
产品品牌色只用于对应产品（Terraform = 紫，Vault = 黄，以此类推）
区块标记用 13px 字重 600、1.3px 字距的大写标签
阴影保持在「Whisper」级（0.05 透明度双层）
使用--mds-color-*token 体系保证颜色应用一致
维持「紧密标题 / 放松正文」节奏（1.17–1.21 vs 1.50–1.69 行高）
无障碍焦点环一律使用3px solid

Don't

不要在对应产品上下文之外使用产品品牌色（Vault 内容上不许出现 Terraform 紫）
不要将阴影透明度提高到 0.1 以上——Whisper 级别是有意为之
不要使用胶囊形按钮（>8px 圆角）——锐利极简圆角是结构性的
不要在标题上跳过"kern"——字体需要它
不要用小号正文使用 HashiCorp Sans——它专为 17px+ 标题设计
不要在同一个组件中混用产品色——每个产品只有一种颜色
不要用纯黑#000000做深色背景——用#15181e或#0d0e12
不要忘记不对称按钮内边距——9px 9px 9px 15px是有意为之

USAGE.md 补充了包级守则：保留 schema token 名称以保障跨品牌切换可靠；用--accent表示主操作、链接、焦点态及一个明确的焦点元素；复用components.manifest.json中的组件组而非发明新控件；source/仅作为回填夹具的审计证据——不得声称包内含原创上游源码证据。

11. 响应式行为

断点

名称	宽度	关键变化
Mobile	<768px	单列、汉堡导航、堆叠 CTA
Tablet	768–992px	2 列栅格、导航开始展开
Desktop	992–1150px	完整布局、巨型下拉导航
Large	>1150px	最大宽度居中、宽裕边距

折叠策略

Hero：82px → 52px → 42px 标题尺寸
导航：巨型下拉 → 汉堡菜单
产品卡片：3 列 → 2 列 → 堆叠
深色区块保持全宽但压缩内边距
按钮：内联 → 移动端全宽堆叠

components.html落地了这条折叠链：h1在 ≤1023px 时从 82px（--text-4xl）塌到 52px（--text-3xl），≤639px 时再塌到 42px（--text-2xl）；.hero-grid从1.4fr 1fr双列在 ≤1023px 时变单列；.features-grid三列 → 双列 → 单列；section纵向内边距随--section-y-desktop/tablet/phone（80/56/40px）逐级收缩。

12. Agent Prompt Guide：可执行的设计指令

快速颜色参考

浅色背景：#ffffff、#f1f2f3
深色背景：#15181e、#0d0e12
浅色文本：#000000、#3b3d45
深色文本：#efeff1、#d5d7db
链接：#2264d6（浅色）、#1060ff（深色）、#2b89ff（激活）
辅助文本：#656a76
边框：rgba(178, 182, 189, 0.4)、rgb(97, 104, 117)
焦点：3px solid产品适配色

示例组件提示词（可直接复用）

深色 Hero：「在深色背景（#15181e）上创建 Hero。标题 82px HashiCorp Sans 字重 600、行高 1.17、kern 开启、白色文本。副文本 20px system-ui 字重 400、行高 1.50、#d5d7db 文本。两个按钮：主深色（#15181e、5px 圆角、9px 15px 内边距）与次白（#ffffff、4px 圆角、8px 12px 内边距）。」
产品卡片：「设计产品卡片：白背景、8px 圆角、rgba(97,104,117,0.05) 双层阴影。标题 26px HashiCorp Sans 字重 700，正文 16px system-ui 字重 400 行高 1.63。」
大写区块标签：「构建大写区块标签：13px HashiCorp Sans 字重 600、行高 1.69、字距 1.3px、text-transform uppercase、#656a76 颜色。」
产品 CTA 按钮：「创建产品专属 CTA 按钮：Terraform → #7b42bc 背景，Vault → #ffcf25 深色文本，Waypoint → #14c6cb。全部：5px 圆角、500 字重文本、16px system-ui。」
深色表单：「设计深色表单：#0d0e12 输入背景、#efeff1 文本、1px solid rgb(97,104,117) 边框、5px 圆角、11px 内边距。焦点：3px solid 强调色描边。」

迭代指南

永远从模式决策开始：信息型用浅色（白），Hero/产品用深色（#15181e）
HashiCorp Sans 只用于标题（17px+），其余全部 system-ui
阴影保持 Whisper 级（0.05 透明度）——如果可见就降低
产品色神圣不可侵犯——每个产品恰好拥有一种颜色
焦点环永远是 3px solid，与产品上下文匹配颜色
大写标签是系统化寻路模式——13px、600、1.3px 字距

结语：从规范散文到可执行契约

HashiCorp 设计系统包展示了 OpenDesign 设计系统 2.0 的核心思路：DESIGN.md是给 Agent 读的规范、tokens.css是给浏览器读的契约、components.html是给测试与清单生成用的证据夹具，三者由manifest.json与source/审计链闭合。当你在 OpenDesign 的 Design System 表面选中hashicorp包时，这套「双模式画布 + 多产品色 + 品牌/系统字体分工 + Whisper 阴影」的完整约束会被组合进 Agent 提示词，从而让编码 Agent 产出的 HTML 界面在视觉上真正「像 HashiCorp」。若需进一步阅读，可继续探索 DESIGN.md 原文、tokens.css 的逐条注释决策，或通过 docs/design-systems.md 了解整套包的作者指南与评审清单。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考