灵感源自 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 大量使用字重 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. 深度与层次

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

装饰性深度

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

7. 响应式行为

断点

触控目标

• 按钮使用 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 粗体——这种硬件标签式字排印是品牌声音的组成部分