workbuddy_skills/open-design/design-systems/nvidia/DESIGN-zh.md

# 灵感源自 NVIDIA 的设计系统

> Category: 媒体与消费者
> GPU 计算。绿黑能量，技术力量美学。

## 1. 视觉主题与氛围

NVIDIA 官网是一种高对比度、技术前沿的体验，通过克制的设计传达出原始的计算力量。页面建立在纯黑（`#000000`）与纯白（`#ffffff`）的基础之上，点缀着 NVIDIA 标志性的绿色（`#76b900`）——这一颜色之精准，堪称品牌指纹。这不是自然界那种葱郁的绿；它是 GPU 渲染光线下那种充满电气感、带着黄绿偏移的绿，介于黄绿色与翠绿色之间，任何技术圈人士见之即知——这是 NVIDIA。

定制字体 NVIDIA-EMEA（备用字体为 Arial 和 Helvetica）构建出简洁、工业感十足的字体排印风格。36px 粗体标题配合紧致的 1.25 行高，形成密集而权威的文字块。这套字体没有硅谷无衬线字体那种几何趣味——它是欧洲风格的，务实且以工程为导向。正文字号在 15–16px 之间，阅读舒适但不奢侈，让人感受到屏幕空间像 GPU 显存一样被精准优化。

NVIDIA 设计区别于其他深色背景科技站点的关键，在于对绿色点缀色的克制运用。`#76b900` 出现在边框（`2px solid #76b900`）、链接下划线（`underline 2px rgb(118, 185, 0)`）和行动号召元素中——但绝不用于主内容区域的背景或大面积填充。绿色是信号，而非表面。配合深度阴影系统（`rgba(0, 0, 0, 0.3) 0px 0px 5px`）和极小圆角（1–2px），整体效果宛如精密工程硬件以像素呈现。

**核心特征：**
- NVIDIA 绿（`#76b900`）作为纯粹点缀——仅用于边框、下划线和交互高亮
- 以黑色（`#000000`）为主导背景，深色区块使用白色（`#ffffff`）文字
- NVIDIA-EMEA 定制字体，备用 Arial/Helvetica——工业感、欧式风格、简洁干净
- 紧致行高（标题 1.25），形成密集而权威的文字块
- 极小圆角（1–2px）——锐利、工程化的直角贯穿全站
- 绿色边框按钮（`2px solid #76b900`）作为主要交互模式
- Font Awesome 6 Pro/Sharp 图标系统，字重 900，图标锐利有力
- 多框架架构（PrimeReact、Fluent UI、Element Plus），支持丰富的交互组件

## 2. 色彩系统与职责

### 主品牌色
- **NVIDIA 绿**（`#76b900`）：标志性色彩——边框、链接下划线、行动号召轮廓、激活指示器。绝不用于大面积填充。
- **纯黑**（`#000000`）：主页面背景、浅色表面上的文字、主导色调。
- **纯白**（`#ffffff`）：深色背景上的文字、浅色区块背景、卡片表面。

### 品牌扩展色板
- **NVIDIA 浅绿**（`#bff230`）：明亮柠檬绿，用于高亮和悬停状态。
- **橙色 400**（`#df6500`）：暖色点缀，用于警告、特色徽章或能源相关场景。
- **黄色 300**（`#ef9100`）：次要暖色点缀，产品类别高亮。
- **黄色 050**（`#feeeb2`）：浅暖色表面，用于标注背景。

### 语义状态色
- **红色 500**（`#e52020`）：错误状态、破坏性操作、严重警告。
- **红色 800**（`#650b0b`）：深红色，用于严重警告背景。
- **绿色 500**（`#3f8500`）：成功状态、正向指示（比品牌绿更深）。
- **蓝色 700**（`#0046a4`）：信息性点缀，链接悬停备选色。

### 装饰色
- **紫色 800**（`#4d1368`）：深紫色，用于渐变末端、高端/AI 语境。
- **紫色 100**（`#f9d4ff`）：浅紫色表面色调。
- **品红 700**（`#8c1c55`）：浓郁点缀，用于特别促销或精选内容。

### 中性色阶
- **灰色 300**（`#a7a7a7`）：弱化文字、禁用标签。
- **灰色 400**（`#898989`）：次要文字、元数据。
- **灰色 500**（`#757575`）：第三层文字、占位符、页脚。
- **灰色边框**（`#5e5e5e`）：淡色边框、分割线。
- **近黑色**（`#1a1a1a`）：深色表面、黑色页面上的卡片背景。

### 交互状态
- **链接默认（深色背景）**（`#ffffff`）：深色背景上的白色链接。
- **链接默认（浅色背景）**（`#000000`）：浅色背景上带绿色下划线的黑色链接。
- **链接悬停**（`#3860be`）：所有链接变体悬停时统一转为蓝色。
- **按钮悬停**（`#1eaedb`）：按钮悬停状态的青色高亮。
- **按钮激活**（`#007fff`）：按钮激活/按下状态的亮蓝色。
- **焦点环**（`#000000 solid 2px`）：键盘焦点的黑色轮廓。

### 阴影与层次
- **卡片阴影**（`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`）：悬浮卡片的柔和环境阴影。

## 3. 字体排印规范

### 字体系列
- **主字体**：`NVIDIA-EMEA`，备用字体：`Arial, Helvetica, sans-serif`
- **图标字体**：`Font Awesome 6 Pro`（实心图标字重 900，常规字重 700）
- **锐化图标**：`Font Awesome 6 Sharp`（细线图标字重 300，常规字重 400）

### 层级

| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|------|------|------|--------|-------------|----------------|-------|
| 展示主标题 | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25（紧凑） | normal | 最大视觉冲击力的标题 |
| 区块标题 | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25（紧凑） | normal | 区块标题、卡片标题 |
| 副标题 | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75（宽松） | normal | 功能描述、副标题 |
| 卡片标题 | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25（紧凑） | normal | 卡片与模块标题 |
| 大号正文 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67（宽松） | normal | 强调正文、导言段落 |
| 正文 | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文字 |
| 粗体正文 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | 强调标签、导航项 |
| 小号正文 | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67（宽松） | normal | 次要内容、描述文字 |
| 小号粗体正文 | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | 强调次要内容 |
| 大号按钮 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25（紧凑） | normal | 主要行动号召按钮 |
| 按钮 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25（紧凑） | normal | 标准按钮 |
| 紧凑按钮 | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00（紧凑） | 0.144px | 小型/紧凑按钮 |
| 链接 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | 导航链接 |
| 大写链接 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`，导航标签 |
| 说明文字 | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | 元数据、时间戳 |
| 小号说明文字 | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25（紧凑） | normal | 细则、法律文字 |
| 微型标签 | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`，微型徽章 |
| 微型文字 | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00（紧凑） | normal | 最小 UI 文字 |

### 原则
- **粗体是默认声音**：NVIDIA 大量使用字重 700 用于标题、按钮、链接和标签。400 字重仅留给正文和描述——其余一律粗体，传递自信与权威。
- **紧凑标题，宽松正文**：标题行高统一为 1.25（紧凑），正文则放宽至 1.50–1.67。这种对比在内容块顶部制造视觉密度，在段落中保持舒适可读性。
- **导航使用大写**：链接标签采用 `text-transform: uppercase` 配字重 700，形成一种读起来像硬件规格标签的导航语气。
- **无装饰字间距**：除紧凑按钮（0.144px）外，全站字间距均为 normal。字体本身承载工业气质，无需额外操控。

## 4. 组件样式

### 按钮

**主按钮（绿色边框）**
- Background: `transparent`
- Text: `#000000`
- Padding: 11px 13px
- Border: `2px solid #76b900`
- Radius: 2px
- Font: 16px weight 700
- Hover: background `#1eaedb`, text `#ffffff`
- Active: background `#007fff`, text `#ffffff`, border `1px solid #003eff`, scale(1)
- Focus: background `#1eaedb`, text `#ffffff`, outline `#000000 solid 2px`, opacity 0.9
- 用途：主要行动号召（"了解更多"、"探索解决方案"）

**次要按钮（细绿边框）**
- Background: transparent
- Border: `1px solid #76b900`
- Radius: 2px
- 用途：次要操作、替代行动号召

**紧凑/内联按钮**
- Font: 14.4px weight 700
- Letter-spacing: 0.144px
- Line-height: 1.00
- 用途：内联行动号召、紧凑导航

### 卡片与容器
- Background: `#ffffff`（浅色）或 `#1a1a1a`（深色区块）
- Border: 无（干净边缘）或 `1px solid #5e5e5e`
- Radius: 2px
- Shadow: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`，用于悬浮卡片
- Hover: 阴影加深
- Padding: 内部 16–24px

### 链接
- **深色背景**：`#ffffff`，无下划线，悬停变为 `#3860be`
- **浅色背景**：`#000000` 或 `#1a1a1a`，下划线 `2px solid #76b900`，悬停变为 `#3860be`，下划线消失
- **绿色链接**：`#76b900`，悬停变为 `#3860be`
- **弱化链接**：`#666666`，悬停变为 `#3860be`

### 导航
- 深黑色背景（`#000000`）
- Logo 左对齐，NVIDIA 文字标志醒目
- 链接：NVIDIA-EMEA 14px 字重 700 大写，`#ffffff`
- Hover: 颜色变化，下划线不变
- 产品类别下拉巨型菜单
- 滚动时固定，带背景遮罩

### 图片处理
- 产品/GPU 渲染图作为主视觉，通常全宽展示
- 截图配合淡阴影增加深度感
- 深色主视觉区块叠加绿色渐变
- 圆形头像容器，圆角 50%

### 特色组件

**产品卡片**
- 干净的白色或深色卡片，圆角极小（2px）
- 标题处绿色点缀边框或下划线
- 粗体标题 + 较细描述的搭配模式
- 底部带绿色边框的行动号召

**技术规格表**
- 工业化网格布局
- 交替行背景（微妙灰色切换）
- 粗体标签，常规数值
- 关键指标绿色高亮

**Cookie/同意横幅**
- 固定在底部
- 圆角按钮（2px 圆角）
- 灰色边框处理

## 5. 布局原则

### 间距系统
- 基础单位：8px
- 刻度：1px、2px、3px、4px、5px、6px、7px、8px、9px、10px、11px、12px、13px、15px
- 主要内边距值：8px、11px、13px、16px、24px、32px
- 区块间距：垂直内边距 48–80px

### 网格与容器
- 最大内容宽度：约 1200px（有约束）
- 全宽主视觉区块，文字有约束
- 功能区块：产品卡片使用 2–3 列网格
- 文章/博客内容单列
- 文档使用侧边栏布局

### 留白哲学
- **有目的的密度**：NVIDIA 使用比典型 SaaS 站点更紧密的间距，反映技术内容的密度特性。留白是为了分隔概念，而非创造奢华的空旷感。
- **区块节奏**：深色区块与白色区块交替出现，用背景色（而非仅靠间距）分隔内容块。
- **卡片密度**：产品卡片紧密排列，间距 16–20px，整体呈现目录感而非画廊感。

### 圆角刻度
- 微型（1px）：内联 span、小型元素
- 标准（2px）：按钮、卡片、容器、输入框——几乎所有元素的默认值
- 圆形（50%）：头像图片、圆形 tab 指示器

## 6. 深度与层次

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 扁平（Level 0） | 无阴影 | 页面背景、内联文字 |
| 轻微（Level 1） | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | 标准卡片、模态框 |
| 边框（Level 1b） | `1px solid #5e5e5e` | 内容分割线、区块边框 |
| 绿色点缀（Level 2） | `2px solid #76b900` | 激活元素、行动号召、选中项 |
| 焦点（无障碍） | `2px solid #000000` outline | 键盘焦点环 |

**阴影哲学**：NVIDIA 的深度系统简约而实用。实际上只有一个阴影值——5px 环境模糊、30% 不透明度——少量用于卡片和模态框。主要的深度信号不是阴影，而是_色彩对比_：黑色背景紧邻白色区块，黑色表面上的绿色边框。这创造出一种类似硬件的视觉分层感，深度来自材质差异，而非模拟光线。

### 装饰性深度
- 主视觉内容后方的绿色渐变晕染
- 区块过渡使用深色到更深色的渐变（黑色到近黑色）
- 无磨砂玻璃或模糊效果——清晰胜于氛围感

## 7. 响应式行为

### 断点
| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 小屏手机 | <375px | 紧凑单列，减少内边距 |
| 手机 | 375-425px | 标准移动端布局 |
| 大屏手机 | 425-600px | 较宽移动端，部分出现双列提示 |
| 小平板 | 600-768px | 开始出现双列网格 |
| 平板 | 768-1024px | 完整卡片网格，展开导航 |
| 桌面 | 1024-1350px | 标准桌面布局 |
| 大屏桌面 | >1350px | 最大内容宽度，充裕外边距 |

### 触控目标
- 按钮使用 11px 13px 内边距，确保舒适的点击目标
- 导航链接 14px 大写，间距充足
- 绿色边框按钮在深色背景上提供高对比触控目标
- 移动端：汉堡菜单收起，展开时覆盖全屏

### 折叠策略
- 主视觉：36px 标题按比例缩小
- 导航：完整横向导航在约 1024px 时折叠为汉堡菜单
- 产品卡片：三列→两列→单列堆叠
- 页脚：多列网格折叠为单列堆叠
- 区块间距：64–80px 在移动端缩减为 32–48px
- 图片：保持宽高比，缩放至容器宽度

### 图片行为
- GPU/产品渲染图在各尺寸下保持高分辨率
- 主视觉图片随视口等比缩放
- 卡片图片使用统一宽高比
- 全出血深色区块保持边到边处理

## 8. 响应式行为（扩展）

### 字体缩放
- 展示标题 36px 在移动端缩小至约 24px
- 区块标题 24px 在移动端缩小至约 20px
- 正文字体在所有断点保持 15–16px
- 按钮文字保持 16px，确保一致的点击目标

### 深色/浅色区块策略
- 深色区块（黑色背景，白色文字）与浅色区块（白色背景，黑色文字）交替出现
- 绿色点缀色在两种表面类型上保持一致
- 深色区块：链接为白色，下划线为绿色
- 浅色区块：链接为黑色，下划线为绿色
- 这种交替形成自然的滚动节奏和内容分组

## 9. Agent 提示词指南

### 快速色彩参考
- 主要点缀色：NVIDIA 绿（`#76b900`）
- 深色背景：纯黑（`#000000`）
- 浅色背景：纯白（`#ffffff`）
- 标题文字（深色背景）：白色（`#ffffff`）
- 标题文字（浅色背景）：黑色（`#000000`）
- 正文（浅色背景）：黑色（`#000000`）或近黑色（`#1a1a1a`）
- 正文（深色背景）：白色（`#ffffff`）或灰色 300（`#a7a7a7`）
- 链接悬停：蓝色（`#3860be`）
- 边框点缀：`2px solid #76b900`
- 按钮悬停：青色（`#1eaedb`）

### 组件提示词示例
- "在黑色背景上创建主视觉区块。标题使用 36px NVIDIA-EMEA 字重 700，行高 1.25，颜色 #ffffff。副标题 18px 字重 400，行高 1.67，颜色 #a7a7a7。行动号召按钮使用透明背景，2px solid #76b900 边框，2px 圆角，11px 13px 内边距，文字 #ffffff。悬停：背景 #1eaedb，文字白色。"
- "设计一张产品卡片：白色背景，2px border-radius，box-shadow rgba(0,0,0,0.3) 0px 0px 5px。标题 20px NVIDIA-EMEA 字重 700，行高 1.25，颜色 #000000。正文 15px 字重 400，行高 1.67，颜色 #757575。标题绿色下划线点缀：border-bottom 2px solid #76b900。"
- "构建导航栏：#000000 背景，固定顶部。NVIDIA logo 左对齐。链接 14px NVIDIA-EMEA 字重 700 大写，颜色 #ffffff。悬停：颜色 #3860be。右对齐绿色边框行动号召按钮。"
- "创建深色功能区块：#000000 背景。区块标签 14px 字重 700 大写，颜色 #76b900。标题 24px 字重 700，颜色 #ffffff。描述 16px 字重 400，颜色 #a7a7a7。三张产品卡片一排，间距 20px。"
- "设计页脚：#000000 背景。多列布局，带链接分组。链接 14px 字重 400，颜色 #a7a7a7。悬停：颜色 #76b900。底部栏法律文字 12px，颜色 #757575。"

### 迭代指南
1. 始终使用 `#76b900` 作为点缀色，绝不用作背景填充——它是边框、下划线和高亮的信号色
2. 按钮默认透明配绿色边框——填充背景仅在悬停/激活状态时出现
3. 字重 700 是所有交互和标题元素的主导声音；400 仅用于正文段落
4. 所有元素圆角均为 2px——这种锐利、极简的圆角是工业美学的核心
5. 深色区块用白色文字，浅色区块用黑色文字——绿色点缀色在两种情况下效果一致
6. 链接悬停始终为 `#3860be`（蓝色），无论链接默认颜色如何
7. 标题行高 1.25，正文行高 1.50–1.67——保持这种对比以形成视觉层级
8. 导航使用大写 14px 粗体——这种硬件标签式字排印是品牌声音的组成部分