version: alpha name: Voltagent-Inspired-design-analysis description: An inspired interpretation of Voltagent's design language — a developer-focused AI agent engineering platform whose surface is an unrelenting near-black canvas broken only by a single electric-green brand accent, code-editor mockups inside the hero, and a precise grid of dark feature cards that read like a documentation site dressed as marketing.

colors: primary: "#00d992" primary-soft: "#2fd6a1" primary-deep: "#10b981" on-primary: "#101010" ink: "#f2f2f2" ink-strong: "#ffffff" body: "#bdbdbd" mute: "#8b949e" hairline: "#3d3a39" hairline-soft: "#b8b3b0" canvas: "#101010" canvas-soft: "#1a1a1a" canvas-text-soft: "#f5f6f7"

typography: display-xl: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 60px fontWeight: 400 lineHeight: 60px letterSpacing: -0.65px display-lg: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 36px fontWeight: 400 lineHeight: 40px letterSpacing: -0.9px display-md: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 24px fontWeight: 700 lineHeight: 32px letterSpacing: -0.6px display-sm: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 20px fontWeight: 600 lineHeight: 28px eyebrow-mono: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: 2.52px eyebrow-uppercase: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 600 lineHeight: 28px letterSpacing: 0.45px body-lg: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px body-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 26px body-md-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px body-sm: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 600 lineHeight: 23px caption: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px caption-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 500 lineHeight: 16px code: fontFamily: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace fontSize: 13px fontWeight: 400 lineHeight: 18px code-strong: fontFamily: SFMono-Regular, Menlo, Monaco, Consolas, monospace fontSize: 13px fontWeight: 550 lineHeight: 16px button-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px

rounded: none: 0px xs: 4px sm: 6px md: 8px pill: 9999px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 40px 5xl: 48px 6xl: 64px

components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "{spacing.md} {spacing.3xl}" nav-link: textColor: "{colors.body}" typography: "{typography.body-sm}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" button-outline-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" button-ghost-green: backgroundColor: "{colors.canvas}" textColor: "{colors.primary-soft}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" button-pill-tag: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "{spacing.xs} {spacing.md}" text-input: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" card-feature: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.2xl}" card-feature-emphasized: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" code-mockup: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.code}" rounded: "{rounded.md}" padding: "{spacing.xl}" code-inline-chip: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.canvas-text-soft}" typography: "{typography.code}" rounded: "{rounded.sm}" padding: "{spacing.xxs} {spacing.sm}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "{spacing.5xl} {spacing.3xl}" content-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.5xl} {spacing.3xl}" green-divider-band: backgroundColor: "{colors.canvas}" borderColor: "{colors.primary}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: "{spacing.4xl} {spacing.3xl}"

─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───

ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.2xl}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}"

概览

Voltagent 是一个面向开发者的 AI 智能体工程平台，该品牌自豪地彰显其受众:近黑色 {colors.canvas}(#101010)页面背景边缘对齐延伸，无亮色对应;单一电光绿色点缀({colors.primary} #00d992)保留给 CTA、状态胶囊和品牌闪电字形;字体系统将句首大写的 Inter 与 SF Mono 配对，用于内联代码和命令片段。整个页面读起来像经过润色的文档，但它决定顺便卖点东西。

装饰系统是克制的。没有渐变网格，没有氛围背景，没有插图套件。相反，品牌使用小巧的字体瞬间——一个绿色代码标签(npx voltagent ...)、一个 3 px 轮廓的功能卡片坐落在同一近黑画布上、一个绿色细线分隔符在分区色带之间——来标记其身份。结果是一个感觉经过精心打造的页面:每张卡片都有细线边框，每个片段都有复制到剪贴板按钮，每个指标都以数字等宽字体呈现。

字体保持平静。首屏展示字号 60 px，常规字重，字距 -0.65 px——不是广告牌标题，更像是文档的 H1。分区标题以 36 px / 24 px 类似的字重递降。正文副本为 16 px Inter，行高 1.65，以提供长篇开发者期望的可读性。全大写小标签很常见——EVERYTHING YOU NEED 风格的 mono-caps 标签位于分区标题上方——它们使用 Inter 的 600 字重，宽正字距(2.52 px 在 14 px)。

关键特征:

• 单一电光绿色点缀 {colors.primary}(#00d992)承载每个 CTA、每个状态胶囊和品牌的闪电 logo。没有第二个点缀色。
• 深色画布({colors.canvas} #101010)是唯一的页面表面——没有亮色节奏;整个站点读起来像一张连续的深色表面，被功能卡片的边界所打破。
• 细线边框的功能卡片({colors.hairline} #3d3a39,1 px 实心)是品牌的主要外壳——没有阴影，没有填充，只有精确的细线矩形。
• 一个标志性的虚线边框点缀(1px dashed rgba(79, 93, 117, 0.4))出现在分区之间，作为安静的节奏提示——品牌唯一的装饰线条。
• Inter + SF Mono 配对承载每个字体角色。SF Mono 保留给代码块、内联命令片段和指标计数器。
• 按钮是紧凑的 6 px 圆角矩形(不是胶囊);只有内联状态标签使用 9999 px 的完整胶囊。

配色

品牌与点缀

• 电光绿({colors.primary} — #00d992):单一品牌点缀色。每个主 CTA，每个状态胶囊，每个"live"指示器，以及品牌闪电字形本身。保留专用。
• 柔和主色({colors.primary-soft} — #2fd6a1):在按钮幽灵变体和工具提示 / 焦点指示器内使用的略柔绿色。
• 深主色({colors.primary-deep} — #10b981):正文副本中内联链接颜色使用的更深绿色。

表面

• 画布({colors.canvas} — #101010):默认近黑色页面背景。品牌营销系统中唯一的表面模式。
• 柔和画布({colors.canvas-soft} — #1a1a1a):在代码块和表单输入内部使用的略浅深色填充，以在视觉上将它们与画布区分开。
• 细线({colors.hairline} — #3d3a39):1 px 实心边框——功能卡片、按钮、行之间的分隔符。品牌的通用"边缘"颜色。
• 柔和细线({colors.hairline-soft} — #b8b3b0):在罕见的浅色二级上下文中使用的更浅的分隔色调。

文字

• 墨色({colors.ink} — #f2f2f2):深色画布上的默认文字色——略偏白色以减少对比度带来的视觉疲劳。
• 强墨色({colors.ink-strong} — #ffffff):首屏标题和高强调副本使用的纯白色文字。
• 正文({colors.body} — #bdbdbd):次要文字——长篇分区中的辅助副本、正文段落。
• 静音({colors.mute} — #8b949e):深色上最低优先级文字——说明文字、细字脚注、页脚次要行。
• 柔和画布文字({colors.canvas-text-soft} — #f5f6f7):在代码模拟内使用，以保持代码颜色比周围的正文略冷。

语义

品牌在其公开营销页面上不展示独立的错误 / 警告调色板——底层 Docusaurus 默认语义调色板存在于设计系统中，但保留给产品内 / 文档上下文。营销表面的验证提示使用主绿色表示成功，使用柔和的正文灰色表示缺失状态。

字体排版

字体族

两张字体承载系统:

1. Inter 用于每个展示字、正文、按钮和链接角色。字重 400 / 500 / 600 / 700 是工作集。在整个页面启用 OpenType 功能 "calt" 和 "rlig"，以正确渲染 Inter 的几何连字和上下文替代字形。
2. SF Mono(SFMono-Regular 带 Menlo / Monaco / Consolas / Liberation Mono 回退)用于内联代码、命令片段、终端模拟和品牌的数字计数器。字重 400 / 549 / 550 / 700 都存在——不寻常的 549 / 550 子粗体字重为等宽字体提供了"略重于常规"的强调声音。

层级

原则

• Inter 常规字重 60 px 展示字号 是品牌对 AI 营销中喊叫倾向的冷静回应。轻盈的字距和适中的字重读起来像文档。
• 双字体对比承载技术声音。 Inter 用于叙述;SF Mono 用于任何可能在终端输入的内容。
• 带字距的全大写小标签是品牌的标志标签样式。 2.52 px 在 14 px 是文档化的值。

字体替代品说明

• 无衬线——Inter 是品牌的实际字体;当不能自托管时，替代品就是品牌本身。
• 等宽字体——SF Mono 是 Apple 系统;JetBrains Mono 或 Geist Mono 是最佳免费替代品。

布局

间距系统

• 基础单位:4 px;在代码模拟行高补偿中出现少量 5 / 6.4 px 值。
• Token:{spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px · {spacing.4xl} 40 px · {spacing.5xl} 48 px · {spacing.6xl} 64 px。
• 章节内边距:首屏 + 内容色带使用 {spacing.5xl} 48 px 上 / 下内边距。
• 卡片内部内边距:功能卡片使用 {spacing.2xl} 24 px。

网格与容器

• 营销容器居中于约 1200 – 1400 px;内容在颜色上保持边缘对齐，桌面端水平内边距 {spacing.3xl}。
• 功能卡片网格:桌面端 2 至 3 栏，移动端 1 栏。

响应式策略

断点

触控目标

按钮渲染约 44 px 高(12 px 垂直内边距 + 24 px 行高)。在所有断点均满足 WCAG AAA。

折叠策略

导航在移动端折叠为汉堡菜单;菜单覆盖在底部保持相同的绿色 CTA 固定。功能卡片网格降为 1 栏;首屏字体流畅缩放。

图像行为

代码编辑器模拟渲染为带复制到剪贴板功能的类图像卡片。品牌营销表面上没有摄影作品。

层次与深度

装饰性深度

• 深色画布上的细线卡片——品牌唯一的真正抬升模式。
• {colors.primary} 2 px 实心绿色边框偶尔标记卡片上的"特色"或"激活"状态。
• 1px dashed rgba(79, 93, 117, 0.4) 1 px 虚线分隔符位于分区色带之间，作为安静的节奏提示。

形状

圆角刻度

组件

按钮

button-primary——电光绿 CTA。

• 背景 {colors.primary},文字 {colors.on-primary}(近黑色),标签 {typography.button-md},内边距 {spacing.md} {spacing.lg},形状 {rounded.sm} 6 px。

button-outline-on-dark——深色上的细线次级按钮。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline} 边框,相同的字体 / 内边距 / 形状。

button-ghost-green——纯文本配绿色标签，用于三级动作。

• 背景 {colors.canvas},文字 {colors.primary-soft},无边框。

button-pill-tag——用于类别标签 / 状态标签的内联胶囊。

• 背景 {colors.canvas},文字 {colors.ink},细线边框,正文 {typography.body-sm},内边距 {spacing.xs} {spacing.md},形状 {rounded.pill} 9999 px。

卡片与容器

card-feature——默认功能卡片。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline} 边框,内边距 {spacing.2xl},形状 {rounded.md} 8 px。品牌最重复使用的卡片外壳。

card-feature-emphasized——带 3 px 细线边框以强调的相同卡片。

• 与 card-feature 相同的外壳但有 3 px 实心 {colors.hairline}。

code-mockup——带复制到剪贴板功能的深色代码编辑器卡片。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline},正文 {typography.code}(SF Mono 13 px),内边距 {spacing.xl},形状 {rounded.md}。

code-inline-chip——内联命令片段胶囊。

• 背景 {colors.canvas-soft},文字 {colors.canvas-text-soft},正文 {typography.code},内边距 {spacing.xxs} {spacing.sm},形状 {rounded.sm}。

输入与表单

text-input——深色上的标准文本输入。

• 背景 {colors.canvas-soft},文字 {colors.ink},1 px 实心 {colors.hairline},正文 {typography.body-sm},内边距 {spacing.md} {spacing.lg},形状 {rounded.sm} 6 px。

导航

nav-bar——深色上的固定顶部导航。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.md} {spacing.3xl}。

nav-link——导航中的链接项。

• 文字 {colors.body},使用 {typography.body-sm}。

footer——深色页脚色带。

• 背景 {colors.canvas},文字 {colors.body},内边距 {spacing.4xl} {spacing.3xl}。正文使用 {typography.body-sm}。

标志性组件

hero-band——带 60 px Inter 标题的深色首屏色带。

• 背景 {colors.canvas},文字 {colors.ink}(标题使用 {colors.ink-strong} 白色),内边距 {spacing.5xl} {spacing.3xl}。标题使用 {typography.display-xl}(60 px / 400 字重 / -0.65 px 字距)。标题上方的小标签使用 {typography.eyebrow-mono}(全大写,带字距)。

content-band——承载功能网格的标准内容色带。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.5xl} {spacing.3xl}。分区标题使用 {typography.display-lg}。

green-divider-band——偶尔分隔主要分区的细绿光色带。

• 背景 {colors.canvas},2 px 实心 {colors.primary} 上 / 下边框。品牌唯一的彩色分隔符。

示例(说明性)

自动派生的工具镜像演示表面(scripts/derive-examples-block.mjs)。每个 ex-* 条目引用品牌原生基元,因此下游消费者(/preview-design、/generate-kit)以一致的方式重新设置相同的 10 个表面。TO_FILL 标记表示缺失的基元——在 LLM 判断步骤中解决。

ex-pricing-tier——默认价格层卡片。重用功能卡片外壳,使用品牌 canvas-soft 表面。

• 属性:backgroundColor、textColor、borderColor、rounded、padding

ex-pricing-tier-featured——特色 / 高亮价格层——极性翻转表面(亮模式下深色填充 + 浅色文字,暗模式下浅色填充 + 深色文字)。

• 属性:backgroundColor、textColor、rounded、padding

ex-product-selector——What's Included 摘要卡片——为 SaaS / B2B 垂直领域重新利用(不是字面意义上的产品画廊)。

• 属性:backgroundColor、rounded、padding

ex-cart-drawer——订阅摘要——为 SaaS / B2B 重新利用(按附加项的逐项条目,不是字面意义上的购物车)。

• 属性:backgroundColor、rounded、padding、item-divider

ex-app-shell-row——App Shell 示例内的侧边栏导航行。激活态使用品牌主色作为指示器。

• 属性:backgroundColor、activeIndicator、rounded、padding

ex-data-table-cell——默认数据表 th + td 外壳。表头使用 mono-caps 标题字体;正文使用 body-sm。

• 属性:headerBackground、headerTypography、bodyTypography、cellPadding、rowBorder

ex-auth-form-card——登录 / 注册卡片。重用功能卡片外壳,内含 text-input 基元。

• 属性:backgroundColor、rounded、padding

ex-modal-card——模态对话框表面——与功能卡片外壳相同,带抬升阴影。

• 属性:backgroundColor、rounded、padding

ex-empty-state-card——空状态插图框。

• 属性:backgroundColor、rounded、padding、captionTypography

ex-toast——Toast 通知表面——功能卡片形状 + 中等阴影。

• 属性:backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 为每个主 CTA、闪电 logo 字形和 live 状态指示器保留 {colors.primary}(#00d992)。绿色是品牌的重心。
• 使用深色 {colors.canvas}(#101010)作为唯一的页面表面。没有亮色节奏。
• 用 1 px {colors.hairline} 边框而非阴影构建卡片。深色上的细线就是品牌的抬升系统。
• 将 Inter(句首大写)与 SF Mono(内联代码、命令片段)配对。每个全大写瞬间使用 Inter 的 600 字重,带 2.52 px 字距——而不是单独的等宽字体。
• 按钮使用 {rounded.sm} 6 px,卡片使用 {rounded.md} 8 px,内联状态标签仅使用 {rounded.pill} 9999 px。

避免

• 不要引入亮色对应面。品牌仅限深色画布。
• 不要将主绿色用作正文文字填充。它仅供 CTA 使用。
• 不要在卡片上投下柔和投影。品牌使用细线 + 偶尔的光晕，从不使用材质阴影。
• 不要以粗体(700+)渲染首屏标题。品牌的展示字号有意保持冷静的 400 字重。
• 不要用不同的字体家族替换 Inter 或 SF Mono——两张字体都是品牌声音和配对的一部分。