英伟达 NVIDIA

version: alpha name: NVIDIA-design-analysis description: | An engineering-grade marketing system organized around two surface modes — a deep black canvas for hero and footer chapters and a flat paper-white canvas for body content — connected by a single, almost violently saturated NVIDIA Green accent that carries every CTA, every active tab, and the small decorative corner squares that mark out cards. The system is unapologetically angular: 2px radius across every surface, tight bold sans-serif typography in NVIDIA's proprietary EMEA cut, and a hairline gray rule that separates dense multi-column technical content. There is no decorative gradient, no atmospheric mesh, no soft drop shadow — just black, white, gray, and green stacked into a structured editorial grid that scales from product cards to massive industry landing pages without bending its rules.

colors: primary: "#76b900" on-primary: "#000000" primary-dark: "#5a8d00" ink: "#000000" canvas: "#ffffff" surface-dark: "#000000" surface-soft: "#f7f7f7" surface-elevated: "#1a1a1a" hairline: "#cccccc" hairline-strong: "#5e5e5e" body: "#1a1a1a" mute: "#757575" stone: "#898989" ash: "#a7a7a7" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.7)" link-blue: "#0046a4" blue-700: "#0046a4" error: "#e52020" error-deep: "#650b0b" warning: "#df6500" warning-bright: "#ef9100" success-deep: "#3f8500" accent-yellow-pale: "#feeeb2" accent-purple: "#952fc6" accent-purple-deep: "#4d1368" accent-purple-pale: "#f9d4ff" accent-green-pale: "#bff230"

typography: display-xl: fontFamily: NVIDIA-EMEA fontSize: 48px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 display-lg: fontFamily: NVIDIA-EMEA fontSize: 36px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-xl: fontFamily: NVIDIA-EMEA fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-lg: fontFamily: NVIDIA-EMEA fontSize: 22px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0 heading-md: fontFamily: NVIDIA-EMEA fontSize: 20px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-sm: fontFamily: NVIDIA-EMEA fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 card-title: fontFamily: NVIDIA-EMEA fontSize: 17px fontWeight: 700 lineHeight: 1.47 letterSpacing: 0 body-md: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: NVIDIA-EMEA fontSize: 15px fontWeight: 400 lineHeight: 1.67 letterSpacing: 0 button-lg: fontFamily: NVIDIA-EMEA fontSize: 18px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 button-md: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 button-sm: fontFamily: NVIDIA-EMEA fontSize: 14.4px fontWeight: 700 lineHeight: 1 letterSpacing: 0.144px link-md: fontFamily: NVIDIA-EMEA fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-md: fontFamily: NVIDIA-EMEA fontSize: 14px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 textTransform: uppercase caption-sm: fontFamily: NVIDIA-EMEA fontSize: 12px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0 caption-xs: fontFamily: NVIDIA-EMEA fontSize: 11px fontWeight: 700 lineHeight: 1 letterSpacing: 0 utility-xs: fontFamily: NVIDIA-EMEA fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 textTransform: uppercase

rounded: none: 0px xs: 1px sm: 2px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 64px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 11px 24px height: 44px button-primary-active: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-outline: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 11px 13px button-outline-on-dark: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-ghost-link: textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.none}" button-disabled: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ash}" rounded: "{rounded.sm}" pill-tab: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.sm}" padding: 10px 18px pill-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-sm}" rounded: "{rounded.sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" search-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 10px 16px height: 40px product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.sm}" padding: 24px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 32px resource-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.sm}" padding: 24px hero-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 80px 48px cta-strip-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-xl}" rounded: "{rounded.none}" padding: 64px 48px callout-stat: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.sm}" padding: 32px corner-square: backgroundColor: "{colors.primary}" rounded: "{rounded.none}" size: 12px utility-bar: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption-sm}" rounded: "{rounded.none}" height: 32px primary-nav: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 64px breadcrumb-bar: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" height: 48px sub-nav-strip: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-mute}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 48px link-inline: textColor: "{colors.link-blue}" typography: "{typography.link-md}" badge-tag: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.sm}" padding: 4px 10px

概述

NVIDIA 的营销系统就像一份学会了平面设计的工程文档——每个页面都是密集、事实性信息的结构化瀑布流，排列在纸白色网格上，并由顶部和底部的深黑色首屏/页脚章节构成框架。整个系统只有一种点缀色，却承担了全部工作：NVIDIA Green（{colors.primary} — #76b900），用于每个主 CTA、每个激活标签、深色表面上的每个链接提示，以及标记卡片容器的小型装饰性角标方块。没有其他元素争夺注意力。

系统的性格来自极度克制的字体排版和近乎严苛的锐利几何。每个容器、按钮和图像都使用 {rounded.sm}（2px）——这个 token 几乎不可察觉，但又不为零，使系统呈现 CAD 输出般精确、技术化的感觉，而非温暖的消费软件。卡片置于纯 {colors.canvas} 上，带 {colors.hairline} 细线边框（无阴影、无层次抬升），并以紧凑的 8px 基础间距节奏分隔。长篇页面会将 6–10 张此类卡片堆叠成多列技术网格，却从不引入装饰性中断。

黑色画布的首屏和页脚章节是系统的“标题时刻”——一张通栏摄影或 3D 渲染图，以 {typography.display-xl} 白色标题文案覆盖其上，配一个绿色 CTA 按钮和一个小型绿色角标方块作为唯一装饰。其他一切均处于从属地位。

关键特征：

• 单一点缀色系统：{colors.primary} 承载每个 CTA、激活状态和装饰图案，其余全部为黑/白/灰单色
• 双模式表面架构：首屏/页脚章节使用 {colors.surface-dark}，正文使用 {colors.canvas}——沿页面以可预测节奏交替
• 极度锐利的几何：每个交互元素使用 {rounded.sm}（2px）。没有胶囊按钮、圆润卡片或柔和界面
• NVIDIA-EMEA 专有无衬线字体，使用 400 和 700 字重，形成从 {typography.utility-xs}（10px）到 {typography.display-xl}（48px）的 12 级层级
• 卡片库依靠 {colors.hairline} 细线边框和 {colors.surface-soft} 背景而非阴影实现分隔
• 标志性装饰元素：锚定在资源卡片和功能卡片一角的小型 {component.corner-square}（约 12px 绿色方块）
• {colors.surface-dark} 上密集的多列页脚，含 4–6 列链接——每个页面都以相同的结构化全局导航收尾

配色

来源页面： /tr-tr/（主首页）、/en-eu/industries/healthcare-life-sciences/、/en-eu/solutions/ai/、/en-eu/ai/foundry/。四个页面的界面配色完全相同，仅摄影和文案不同。

品牌与点缀色

• NVIDIA Green（{colors.primary} — #76b900）：品牌色。用于每个主 CTA、每个激活状态、深色表面上的每个链接提示、每个角标方块，以及品牌字标本身。
• 深 NVIDIA Green（{colors.primary-dark} — #5a8d00）：主按钮的按下状态——仅比品牌绿色深一级。
• 浅点缀绿色（{colors.accent-green-pale} — #bff230）：少量用于编辑横幅和装饰性微区块的高亮色调；绝不用于界面。

表面

• 页面画布（{colors.canvas} — #ffffff）：每个页面的正文。卡片直接置于其上并用细线分隔。
• 柔和表面（{colors.surface-soft} — #f7f7f7）：面包屑条、子导航、并排对比面板、交替行背景。
• 黑色画布（{colors.surface-dark} — #000000）：首屏章节、深色 CTA 条、页脚、主导航。系统的“框架”色。
• 抬升表面（{colors.surface-elevated} — #1a1a1a）：页脚内的嵌套深色面板（列分隔区、细则栏）。
• 细线（{colors.hairline} — #cccccc）：1px 卡片边框、表格线、页脚链接区块之间的分隔线。
• 强细线（{colors.hairline-strong} — #5e5e5e）：深色表面上的 1px 分隔线（页脚列线、深色模式卡片边缘）。

文本

• 墨色（{colors.ink} — #000000）：{colors.canvas} 上的标题和正文。
• 正文色（{colors.body} — #1a1a1a）：纯黑过重时用于长篇段落文字。
• 弱化色（{colors.mute} — #757575）：元数据、面包屑分隔符、页脚版权。
• 石色（{colors.stone} — #898989）：最低强调文字和禁用状态。
• 灰色（{colors.ash} — #a7a7a7）：禁用图标颜色和微弱工具文字。
• 深色表面文字（{colors.on-dark} — #ffffff）：{colors.surface-dark} 上的主要文字。
• 深色表面弱化文字（{colors.on-dark-mute} — rgba(255,255,255,0.7)）：次要页脚链接文字和深色画布正文。

语义色

• 错误色（{colors.error} — #e52020）：验证消息、破坏性确认。
• 深错误色（{colors.error-deep} — #650b0b）：错误按钮按下状态；悬停-按下的验证图标。
• 警告色（{colors.warning} — #df6500）：警示横幅、弃用文档横幅。
• 明亮警告色（{colors.warning-bright} — #ef9100）：深色画布上的反转警告。
• 深成功色（{colors.success-deep} — #3f8500）：在 NVIDIA Green 饱和度会冲突时用于正向确认。
• 链接蓝色（{colors.link-blue} — #0046a4）：浅色画布上的行内锚链接颜色——系统唯一的蓝色，仅保留给正文内嵌超链接。

编辑点缀色（谨慎用于长篇内容内）

• 点缀紫色（{colors.accent-purple} — #952fc6）：研究/科学计算编辑点缀色。
• 深点缀紫色（{colors.accent-purple-deep} — #4d1368）：紫色组合的配套深色。
• 浅点缀紫色（{colors.accent-purple-pale} — #f9d4ff）：编辑横幅的淡色背景。
• 浅点缀黄色（{colors.accent-yellow-pale} — #feeeb2）：文档提示/柔和横幅填充。

字体排版

字体族

• NVIDIA-EMEA 是网站所有文本角色使用的专有品牌无衬线字体。提供 400（常规）和 700（粗体）字重，并回退至 Arial → Helvetica。
• Font Awesome 6 Pro 和 Font Awesome 6 Sharp 仅用于图标（V 形符号、社交字形、面包屑分隔符、搜索/菜单图标），字号为 14–22px。

NVIDIA 的字体系统异常扁平：大多数界面和正文角色采用相同的行高（1.25–1.5），唯一有意义的变化来自字重（400 对 700）和字号。系统依靠字重对比——而非字号跳跃或色彩变化——建立层级，使营销文案和技术文档呈现编辑式报纸质感。

层级

原则

字体排版受品牌严格约束：每个层级均使用 NVIDIA-EMEA，无衬线以外没有 serif、展示变体、等宽字体或斜体。层级几乎完全通过字号和字重建立——颜色仅用于强调（深色表面链接使用 {colors.primary}，浅色表面使用 {colors.link-blue}），绝不用来区分字体层级。

字体替代说明

NVIDIA-EMEA 是专有字体。最接近的开源搭配是 Inter（字重 400/700）——其 x-height 和笔画对比在正文字号下与 NVIDIA-EMEA 的光学度量误差约为 2%。Arial 是官方记录的回退字体，在无法使用 Inter 的系统中可以接受。避免使用 Helvetica Now 或 Helvetica Neue 替代；它们略紧的帽高会偏离品牌几何。

布局

间距系统

• 基础单位： 8px
• Token（front matter）： {spacing.xxs} (2px) · {spacing.xs} (4px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (64px)
• 通用区块节奏： 此组每个页面都使用 {spacing.section}（64px）作为主要内容块之间的垂直间距。卡片网格使用 {spacing.xl}（24px）栏间距；卡片内部根据密度采用 {spacing.xl} 到 {spacing.xxl} 的内边距。
• 首屏章节内边距： 垂直 80px / 水平 48px——系统中最大的间距，专供 {component.hero-card-dark} 使用。

网格与容器

• 最大宽度： 桌面端内容区域约 1280px，边距 24px，在超宽屏上增至约 48px。
• 列模式：
  • 卡片网格：桌面端 4 列，1024px 时 3 列，768px 时 2 列，480px 时 1 列。
  • 长篇文字：桌面端为正文 + 侧边栏的 60/40 双栏，低于 960px 时单栏。
  • 页脚：桌面端 6 列链接，平板端折叠为 2 列，移动端变为完整手风琴。
• 卡片比例： 产品卡片倾向 1:1 或 4:3，顶部为 16:9 图像，下方为 1–2 行元数据。资源卡片采用 3:2 图像和较长描述块。

留白理念

留白具有结构性，而非氛围感。区块按照 {spacing.section} 节奏紧邻——没有装饰性分隔带、空白“呼吸”带或区块间渐变过渡。空间感来自夹在 {colors.surface-dark} 章节块之间的 {colors.canvas} 正文区块，而非任何组件内部的宽裕内边距。

层次与深度

NVIDIA 的系统在卡片或内容表面上实际上没有投影层次。提取 token 中唯一的“阴影”是粘性界面栏上细微的 5px 环境阴影。卡片不会抬升；它们是带细线边框的扁平矩形。

装饰性深度

NVIDIA 系统中的深度来自摄影和 3D 渲染首屏图像，而非 CSS 效果：

• 首屏图像： 通栏摄影或渲染场景（数据中心硬件、神经网络可视化、生命科学显微图像）位于首屏文案背后，并覆以深色渐变确保易读性。
• 装饰性角标方块： 小型 {component.corner-square}（约 12px 实心 {colors.primary} 方块）锚定在资源卡片和功能卡片左上角或右下角——系统唯一一致的装饰手法。
• 编辑式 3D 点缀： 等距或线框 3D 渲染作为插图填充出现在长篇文章中，绝不作为界面。

形状

圆角比例

系统极度锐利。除头像/图标圆形外，没有元素的圆角超过 2px。2px 足以缓和锐利边缘的视觉锯齿，又小到仍让系统呈现工程级质感，而非亲切的消费产品风格。

摄影几何

• 首屏图像： 桌面端通栏 16:9，移动端裁切为 4:5 竖向。
• 卡片图像： 资源卡片顶部使用 16:9 缩略图；产品/SKU 卡片使用 1:1 正方形；编辑文章卡片使用 3:2。
• 装饰性角标方块： 标准卡片为 12×12px，首屏横幅放大至 16×16。
• 头像/社交图标： 32–40px 圆形，带 1px 细线。

组件

根据系统策略，不记录悬停状态。每项规范仅涵盖默认和激活/按下状态；变体作为独立 components: 条目存在于 front matter 中。

按钮

button-primary —— 通用 NVIDIA CTA

• 背景 {colors.primary}、文字 {colors.on-primary}、字体 {typography.button-md}、内边距 11px 24px、高度 44px、圆角 {rounded.sm}。
• 系统中重复最多的单一组件：首屏 CTA、深色 CTA 条、每个卡片组上的“Learn More”、每个长篇页面底部的“Sign Up”/“Get Started”。
• 按下状态在 button-primary-active 中定义——背景降为 {colors.primary-dark}（#5a8d00），文字颜色不变。

button-outline —— 浅色画布上的次按钮

• 透明背景、文字 {colors.ink}、2px solid {colors.primary} 边框、字体 {typography.button-md}、内边距 11px 13px、圆角 {rounded.sm}。
• 系统最具辨识度的次 CTA：由 NVIDIA Green 描边的透明面板。用于“Read the Documentation”、“Watch the Video”、“Compare Products”——仍值得使用品牌色的次级操作。

button-outline-on-dark —— {colors.surface-dark} 上的描边按钮

• 透明背景、文字 {colors.on-dark}、1px solid {colors.on-dark}、字体 {typography.button-md}、圆角 {rounded.sm}。
• 黑底白字变体，用于深色首屏/页脚 CTA 条，并与主绿色按钮配对。

button-ghost-link —— 行内箭头链接

• {colors.primary} 文字配小型右箭头图标，字体 {typography.button-md}，无背景、无边框、圆角 {rounded.none}。
• 位于资源卡片和长篇区块底部的“Learn More →”提示。箭头依 {typography.caption-md} 等效处理使用大写粗体。

button-disabled

• 背景 {colors.surface-soft}、文字 {colors.ash}、圆角 {rounded.sm}——扁平灰色。

标签与标签块

pill-tab + pill-tab-active

• 默认：透明背景、文字 {colors.ink}、字体 {typography.button-sm}、内边距 10px 18px、圆角 {rounded.sm}。
• 激活：背景 {colors.ink}、文字 {colors.on-dark}——选中时标签反转。用于“Latest in AI Resources”筛选条及类似分段控件。

badge-tag

• 背景 {colors.surface-soft}、文字 {colors.body}、字体 {typography.caption-md}、内边距 4px 10px、圆角 {rounded.sm}（大写）。
• 资源卡片顶部的文档类型/类别标签（“WHITE PAPER”、“WEBINAR”、“BLOG”）。

输入框与表单

text-input + text-input-focused

• 默认：背景 {colors.canvas}、文字 {colors.ink}、1px solid {colors.hairline}、字体 {typography.body-md}、内边距 12px 16px、高度 44px、圆角 {rounded.sm}。
• 聚焦：表面不变，边框变为 2px solid {colors.primary}——绿色边框是系统唯一的聚焦信号。

search-input

• 用于全局搜索浮层——处理方式与 text-input 相同，但高度为 40px，左侧带放大镜字形。

卡片

product-card

• 容器：背景 {colors.canvas}、1px solid {colors.hairline}、内边距 {spacing.xl}（24px）、圆角 {rounded.sm}。
• 布局：顶部 16:9 产品图像、{typography.card-title} 标题、{typography.body-sm} 描述、底部 {component.button-ghost-link} “Learn More →”提示。
• {component.corner-square} 位于左上角。

feature-card

• 容器：背景 {colors.canvas}、1px solid {colors.hairline}、内边距 {spacing.xxl}（32px）、圆角 {rounded.sm}。
• 布局：顶部 {colors.primary} 的图标（Font Awesome，22–24px），随后是 {typography.heading-md} 标题和 {typography.body-md} 正文。
• 用于说明产品能力的 3 列或 4 列网格（“Agentic AI”、“Data Science”、“Inference”、“Conversational AI”）。

resource-card

• 容器：背景 {colors.canvas}、1px solid {colors.hairline}、内边距 {spacing.xl}、圆角 {rounded.sm}。
• 标题条：{component.badge-tag} 文档类型标签。
• 正文：3:2 缩略图、{typography.card-title} 标题、{typography.body-sm} 描述。
• 页脚：带 {colors.primary} 右向 V 形符号的幽灵链接“Read More →”。

callout-stat

• 背景 {colors.canvas}，带 1px {colors.hairline} 细线、内边距 {spacing.xxl}、圆角 {rounded.sm}。
• 大号 {typography.display-lg}（36px）{colors.primary} 数字，下方为 {typography.body-md} 说明（“4× faster training”、“60% lower cost”等）。用于长篇行业页面。

首屏与 CTA 条

hero-card-dark

• 背景 {colors.surface-dark}，配通栏 16:9 摄影/3D 图像和深色渐变覆盖；文案区域位于左侧。
• {typography.display-xl} {colors.on-dark} 标题、{typography.heading-lg} 副标题、单个 {component.button-primary} CTA（有时与 {component.button-outline-on-dark} 配对）。
• 锚定每个主要落地页顶部。

cta-strip-dark

• 与首屏相同表面，但压缩为单行带，包含 {typography.heading-xl} 标题 + 单个 CTA。
• 位于内容区块之间，作为“Ready to get started?”过渡桥梁。

装饰元素

corner-square

• 12×12px 实心 {colors.primary} 方块，锚定在卡片一角。品牌标志性装饰图案。
• 用于资源卡片、功能卡片和编辑横幅。位置可变（左上角、右下角），但尺寸和颜色固定。

导航

utility-bar

• 背景 {colors.surface-dark}、文字 {colors.on-dark}、高度 32px、字体 {typography.caption-sm}、圆角 {rounded.none}。
• 右对齐组合：区域设置选择器 / “Login” / “Account”。始终位于页面最顶部。

primary-nav

• 背景 {colors.surface-dark}、文字 {colors.on-dark}、高度 64px、字体 {typography.body-strong}、圆角 {rounded.none}。
• 布局：左侧 NVIDIA 字标；中央导航行（“Products / Solutions / Industries / Resources / Support / Company”）；右侧组合（搜索字形 + “Login”按钮 + 绿色“Get Started”CTA）。

breadcrumb-bar

• 背景 {colors.surface-soft}、文字 {colors.body}、高度 48px、字体 {typography.caption-md}（大写）。
• 在每个内页直接位于主导航下方；V 形分隔符使用 {colors.mute}。

sub-nav-strip

• 背景 {colors.surface-soft}、文字 {colors.ink}、高度 56px、字体 {typography.button-md}、圆角 {rounded.none}。
• 锚定在内容上方的区块专属导航（例如“Healthcare → Drug Discovery / Medical Imaging / Genomics / Patient Care”）。

顶部导航（移动端）

• 左侧汉堡菜单图标，中央 NVIDIA 字标，右侧搜索 + 区域设置图标。主导航折叠为从右侧滑入的全屏抽屉。

页脚

footer-section

• 背景 {colors.surface-dark}、文字 {colors.on-dark-mute}、垂直内边距 {spacing.section}（64px）/ 水平内边距 48px、圆角 {rounded.none}。
• 布局：6 列链接网格（Products / Software / Resources / Company Info / Solutions / Support），列标题使用 {typography.body-strong} {colors.on-dark}，链接列表使用 {typography.body-sm} {colors.on-dark-mute}。
• 列下方：社交图标条 + 区域设置选择器 + 使用 {typography.utility-xs}（大写）{colors.mute} 的法务/隐私细则行。

行内元素

link-inline

• 正文锚链接：{colors.link-blue} 文字加下划线。系统中唯一的蓝色——仅出现在 {typography.body-md} 段落内的行内链接中。

推荐与避免

推荐

• 将 {colors.primary} 保留给主 CTA、激活状态、装饰性角标方块和 NVIDIA 字标本身。将其视为珍贵资源。
• 使用 {colors.surface-dark} 堆叠首屏/页脚章节，使用 {colors.canvas} 堆叠正文区块——沿页面以可预测节奏交替。
• 在每张可复用卡片的一角锚定 {component.corner-square}。它是系统的身份标签。
• 所有交互元素使用 {rounded.sm}（2px）。绝不降至 0，也绝不超过 4。
• 从字重（400 对 700）和字号建立层级，而非色彩变化。无论上下文如何，正文保持 {colors.ink} 或 {colors.body}。
• 内容区块以 {spacing.section}（64px）节奏堆叠，区块之间不使用装饰性分隔线。
• 主 + 次操作组合使用 {component.button-primary}（绿色填充）搭配 {component.button-outline}（绿色边框）。

避免

• 不要在卡片或内容表面引入投影。唯一允许的阴影是粘性界面上的 5px 环境阴影。
• 不要在 CTA 中用 {colors.success-deep}、{colors.accent-green-pale} 或其他绿色替代 {colors.primary}。品牌绿色是精确的。
• 不要在行内正文链接以外使用 {colors.link-blue}。它不是按钮色，也不是界面色。
• 不要软化几何。没有胶囊按钮、圆润卡片，除头像和社交图标外不使用 {rounded.lg} 或更高圆角。
• 不要对首屏 {component.hero-card-dark} 使用对称内边距。文案贴近左侧三分之一区域；图像填满右侧。
• 不要为了变化添加第二种点缀色。系统刻意保持单色。
• 当绿色填充置于 {colors.canvas} 上会与照片内容冲突时，不要使用 {component.button-primary}——改用 {component.button-outline}，并将填充按钮保留给深色表面。

响应式行为

断点

触控目标

所有交互元素均满足 WCAG AA（≥ 44×44px）。{component.button-primary} 高度 44px，水平内边距 24px。{component.text-input} 高度 44px。{component.pill-tab} 高约 40px，并通过扩展点击区内边距达到 44px。{component.button-outline} 符合相同的 44px 标准。页脚链接行高 18–20px，并有 8–12px 垂直内边距，使点击区根据链接长度达到约 36–44px。

折叠策略

• 主导航： 桌面端中央链接组 → 768px 时变为平板端汉堡菜单抽屉。
• 卡片网格： 在 1024、768 和 480px 分别从 4 列 → 3 列 → 2 列 → 1 列；移动端栏间距从 24px 降至 16px。
• 页脚： 6 列链接 → 平板端 2 列 → 移动端完整手风琴（每个列标题变为点击展开行）。
• 首屏文案： 桌面端 {typography.display-xl}（48px）→ 平板端 36px → 移动端 32px；行高保持 1.25。
• 子导航条： 桌面端水平锚点行 → 平板端水平滚动 → 移动端折叠为选择下拉框。
• 区块内边距： {spacing.section}（64px）桌面端 → 48px 平板端 → 32px 移动端。
• 长篇文字： 桌面端 60/40 正文+侧边栏 → 平板端/移动端单栏，侧边栏推至底部。

图像行为

• 首屏图像采用艺术指导裁切：桌面端 16:9 宽首屏切换为移动端 4:5 竖向，使主体保持居中，标题文字仍有覆盖空间。
• 卡片图像使用固定宽高比（资源为 16:9，产品为 1:1），在断点之间缩放而非重新裁切。
• 所有非关键图像在用户滚动至下一网格行时延迟加载。

迭代指南

1. 每次只聚焦一个组件。从 front matter 中取出其 YAML 条目，并验证每个属性均能解析。
2. 直接引用组件名称和 token（{colors.primary}、{component.button-primary-active}、{rounded.sm}）——不要改写。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 和 orphaned-tokens 警告会自动标记问题。
4. 将新变体添加为独立组件条目（-active、-disabled、-focused）——不要将它们隐藏在正文中。
5. 正文默认使用 {typography.body-md}；强调时使用 {typography.body-strong}；{typography.display-xl} 严格保留给首屏章节标题。
6. 每个视口谨慎使用 {colors.primary}——如果同一屏出现超过一个实心绿色 CTA，将其中一个中和为 {component.button-outline}。
7. 引入新组件时，先判断它能否用现有的卡片 + 2px 圆角 + 角标方块 + 绿色 CTA 词汇表达，再添加新 token。系统的优势在于它几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——响应式行为根据桌面端证据和记录的断点栈，综合推导 NVIDIA 已知的移动端模式（汉堡菜单抽屉、手风琴页脚、单列卡片网格、首屏缩小）。
• 根据系统策略，未记录悬停状态。
• 捕获表面中除区域设置选择器浮层外，没有可见的对话框/模态框样式。
• 捕获表面中没有完整注册/联系表单的表单字段样式——仅记录行内搜索和基础文本输入框。
• 捕获页面中没有登录/已认证界面。