version: alpha name: Vercel-Inspired-design-analysis description: An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that acts as the entire decorative system, paired with a custom geometric sans for headlines and a monospaced caption face for technical labels.

colors: primary: "#171717" on-primary: "#ffffff" ink: "#171717" body: "#4d4d4d" mute: "#888888" hairline: "#ebebeb" hairline-strong: "#a1a1a1" canvas: "#ffffff" canvas-soft: "#fafafa" canvas-soft-2: "#f5f5f5" link: "#0070f3" link-deep: "#0761d1" link-bg-soft: "#d3e5ff" success: "#0070f3" error: "#ee0000" error-soft: "#f7d4d6" error-deep: "#c50000" warning: "#f5a623" warning-soft: "#ffefcf" warning-deep: "#ab570a" violet: "#7928ca" violet-soft: "#d8ccf1" violet-deep: "#4c2889" cyan: "#50e3c2" cyan-soft: "#aaffec" cyan-deep: "#29bc9b" highlight-pink: "#ff0080" highlight-magenta: "#eb367f" gradient-develop-start: "#007cf0" gradient-develop-end: "#00dfd8" gradient-preview-start: "#7928ca" gradient-preview-end: "#ff0080" gradient-ship-start: "#ff4d4d" gradient-ship-end: "#f9cb28" selection-bg: "#171717" selection-fg: "#f2f2f2"

typography: display-xl: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 48px fontWeight: 600 lineHeight: 48px letterSpacing: -2.4px display-lg: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 32px fontWeight: 600 lineHeight: 40px letterSpacing: -1.28px display-md: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 24px fontWeight: 600 lineHeight: 32px letterSpacing: -0.96px display-sm: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 20px fontWeight: 600 lineHeight: 28px letterSpacing: -0.6px body-lg: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px letterSpacing: 0px body-md: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 24px body-md-strong: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 24px body-sm: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: -0.28px body-sm-strong: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: -0.28px caption: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px caption-mono: fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace fontSize: 12px fontWeight: 400 lineHeight: 16px code: fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace fontSize: 13px fontWeight: 400 lineHeight: 20px button-md: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 20px button-lg: fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 24px

rounded: none: 0px xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill-sm: 64px pill: 100px full: 9999px

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

components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" height: 64px padding: "{spacing.sm} {spacing.lg}" nav-link: textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.sm}" nav-cta-signup: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm-strong}" rounded: "{rounded.sm}" padding: "0px {spacing.xs}" height: 28px nav-cta-login: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.sm}" padding: "0px {spacing.xs}" height: 28px nav-cta-ask-ai: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm-strong}" rounded: "{rounded.sm}" padding: "0px {spacing.xs}" height: 28px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-lg}" rounded: "{rounded.pill}" padding: "0px {spacing.sm}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-lg}" rounded: "{rounded.pill}" padding: "0px {spacing.sm}" button-primary-sm: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "0px {spacing.xs}" button-secondary-sm: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "0px {spacing.xs}" tab-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill-sm}" padding: "0px {spacing.md}" icon-button-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.full}" card-marketing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.lg}" card-marketing-large: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "{spacing.xl}" card-soft: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.lg}" template-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.md}" code-editor-mockup: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.code}" rounded: "{rounded.md}" padding: "{spacing.lg}" form-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "0px {spacing.sm}" height: 40px form-input-sm: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "0px {spacing.sm}" height: 32px form-input-lg: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "0px {spacing.sm}" height: 48px badge-secondary: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.body}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: "0px {spacing.xs}" pricing-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "{spacing.xl}" pricing-card-featured: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "{spacing.xl}" logo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: "{spacing.lg} {spacing.xl}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "{spacing.4xl} {spacing.lg}" feature-mesh-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.5xl} {spacing.lg}" showcase-band-light: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.5xl} {spacing.lg}" showcase-band-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-lg}" padding: "{spacing.5xl} {spacing.lg}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: "{spacing.4xl} {spacing.lg}" link-inline: textColor: "{colors.link}" typography: "{typography.body-md}" banner-marketing: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.sm}"

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

ex-pricing-tier: description: "Default tier card. Mirrors pricing-card chrome on canvas-soft surface with a hairline border." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-pricing-tier-featured: description: "Featured tier — polarity-flipped to ink primary with white text and white CTA." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-product-selector: description: "What's Included summary card — repurposed for the brand's GPU / inference / Pro feature tiers." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.lg}" ex-cart-drawer: description: "Subscription summary — line items per add-on (NOT a literal e-commerce cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.lg}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.sm}" ex-data-table-cell: description: "Mirrors the brand's table chrome. Header uses caption-mono uppercase mono; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption-mono}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.xs} {spacing.sm}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Mirrors card-marketing-large chrome with form-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-modal-card: description: "Modal dialog surface — same chrome as card-marketing-large with Level 5 modal shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-empty-state-card: description: "Empty-state illustration frame. Generous padding on canvas-soft." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — flat-cornered card-marketing chrome with Level 4 shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" typography: "{typography.body-sm}"

概览

Vercel 是一个开发者平台品牌——这个页面是部署仪表盘的营销表面，为已经了解语法的工程师而写。它以网页上最干净的简洁系统之一赢得了这种姿态：近白 {colors.canvas-soft} 正文背景，墨近黑 {colors.ink} 文字，200 级灰阶让每个分隔线、边框和禁用状态都拥有其独立的层级。品牌在营销尺度上引入色彩的唯一地方是多停顿网格渐变({colors.gradient-develop-start} → {colors.gradient-preview-end} → {colors.gradient-ship-start} → 青/品红/琥珀)漂浮在氛围背景中，绝不会被缩小到色板。这种渐变就是整个装饰系统。

字体是第二个决定性的声音。品牌自家的定制几何无衬线(Geist)以 600 字重承担展示字，以 500 字重承担按钮，以 400 字重承担正文。一款配套的等宽字体(Geist Mono)承担技术标签:终端模拟、代码块、有时的文件标题。标题使用句首大写，并采用激进的负字距(-2.4px 在 48 px 首屏上)——品牌从不正向调整字距，除等宽标签外从不大写。

表面使用四级阶梯:{colors.canvas}(纯白卡片)、{colors.canvas-soft} 98%(页面正文)、{colors.canvas-soft-2} 95%(偶发内嵌区域)、{colors.primary}(当分区需要深色处理时作为极性翻转色带使用的墨近黑)。阴影极其微妙——每张抬升的卡片都承载一个堆叠阴影，由 0px 1px 1px #00000005 + 0px 2px 2px #0000000a + 一个内嵌边框构成。卡片从不在沉重的投影上漂浮；它们依靠细线 + 柔和光晕停留在页面上。

关键特征:

• 单一黑色墨水主 CTA {colors.primary} 承载每个转化目标，配以白底白字的 button-secondary 作为次要动作。品牌在营销 CTA 上使用 100 px 胶囊形，在应用内导航按钮上使用紧凑的 6 px 方形。
• 多停顿网格渐变(青-蓝-品红-琥珀)是唯一的装饰外壳——用于首屏尺度和功能色带氛围背景内。它就是品牌。
• 每个分区眉标和小标签使用等宽字体 {typography.caption-mono} 或 {typography.code};其他一切使用几何无衬线。
• 微妙的堆叠阴影层次——三个偏移量叠加以 4-12 % 黑色不透明度——从不是单一沉重的投影。
• 完整的 100–1000 灰 + 蓝 + 红 + 琥珀 + 绿 + 青 + 紫 + 粉色阶作为系统 token 集合存在，但营销表面只使用 100、1000 和 700 级别的色调；其余保留在设计系统 token 中供产品内表面使用。
• "Active CPU" 价格节奏:pricing-card 在价格页上以 3 栏布局，其中 pricing-card-featured(Pro 层)极性翻转为 {colors.primary}，与白色卡片兄弟元素形成对比。

配色

品牌与点缀

• 墨色({colors.primary} — #171717):单一主 CTA 颜色。近纯黑的墨水，承担每个注册胶囊、每个页脚 CTA、深色色带的极性翻转。在浅色表面上用作文字颜色。(从 --ds-gray-1000 解析。)
• 青色({colors.cyan} — #50e3c2):品牌渐变中使用的标志性薄荷青，以及 Geist 系统聚光 token 内。出现在首屏渐变停顿处。
• 亮粉({colors.highlight-pink} — #ff0080):品牌的高亮品红，用作预览渐变对中的高饱和停顿。
• 紫色({colors.violet} — #7928ca):预览渐变的起始深紫色，以及开发者控制台高亮内。
• 链接蓝({colors.link} — #0070f3):品牌的主链接色以及遗留的 --geist-success 语义色。

表面

• 画布({colors.canvas} — #ffffff):纯白卡片 / 对话框 / 模态表面。
• 柔和画布({colors.canvas-soft} — #fafafa):默认页面背景——98 % 白。几乎每个分区都坐落在这个色调上。
• 柔和画布 2({colors.canvas-soft-2} — #f5f5f5):用于"代码编辑器内部背景"、模板卡片悬停态和下拉菜单的略深内嵌表面。
• 细线({colors.hairline} — #ebebeb):1 px 分隔线——表格行、卡片边框、输入边框。
• 强细线({colors.hairline-strong} — #a1a1a1):500 级灰色，用作浅色色带上的略强分隔线，以及弱化文字色。

文字

• 墨色({colors.ink} — #171717):浅色表面上的每个标题和正文段落。
• 正文({colors.body} — #4d4d4d):次要文字——副标题、正文说明、导航链接未激活文字、页脚列正文。
• 静音({colors.mute} — #888888):最低优先级文字——占位文字、细字脚注、低调标签。
• 主色之上({colors.on-primary} — #ffffff):{colors.primary} 表面上的所有文字。

语义

• 成功 / 链接({colors.success} — #0070f3):品牌的遗留成功指示器，兼作主链接色。内联正文链接在 hover 时显示下划线。
• 深链接({colors.link-deep} — #0761d1):内联链接的按下 / 已访问色调。
• 柔和链接底色({colors.link-bg-soft} — #d3e5ff):"what's new" 胶囊横幅和信息徽标的柔和粉彩蓝填充。
• 错误({colors.error} — #ee0000):破坏性动作和表单错误的校验红。
• 柔和错误({colors.error-soft} — #f7d4d6):破坏态背景的柔和粉彩红。
• 深错误({colors.error-deep} — #c50000):按下 / 深破坏态。
• 警告({colors.warning} — #f5a623):警示 / 待定状态指示器。
• 柔和警告({colors.warning-soft} — #ffefcf) / 深警告({colors.warning-deep} — #ab570a):背景 + 按下变体。

品牌渐变

品牌的标志装饰是三对渐变堆栈:

• 开发({colors.gradient-develop-start} #007cf0 → {colors.gradient-develop-end} #00dfd8)——用于标记"部署" / "开发"节奏的蓝到青色对。
• 预览({colors.gradient-preview-start} #7928ca → {colors.gradient-preview-end} #ff0080)——用于"预览"表面的紫到粉色对。
• 发布({colors.gradient-ship-start} #ff4d4d → {colors.gradient-ship-end} #f9cb28)——用于"发布"表面的珊瑚到琥珀色对。

三对渐变在用作首屏氛围背景时合并为单一多色网格渐变。将渐变视为一个统一对象——不要裁剪到单一颜色，不要重新排列停顿，不要缩小。仅在首屏尺度使用。

字体排版

字体族

两款定制字体承载整个系统:

1. 一款定制几何无衬线(提取为 Geist)用于所有展示字、正文、按钮、链接和标签。字重 400 / 500 / 600 是工作集;字体从不以 700 或更粗出现。展示字号下字距激进为负(-2.4 px 在 48 px 首屏上，-1.28 px 在 32 px 分区上);正文保持中性或略负的字距。
2. 一款定制等宽字体(提取为 Geist Mono)用于终端模拟、代码块和小型 mono 标题标签——任何想表达"技术性"的内容。仅使用 400 字重，12 – 13 px。字距中性。

一款压缩展示无衬线(Space Grotesk)作为第三种字体被加载，用于偶发的编辑瞬间，但不在捕获的任何表面中作为主字体渲染。

层级

原则

• 负字距是声音的一部分。 展示字号使用激进的 -2.4 到 -0.6 px 字距。恢复到默认字距会破坏品牌。
• 句首大写标题，句号结尾。 像 "Build and deploy on the AI Cloud." 这样的标题以刻意的句号结尾——这种标点是品牌声音的一部分。
• 等宽字体仅用于技术层。 分区眉标、代码块、终端模拟。正文段落从不使用等宽。
• 600 字重是展示上限。 几何无衬线字体从不以 700 / 800 出现。品牌因此呈现出更平静的系统感。

字体替代品说明

两款主字体是专有的(为品牌定制)。开源替代品:

• 几何无衬线——Inter(400 / 500 / 600)是最接近的风格匹配;开启 font-feature-settings: "ss01", "ss02" 启用几何替代字形。Satoshi 是可接受的次选。
• 等宽字体——JetBrains Mono(400)在 12 – 13 px 下匹配技术声音。IBM Plex Mono 是次优选择。

布局

间距系统

• 基础单位:4 px。品牌的 --geist-space token 恰好是 4 px，每个采集到的值都是 4 的倍数。
• Token:{spacing.xxs} 4 px · {spacing.xs} 8 px · {spacing.sm} 12 px · {spacing.md} 16 px · {spacing.lg} 24 px · {spacing.xl} 32 px · {spacing.2xl} 40 px · {spacing.3xl} 48 px · {spacing.4xl} 64 px · {spacing.5xl} 96 px · {spacing.6xl} 128 px · {spacing.section} 192 px。
• 章节内边距:营销色带使用 {spacing.4xl} 到 {spacing.5xl} 上 / 下内边距。首屏色带拉伸到 {spacing.section}，给网格渐变留出呼吸空间。
• 卡片内部内边距:营销卡片使用 {spacing.lg} 到 {spacing.xl};模板网格卡片在更密集的网格中保持更紧凑的 {spacing.md}。
• 内联间距:按钮行、导航行和标签行在兄弟元素之间使用 {spacing.sm} 到 {spacing.md}。品牌的 --geist-gap 恰好是 24 px。

网格与容器

• 最大宽度:约 1400 px(--ds-page-width);遗留的 --geist-page-width 是 1200 px，仍出现在某些营销表面上。内容居中，桌面端水平内边距 {spacing.lg} 24 px，移动端 {spacing.md} 16 px。
• 栏模式:
  • 三功能行:桌面端 3 栏，移动端 1 栏(如"Web Apps / Composable Commerce / Multi-tenant Platforms"行)。
  • 标签胶囊行:5 栏居中的 tab-ghost 胶囊行。
  • 模板网格群:桌面端 5 栏，缩放到移动端 1 栏。
  • 价格层网格:桌面端 3 栏，中间层极性翻转。
  • Logo 条:约 5 个 logo 宽，单行。

留白理念

网格渐变承担大部分装饰重任；留白分隔色带。章节间距宽裕——色带之间 {spacing.4xl} 到 {spacing.5xl} 让渐变得以呼吸。卡片内部，标题 / 段落堆叠紧凑({spacing.xs} 8 px 间隙)，然后在 CTA 群之前留出更宽的间距。页面读起来像是工程化的——大间距 + 紧凑内部，绝非反过来。

响应式策略

断点

触控目标

button-primary 胶囊在导航中渲染约 32 px 高，在营销上下文中约 48 px 高。营销 CTA 在所有断点都舒适满足 WCAG AAA;导航按钮通过移动端的 {spacing.xs} 内边距膨胀触摸区域以满足 44 × 44 px 下限。

折叠策略

• 导航:桌面端为完整链接行 + Ask AI / Log In / Sign Up 胶囊。移动端折叠为 logo + 汉堡菜单，菜单作为全屏覆盖打开。
• 首屏:网格渐变保持居中;标题 + 正文在所有断点垂直堆叠(品牌不使用拆分首屏模式)。
• 三功能行:在上述断点处 3 → 2 → 1;卡片在所有视口保持 {rounded.md} 8 px 形状。
• 价格卡片网格:桌面端 3 栏，移动端垂直堆叠，pricing-card-featured 始终位于中间。
• 模板网格:5 → 3 → 2 → 1。每个 template-card 在图像上保持 16:9 宽高比。

图像行为

• 网格渐变:渲染为内联 SVG 或 canvas 绘制渐变;随首屏容器流畅缩放;从不裁剪，从不平铺。
• 客户 logo:在 logo 条中渲染为单色 SVG;统一 24 px 高度。
• 代码编辑器模拟:深色 {colors.primary} 矩形，内部渲染等宽文字；在布局层面被视为图像。
• 模板缩略图:16:9 横向嵌入 {rounded.md} 卡片外壳内;懒加载;占位状态下保持一致的灰度调色。

层次与深度

品牌使用堆叠阴影——多个小偏移层叠以模拟自然光——从不是单一的 8 px 模糊通用投影。内嵌细线环始终被加上，以保持卡片边缘锐利。

装饰性深度

• 网格渐变作为氛围深度:首屏的多停顿渐变是品牌唯一的"氛围"效果——作为扁平 2-D 背景而非 3-D 插图应用。
• 极性翻转的深色色带作为分区深度:将表面从 {colors.canvas-soft} 切换到 {colors.primary}(深墨色)是色带之间品牌的主要深度提示。
• 内嵌阴影 + 投影组合:卡片的内嵌 1 px 环与多停顿投影的组合产生"卡片停留在页面上"的效果，从不感觉材质厚重。

形状

圆角刻度

摄影几何

• 网格渐变:全屏出血 2-D 氛围背景，从不裁剪到框架；视为页面的壁纸。
• 客户 logo:单色 SVG，在 flex 行中保持 24 px 高度。
• 代码编辑器模拟:16:10 深色矩形，{rounded.md} 圆角。
• 模板缩略图:16:9 横向嵌入 {rounded.md} 外壳内。
• 展示图像:2:1 或 16:9 嵌入 {rounded.lg} 到 {rounded.xl} 外壳内，带堆叠阴影。

组件

按钮

button-primary——标准的 100 px 圆角黑色胶囊，营销尺度。

• 背景 {colors.primary},文字 {colors.on-primary},标签使用 {typography.button-lg},内边距 0px {spacing.sm} 12 px,形状 {rounded.pill} 100 px。与营销 flex 布局搭配时渲染约 48 px 高。

button-secondary——营销色带内与黑色主按钮配对的白色胶囊。

• 背景 {colors.canvas},文字 {colors.ink},与 button-primary 相同的字体 + 内边距,形状 {rounded.pill}。

button-primary-sm——导航和价格卡片 CTA 内使用的小型主胶囊。

• 背景 {colors.primary},文字 {colors.on-primary},标签使用 {typography.button-md}(14 px / 500),形状 {rounded.pill}。

button-secondary-sm——与 button-primary-sm 配对的小型白色胶囊。

• 背景 {colors.canvas},文字 {colors.ink},与 button-primary-sm 相同的字体 + 形状。

tab-ghost——居中的行标签胶囊("AI Apps / Web Apps / Ecommerce / Marketing / Platforms")。

• 背景 {colors.canvas},文字 {colors.ink},标签使用 {typography.body-sm},内边距 0px {spacing.md},形状 {rounded.pill-sm} 64 px。

icon-button-circular——圆形图标容器(常包含"?"或箭头)。

• 背景 {colors.canvas},深色图标,1 px 实心细线边框,形状 {rounded.full}。

导航 CTA:

nav-cta-signup——导航行中的小型黑色"Sign Up"按钮。

• 背景 {colors.primary},文字 {colors.on-primary},标签 {typography.body-sm-strong},内边距 0px {spacing.xs},高度 28 px,形状 {rounded.sm} 6 px(品牌的 --geist-radius)。

nav-cta-login——导航中的白色"Log In"按钮。

• 背景 {colors.canvas},文字 {colors.ink},与 nav-cta-signup 相同的字体 / 高度 / 形状。

nav-cta-ask-ai——带浅边框的小型"Ask AI"按钮。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline} 边框(提取为 0px solid rgb(235, 235, 235)),相同的字体 / 高度 / 形状。

卡片与容器

card-marketing——标准营销功能卡片(3 栏分区卡片)。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.lg} 24 px,形状 {rounded.md} 8 px(--geist-marketing-radius)。承载 3 级柔和堆叠阴影。

card-marketing-large——"compute model" / "AI Gateway" 招牌使用的大型营销卡片。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.xl},形状 {rounded.lg} 12 px。承载 4 级浮动堆叠阴影。

card-soft——群组内使用的柔和色调卡片(比 canvas-soft 浅)。

• 背景 {colors.canvas-soft},文字 {colors.ink},内边距 {spacing.lg},形状 {rounded.md}。

template-card——"Deploy your first app" 网格中的部署模板卡片。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.md} 16 px,形状 {rounded.md} 8 px。顶部承载 16:9 缩略图。

code-editor-mockup——营销色带内的深色代码预览表面。

• 背景 {colors.primary},文字 {colors.on-primary},正文使用 {typography.code}(13 px / Geist Mono),内边距 {spacing.lg} 24 px,形状 {rounded.md} 8 px。

pricing-card——默认价格层卡片。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.xl} 32 px,形状 {rounded.lg} 12 px。内部:层名称使用 {typography.display-md},价格使用 {typography.display-xl},功能列表使用 {typography.body-md} 行,CTA 位于底部。

pricing-card-featured——极性翻转的"Pro"层卡片。

• 背景 {colors.primary},文字 {colors.on-primary},与 pricing-card 相同的形状 + 内边距。CTA 反转为 button-secondary-sm(黑色卡片上的白色胶囊)。

输入与表单

form-input——标准文本输入。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline} 边框,正文使用 {typography.body-sm}(14 px),内边距 0px {spacing.sm},高度 40 px(品牌的 --geist-form-height),形状 {rounded.sm} 6 px。

form-input-sm——用于紧凑表单的小高度变体(32 px 高)。

• 与 form-input 相同但高度为 32 px(--geist-form-small-height)。

form-input-lg——用于首屏 CTA 的大高度变体(48 px 高)。

• 与 form-input 相同但高度为 48 px(--geist-form-large-height);正文使用 {typography.body-md} 16 px。

导航

nav-bar——固定顶部导航。

• 背景 {colors.canvas},文字 {colors.ink},高度 64 px(品牌的 --header-height),内边距 {spacing.sm} {spacing.lg}。布局:logo 在左,链接行居中,"Ask AI / Log In / Sign Up" 群组在右。

nav-link——nav-bar 内的居中链接行。

• 文字 {colors.body},使用 {typography.body-sm},内边距 {spacing.xs} {spacing.sm},形状 {rounded.full}(幽灵胶囊——仅在 hover 或激活时可见,但圆角已记录)。

footer——底部 4 栏导航。

• 背景 {colors.canvas},文字 {colors.body},内边距 {spacing.4xl} {spacing.lg}。列标题使用 {typography.caption-mono}(全大写 mono 效果);链接行使用 {typography.body-sm}。

标志性组件

hero-band——带网格渐变背景的白色首屏。

• 背景 {colors.canvas}(某些表面上为 {colors.canvas-soft}),文字 {colors.ink},内边距 {spacing.4xl} {spacing.lg}。内部:标题上方的小型 mono 徽标,标题使用 {typography.display-xl}(句首大写,句号结尾),引段使用 {typography.body-lg},然后是带 button-primary + button-secondary 的 CTA 行。网格渐变位于后方，缩放到大约占据色带的上半部分。

feature-mesh-band——承载网格渐变氛围背景和功能副本的次级分区。

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

showcase-band-light——柔和画布分区("Deploy your first app in seconds")。

• 背景 {colors.canvas-soft},文字 {colors.ink},内边距 {spacing.5xl} {spacing.lg}。

showcase-band-dark——极性翻转的深色色带("A compute model for all workloads")。

• 背景 {colors.primary},文字 {colors.on-primary},内边距 {spacing.5xl} {spacing.lg}。分区标题使用 {typography.display-lg}(白底黑字)。通常包含一个与色带齐平的 code-editor-mockup。

logo-strip——页面顶部附近的客户 logo 包装行。

• 背景 {colors.canvas},文字 {colors.body},内边距 {spacing.lg} {spacing.xl}。Logo 渲染为统一高度的单色 SVG。

badge-secondary——小型内联元数据胶囊("New"、"Beta"、"Live")。

• 背景 {colors.canvas-soft},文字 {colors.body},正文使用 {typography.caption},内边距 0px {spacing.xs},形状 {rounded.full}。

banner-marketing——页面顶部的"Introducing X"公告胶囊。

• 背景 {colors.canvas-soft},文字 {colors.body},正文使用 {typography.body-sm},内边距 {spacing.xs} {spacing.sm},形状 {rounded.full}。

link-inline——正文副本中的内联链接。

• 文字 {colors.link}(#0070f3),正文使用 {typography.body-md},带下划线。

示例(说明性)

自动派生的工具镜像演示表面(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 保留 {colors.primary}(#171717)。黑色墨水就是转化目标。
• 每个营销尺度 CTA 使用 {rounded.pill} 100 px，导航尺度按钮使用 {rounded.sm} 6 px。两种胶囊尺度有意识地共存。
• 每个标题以 {typography.display-*} 600 字重的句首大写呈现，通常以句号结尾。激进的负字距是声音的一部分。
• 仅在首屏尺度上将品牌网格渐变用作氛围装饰——绝不要缩小到图标，绝不要简化为单一颜色。
• 层叠堆叠阴影(多个小偏移加内嵌细线)，而不是单一沉重的投影。品牌的抬升比 Material 更平静。
• 在 {colors.canvas-soft} → {colors.canvas} → {colors.primary} 极性翻转色带之间循环页面表面;深色色带就是深度提示。
• 每个代码块和技术眉标都使用 {typography.code} / {typography.caption-mono}。等宽字体是平台的声音。

避免

• 不要引入第六个点缀色。品牌以墨色 + 灰色 + 四对渐变调色板运行;新点缀色会削弱声音。
• 不要以全大写渲染标题。句首大写 + 负字距是不可协商的。
• 不要在卡片上投下单一沉重的投影。品牌的抬升由堆叠的小偏移 + 内嵌细线环构建。
• 不要以图标尺度或单一颜色简化形式渲染品牌渐变。渐变仅存在于首屏尺度。
• 不要将几何无衬线字体提升到 700 字重。品牌的展示上限是 600。
• 不要在同一屏幕上混用营销 100 px 胶囊 CTA 形状和 6 px 导航圆角——选择一个尺度并保持。
• 不要将正文段落设置为等宽字体。等宽字体仅用于代码 + 技术标签。