HashiCorp

version: alpha name: HashiCorp-design-analysis description: "An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act as identity tokens rather than decorative palette. Display type is hashicorpSans set in 600/700 with tight 1.17–1.21 line-heights; body type runs the same family at 500 weight with relaxed 1.50–1.71 line-heights. Cards live as charcoal surfaces with 1px translucent gray borders; product showcase cards lift into per-product chromatic gradients. The system reads as confident, technical, and intentionally multi-product — every section quietly signals which HashiCorp tool it represents."

colors: primary: "#000000" on-primary: "#ffffff" accent-blue: "#2b89ff" ink: "#ffffff" ink-muted: "#b2b6bd" ink-subtle: "#656a76" canvas: "#000000" surface-1: "#15181e" surface-2: "#1f232b" surface-3: "#3b3d45" hairline: "#3b3d45" hairline-soft: "#252830" inverse-canvas: "#ffffff" inverse-ink: "#000000" product-terraform: "#7b42bc" product-terraform-bright: "#911ced" product-vault: "#ffcf25" product-consul: "#e62b1e" product-waypoint: "#14c6cb" product-waypoint-deep: "#12b6bb" product-vagrant: "#1868f2" product-nomad: "#00ca8e" product-boundary: "#f24c53" amber-100: "#fbeabf" amber-200: "#bb5a00" blue-7: "#101a59" semantic-success: "#00ca8e" semantic-warning: "#ffcf25" semantic-error: "#e62b1e" semantic-visited: "#a737ff"

typography: display-xl: fontFamily: hashicorpSans fontSize: 80px fontWeight: 700 lineHeight: 1.17 letterSpacing: -2.5px display-lg: fontFamily: hashicorpSans fontSize: 56px fontWeight: 700 lineHeight: 1.18 letterSpacing: -1.6px display-md: fontFamily: hashicorpSans fontSize: 40px fontWeight: 600 lineHeight: 1.19 letterSpacing: -1.0px headline: fontFamily: hashicorpSans fontSize: 28px fontWeight: 600 lineHeight: 1.21 letterSpacing: -0.6px card-title: fontFamily: hashicorpSans fontSize: 22px fontWeight: 600 lineHeight: 1.18 letterSpacing: -0.4px subhead: fontFamily: hashicorpSans fontSize: 20px fontWeight: 600 lineHeight: 1.35 letterSpacing: -0.2px body-lg: fontFamily: hashicorpSans fontSize: 18px fontWeight: 500 lineHeight: 1.69 letterSpacing: 0 body: fontFamily: hashicorpSans fontSize: 16px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0 body-sm: fontFamily: hashicorpSans fontSize: 14px fontWeight: 500 lineHeight: 1.71 letterSpacing: 0 caption: fontFamily: hashicorpSans fontSize: 13px fontWeight: 500 lineHeight: 1.38 letterSpacing: 0.2px button: fontFamily: hashicorpSans fontSize: 14px fontWeight: 600 lineHeight: 1.29 letterSpacing: 0 eyebrow: fontFamily: hashicorpSans fontSize: 12px fontWeight: 600 lineHeight: 1.23 letterSpacing: 0.6px

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px pill: 9999px full: 9999px

spacing: hair: 1px xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components: button-primary: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-primary-pressed: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-product-terraform: backgroundColor: "{colors.product-terraform}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-product-vault: backgroundColor: "{colors.product-vault}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-product-waypoint: backgroundColor: "{colors.product-waypoint}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px product-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px product-card-terraform: backgroundColor: "{colors.product-terraform}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px product-card-vault: backgroundColor: "{colors.product-vault}" textColor: "{colors.inverse-ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px product-card-waypoint: backgroundColor: "{colors.product-waypoint}" textColor: "{colors.inverse-ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px feature-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 32px pricing-card-featured: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 32px resource-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 16px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px product-pill: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 64px comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" cta-banner: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xxl}" padding: 48px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px

概览

HashiCorp 的营销画布是一个接近黑色的底色，服务于多产品组合却从不显得平庸。主导表面是 {colors.canvas}（纯黑），上层叠有 {colors.surface-1} 炭灰色卡片和 1px 半透明灰色细线。界面框架是单色的——白色圆角矩形按钮（{components.button-primary}）、白色文字、灰色次级文字——但整个系统由一套逐产品的点缀色凝聚起来，用以标记每段内容所属的 HashiCorp 工具：Terraform 紫、Vault 黄、Consul 红、Waypoint 青、Vagrant 蓝、Nomad 绿、Boundary 珊瑚色。

展示型字体是 hashicorpSans，字重 600/700，行高紧凑（1.17–1.21）；正文是同一字族的 500 字重，行高则刻意放宽（1.50–1.71）——这种反差让它显得编辑感十足，而非企业模板风。CTA 使用小尺寸的 {rounded.md} 8px 圆角而非胶囊形，这让系统读起来是面向开发者的，而非消费级应用。

标志性手法是 product-card 系列——每个 HashiCorp 产品都有自己专属的彩色卡片变体，呈现在首页和基础设施页面上，把 Terraform 抬升到紫色底，Vault 抬升到黄色，Waypoint 抬升到青色。这些并非装饰渐变，而是身份表面。读者在滚动页面时，仅凭余光就能判断某段对应的是哪个产品。

关键特征：

• 黑色画布营销系统：{colors.canvas} 既是首屏、正文、价格、对比表的表面，也是页脚的表面。
• 逐产品色彩身份：Terraform {colors.product-terraform}、Vault {colors.product-vault}、Waypoint {colors.product-waypoint}、Vagrant {colors.product-vagrant}、Consul {colors.product-consul}、Nomad {colors.product-nomad}、Boundary {colors.product-boundary}——每个都有独立的按钮与卡片变体。
• 展示标题采用 hashicorpSans 600/700，行高 1.17–1.21（紧凑）；正文使用同一字族 500 字重，行高 1.50–1.71（宽松）——比例差距即品牌声音。
• CTA 形态为 {rounded.md} 8px——不是胶囊形——让系统读起来是开发工具，而非消费应用。
• 炭灰色表面抬升（canvas → surface-1 → surface-2）取代阴影驱动的层次。
• 1px 半透明灰色细线（rgba(178,182,189,0.1)）勾勒卡片与分隔线——边框被感知但不抢眼。
• 引标字体（12–13px、600 字重、0.6px 正向字距、大写）将每段内容标记为类别标签。

配色

来源页面：hashicorp.com/en（首页）、/en/infrastructure-cloud、/en/products/terraform、/en/pricing、/en/resources?contentType=PDF。

品牌与点缀

• 黑色（{colors.primary}）：系统主表面。画布、页脚、对比表、首屏——皆为黑。
• 白色（{colors.on-primary}）：黑色上的反色文字；button-primary 的画布。
• 点缀蓝（{colors.accent-blue}）：营销表面贯穿全局的超链接色。
• 已访问紫（{colors.semantic-visited}）：已访问链接状态。

表面

• 画布（{colors.canvas}）：默认页面背景。
• 表面 1（{colors.surface-1}）：比画布高一档的炭灰色——特性卡片、价格卡片、资源瓦片。
• 表面 2（{colors.surface-2}）：再高一档——推荐价格卡片、次级按钮、悬浮的产品界面元素。
• 表面 3（{colors.surface-3}）：三档之上——小芯片、徽标、子导航背景。
• 细线（{colors.hairline}）：卡片与分隔线上的 1px 边框。
• 细线 柔（{colors.hairline-soft}）：更柔和的分隔线——对比表行。
• 反色画布（{colors.inverse-canvas}）：纯白——仅用于 button-primary 的表面。

文字

• 墨色（{colors.ink}）：所有标题与强调正文——纯白。
• 墨色 弱（{colors.ink-muted}）：次级文字 #b2b6bd——元信息、页脚列。
• 墨色 柔（{colors.ink-subtle}）：三级文字 #656a76——表单辅助文字、时间戳、脚注。

逐产品身份（标志性）

HashiCorp 的营销并非由单一点缀色凝聚，而是由一套产品专属点缀色凝聚，每个颜色用于标记对应工具所属段落。

• Terraform 紫（{colors.product-terraform}）：Terraform 段落、Terraform CTA、首屏英雄区的紫色 3D 立方体。
• Terraform 亮紫（{colors.product-terraform-bright}）：饱和的高亮——Terraform 页面上的链接强调。
• Vault 黄（{colors.product-vault}）：Vault 段落与 CTA。
• Consul 红（{colors.product-consul}）：Consul 段落。
• Waypoint 青（{colors.product-waypoint}）：Waypoint 段落，深色变体 {colors.product-waypoint-deep} 用于悬浮/激活。
• Vagrant 蓝（{colors.product-vagrant}）：Vagrant 段落。
• Nomad 绿（{colors.product-nomad}）：Nomad 段落。
• Boundary 珊瑚（{colors.product-boundary}）：Boundary 段落。

语义

• 成功（{colors.semantic-success}）：正面状态（同时复用为 Nomad 绿）。
• 警示（{colors.semantic-warning}）：警示状态（同时复用为 Vault 黄）。
• 错误（{colors.semantic-error}）：错误状态（同时复用为 Consul 红）。
• 琥珀 100（{colors.amber-100}）：柔和暖色高亮——抽取但使用克制。
• 琥珀 200（{colors.amber-200}）：饱和的琥珀色，用于警示徽标。
• 蓝 7（{colors.blue-7}）：用于统一核心渐变的深海军蓝。

字体排版

字体族

• hashicorpSans —— HashiCorp 自有的营销字体。几何、干净、略带人文感。回退栈 __hashicorpSans_Fallback_96f0ca（系统字体），再到 -apple-system, BlinkMacSystemFont, Segoe UI, helvetica, arial。

同一字族承载展示、正文、按钮、说明——没有展示与正文双字族搭配。层级靠字重（500 正文 / 600 强调 / 700 展示）与刻意的行高对比（展示紧凑、正文宽松）来区分。

层级

原则

• 展示紧凑，正文宽松。展示型行高 1.17–1.21；正文放宽到 1.50–1.71。字号与行高对比承载层级。
• 字重层级差异较小。500 正文 / 600 强调 / 700 展示。无极端细体/特粗——品牌读起来是工程化的。
• 引标采用正字距大写 12px 作为段头。每个有意义的段落都在标题之上配有一条引标。
• 无等宽字体。尽管是开发者工具品牌，营销表面不使用等宽字体——代码调性留给产品内表面。

字体替代说明

如果没有 hashicorpSans，合适的开源替代包括 Inter（最接近的几何字符集）、Geist Sans、IBM Plex Sans。Inter 的 500 / 600 / 700 字重接近 hashicorpSans 的比例；需手动把行高下调约 0.02 以匹配。

布局

间距体系

• 基础单位：8px（主递增为 4 / 8 / 12 / 16 / 24 / 32 / 48）。
• Token（前言中）：{spacing.hair} 1px · {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• 卡片内边距：产品卡 {spacing.lg} 24px；价格卡 {spacing.xl} 32px；CTA 横幅 {spacing.xxl} 48px。
• 按钮内边距：{components.button-primary} 上 10px · 左右 18px。
• 通用节奏常量：主要段落之间 {spacing.section}（96px）垂直间距。

网格与容器

• 最大内容宽度约 1280px，侧边页边距在桌面端 {spacing.xxl}，到移动端收缩到 {spacing.lg}。
• 产品卡片网格：桌面 3 列，平板 2 列，移动 1 列。
• 价格档位网格：桌面 3 列；下方对比表采用固定宽度左列。
• 资源目录（PDF 库）使用 4 列密集缩略图网格。

留白哲学

暗色画布本身就是留白。段落之间通过表面抬升（canvas → surface-1）而非白色空隙来分隔。在段落内部，慷慨的 {spacing.xl} 32px 间距分隔卡片；{spacing.lg} 24px 分隔行。

层次与深度

产品色这一级不是"模态抬升"——它是身份手法。Terraform 卡片与特性卡片在同一 z 平面上；差别在于意义而非深度。

装饰性深度

• 3D 产品视觉——等距紫色立方体（Terraform）、半透明黄色保险箱（Vault）以及类似的产品染色插画，置于英雄区右栏。
• 1px 半透明灰色细线是主导边缘——边框可见而不抢眼。
• 暗色上无投影。卡片通过表面变化抬升，永远不用阴影。

形状

圆角体系

摄影与插画几何

• 产品 3D 插画在其容器内全幅展示——无内圆角遮罩。
• 客户标识带中的 Logo 芯片位于 {rounded.sm} 6px 瓦片上，配 1px 细线。
• 资源缩略图使用 {rounded.lg} 12px 圆角。

组件

按钮

button-primary —— 白色圆角矩形 CTA。用作所有页面的主要 CTA。

• 背景 {colors.inverse-canvas}，文字 {colors.inverse-ink}，字体 {typography.button}，内边距 10px 18px，圆角 {rounded.md}。
• 按下状态见 button-primary-pressed。

button-secondary —— 炭灰圆角矩形。次级 CTA，"Read docs" / "Talk to sales"。

• 背景 {colors.surface-2}，文字 {colors.ink}，字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

button-tertiary —— 画布上的纯幽灵按钮，仅文字处理。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

button-product-terraform —— Terraform 页面上的 Terraform 染色 CTA。

• 背景 {colors.product-terraform}，文字 {colors.ink}，字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

button-product-vault —— Vault 黄 CTA。

• 背景 {colors.product-vault}，文字 {colors.inverse-ink}（黄色需要深色文字），字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

button-product-waypoint —— Waypoint 青 CTA。

• 背景 {colors.product-waypoint}，文字 {colors.inverse-ink}，字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

（Vagrant 蓝、Nomad 绿、Consul 红、Boundary 珊瑚遵循相同模式，使用各自的 {colors.product-*} token。）

卡片与容器

product-card —— 默认产品展示卡——surface-1 炭灰色。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 24px。

product-card-terraform —— Terraform 紫色底的产品卡（用作身份表面，而非模态抬升）。

• 背景 {colors.product-terraform}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 24px。

product-card-vault —— Vault 黄底。

• 背景 {colors.product-vault}，文字 {colors.inverse-ink}，其余结构相同。

product-card-waypoint —— Waypoint 青底。

• 背景 {colors.product-waypoint}，文字 {colors.inverse-ink}，其余结构相同。

（其他产品变体遵循相同形态，使用各自的产品 token。）

feature-card —— surface-1 上的通用特性亮点。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 24px。

pricing-card —— /en/pricing 上的价格档位。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 32px。

pricing-card-featured —— 推荐档位（通过表面抬升视觉强调）。

• 背景 {colors.surface-2}，其余结构相同。

resource-card —— 资源目录中的 PDF / 白皮书 / 指南瓦片。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body-sm}，圆角 {rounded.lg}，内边距 16px。

输入与表单

text-input + text-input-focused —— 价格席位数和联系表单上的表单字段。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.md}，内边距 10px 14px。
• 聚焦状态保持相同表面；聚焦环为 1px {colors.accent-blue} 描边。

胶囊与芯片

product-pill —— 小型产品名芯片，用于英雄标题之上以及资源卡片上，标注某内容所属产品。

• 背景 {colors.surface-1}，文字 {colors.ink-muted}，字体 {typography.caption}，圆角 {rounded.pill}，内边距 4px 10px。

对比表

comparison-row —— 价格对比表中的单行。

• 背景 {colors.canvas}，文字 {colors.ink-muted}，字体 {typography.body-sm}。行分隔线为 {colors.hairline-soft}。

CTA 横幅

cta-banner —— 长内容页底部用于收尾 CTA 的大圆角面板。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.subhead}，圆角 {rounded.xxl}，内边距 48px。

导航

top-nav —— 黏性黑色顶栏，左侧 HashiCorp logo mark，中间主导航链接，右侧 button-primary（"Sign up"）+ button-secondary（"Sign in"）组合。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}，高度 64px。
• 移动端：主链接折叠为汉堡菜单；主 CTA 保持可见。

页脚

footer —— {colors.canvas} 上的密集链接网格，文字标识位于左侧，5–6 列说明字号的链接。

• 背景 {colors.canvas}，文字 {colors.ink-muted}，字体 {typography.caption}，内边距 64px 32px。

推荐与避免

推荐

• 保留 {colors.canvas}（黑）和 {colors.surface-1}（炭灰）作为系统的两个锚定表面。页面的每个区段都是两者之一。
• 引入针对特定 HashiCorp 产品的新段落时，一致地使用该产品的 {colors.product-*} token——用于段落胶囊、CTA 按钮，以及（适当情况下）展示卡背景。
• CTA 按钮使用 {rounded.md} 8px；HashiCorp 的品牌读起来是工程化的，不是消费级的。
• 紧凑的展示行高（1.17–1.21）与宽松的正文行高（1.50–1.71）相配。对比本身即是品牌声音。
• 每个有意义的段落上方使用引标字体（{typography.eyebrow}，大写，0.6px 字距）。
• 使用表面抬升（canvas → surface-1 → surface-2）在暗色上表达层级。
• 产品染色卡片留给产品身份；通用特性卡留在 {colors.surface-1}。

避免

• 不要发布浅色模式的营销页。HashiCorp 的营销品牌就是暗色。
• 不要在文档化的 ink / ink-muted / ink-subtle 系列之外引入中调灰色文字。
• 不要把 CTA 角切成直角——使用 {rounded.md} 8px，而非 0px。
• 不要在不属于某产品的页面上用其点缀色做 CTA。Vault 页面上的 Terraform 紫是品牌违规。
• 不要在同一视口混合多个产品点缀——系统表达"本段讲的就是这个工具"，混色会破坏这一信号。
• 不要在暗色上加投影；表面抬升承载层级。
• 不要用一种仅用于标题的展示型字体搭配另一种用于正文的字体，去替换 hashicorpSans。品牌靠单一字族贯穿整个层级得以凝聚。

响应式行为

断点

触摸目标

• CTA 按钮（button-primary、button-secondary）在各视口保持 ≥40px 点击高度。
• 产品胶囊桌面 24px 高，触摸视口增长到 28px。
• 表单输入在触摸视口保持 ≥44px 点击目标。

折叠策略

• 导航：右对齐 CTA 的水平导航在 768px 以下折叠为汉堡菜单覆盖层。主 CTA 保持在栏上。
• 产品卡网格：1024px 时 3 列 → 2 列，768px 以下 1 列。
• 价格对比表：768px 以下折叠为按档位手风琴，避免横向滚动。
• 展示型字体：{typography.display-xl} 80px 在移动端向 {typography.display-md} 40px 缩放，同时保持负字距百分比。

图片行为

• 3D 产品插画（立方体、保险箱等）保持宽高比且永不裁剪；768px 以下缩小而非重排。
• 客户 Logo 标识带水平缩放，在窄宽度可换行成第二排。

迭代指南

1. 一次只聚焦一个组件，并以其 components: token 名引用。
2. 引入新段落时，先判断它是通用特性（surface-1）还是产品身份段（product-* 颜色）。
3. 正文默认 {typography.body} 500 字重；仅在 CTA 横幅和特性卡内使用 {typography.subhead}。
4. 编辑后运行 npx @google/design.md lint DESIGN.md。
5. 新增产品变体作为独立组件条目（product-card-nomad、button-product-consul 等）。
6. 把逐产品调色板视为身份 token，而非装饰。若在产品语境之外取用产品色，品牌就在偏移。
7. 每段上方必须有引标字体——省略会让段落读起来像漂浮的。

已知缺口

• 产品色十六进制值来自直接抽取的 --mds-color-* CSS 变量集；它们是 HashiCorp 的规范品牌规格。
• 阴影 token 没有充分文档化，因为暗色表面系统使用表面抬升而非阴影层次。
• 表单字段错误与校验样式在所检视页面中不可见。
• 暗色模式是唯一的营销模式——浅色模式适配未文档化。
• Consul、Nomad、Vagrant、Boundary 的 product-card 变体遵循已文档化的 Terraform / Vault / Waypoint 模式，但仅以散文形式提及；若需要正式条目，可添加为 product-card-consul、product-card-nomad 等。