# 靈感來源 NVIDIA 的設計系統

> 類別：媒體與消費性產品
> 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)`）以及 CTA 中——但從不作為主要內容區域的背景或大面積色塊。綠色是訊號，不是表面。搭配深沉的陰影系統（`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 圖示系統，weight 900 呈現銳利圖示
- 多框架架構（PrimeReact、Fluent UI、Element Plus），支援豐富的互動元件

## 2. 色彩配置與角色

### 主要品牌色
- **NVIDIA 綠色**（`#76b900`）：標誌性色彩——用於邊框、連結底線、CTA 外框、啟用狀態指示。絕不作為大面積填充色。
- **純黑**（`#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`（實心圖示 weight 900，一般圖示 700）
- **銳利圖示**：`Font Awesome 6 Sharp`（細線圖示 weight 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 | 主要 CTA 按鈕 |
| 按鈕 | 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 大量採用 weight 700 用於標題、按鈕、連結與標籤。400 僅保留給內文段落——其餘一律粗體，展現自信與權威感。
- **標題緊密，內文寬鬆**：標題行高固定為 1.25（緊密），而內文文字放鬆至 1.50–1.67。這種對比在內容區塊頂部製造視覺密度，同時保持段落的閱讀舒適度。
- **大寫導覽文字**：連結標籤使用 `text-transform: uppercase` 搭配 weight 700，形成如同硬體規格標籤般的導覽語調。
- **無裝飾性字距**：除緊湊按鈕（0.144px）外，全站字間距均為 normal。字型本身即承載工業感特質，無需額外操作。

## 4. 元件樣式

### 按鈕

**主要按鈕（綠色邊框）**
- 背景：`transparent`
- 文字：`#000000`
- 內距：11px 13px
- 邊框：`2px solid #76b900`
- 圓角：2px
- 字型：16px weight 700
- 懸停：背景 `#1eaedb`，文字 `#ffffff`
- 啟用：背景 `#007fff`，文字 `#ffffff`，邊框 `1px solid #003eff`，scale(1)
- 焦點：背景 `#1eaedb`，文字 `#ffffff`，外框 `#000000 solid 2px`，不透明度 0.9
- 用途：主要 CTA（「了解更多」、「探索解決方案」）

**次要按鈕（細綠色邊框）**
- 背景：透明
- 邊框：`1px solid #76b900`
- 圓角：2px
- 用途：次要操作、替代 CTA

**緊湊／行內按鈕**
- 字型：14.4px weight 700
- 字間距：0.144px
- 行高：1.00
- 用途：行內 CTA、緊湊導覽

### 卡片與容器
- 背景：`#ffffff`（淺色）或 `#1a1a1a`（深色區段）
- 邊框：無（乾淨邊緣）或 `1px solid #5e5e5e`
- 圓角：2px
- 陰影：浮起卡片使用 `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`
- 懸停：陰影加深
- 內距：16–24px

### 連結
- **深色背景**：`#ffffff`，無底線，懸停轉為 `#3860be`
- **淺色背景**：`#000000` 或 `#1a1a1a`，底線 `2px solid #76b900`，懸停轉為 `#3860be`，底線消除
- **綠色連結**：`#76b900`，懸停轉為 `#3860be`
- **靜音連結**：`#666666`，懸停轉為 `#3860be`

### 導覽列
- 深黑背景（`#000000`）
- Logo 左對齊，NVIDIA 字標醒目呈現
- 連結：NVIDIA-EMEA 14px weight 700 大寫，`#ffffff`
- 懸停：顏色轉換，底線不變
- 產品類別使用巨型下拉選單
- 捲動時固定於頂部並帶有背景

### 圖片處理
- 產品／GPU 渲染圖作為主視覺，通常全寬呈現
- 截圖圖片加細膩陰影增加層次感
- 深色主視覺區段疊加綠色漸層
- 頭像使用圓形容器（50% 圓角）

### 特色元件

**產品卡片**
- 白色或深色卡片，圓角極小（2px）
- 標題使用綠色強調邊框或底線
- 粗體標題搭配較輕的描述文字模式
- 底部附有綠色邊框 CTA

**技術規格表**
- 工業感網格排版
- 交替列背景（細膩灰色變化）
- 粗體標籤，一般字重數值
- 關鍵指標以綠色高亮標示

**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）：行內標籤、極小元素
- 標準（2px）：按鈕、卡片、容器、輸入欄——幾乎所有元素的預設值
- 圓形（50%）：頭像圖片、圓形分頁指示器

## 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` | 啟用元素、CTA、已選取項目 |
| 焦點（無障礙） | `2px solid #000000` 外框 | 鍵盤焦點環 |

**陰影哲學**：NVIDIA 的深度系統極簡且實用。基本上只有一個陰影值——5px 環境模糊、30% 不透明度——僅在卡片與彈窗上節制使用。主要的深度訊號不是陰影，而是_色彩對比_：黑色背景緊鄰白色區段、黑色表面上的綠色邊框。這創造出如同硬體材質的視覺層次，深度源於材質差異，而非模擬光線。

### 裝飾性深度
- 主視覺內容後方的綠色漸層暈染
- 深色到更深色的漸層（黑色到近黑色）用於區段轉場
- 無玻璃擬態或模糊效果——追求清晰而非氛圍感

## 7. 響應式行為

### 斷點
| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 小型手機 | <375px | 緊湊單欄，縮小內距 |
| 手機 | 375–425px | 標準手機版面 |
| 大型手機 | 425–600px | 較寬手機，部分雙欄提示 |
| 小型平板 | 600–768px | 開始採用雙欄網格 |
| 平板 | 768–1024px | 完整卡片網格，擴展導覽 |
| 桌機 | 1024–1350px | 標準桌機版面 |
| 大型桌機 | >1350px | 最大內容寬度，充裕邊距 |

### 觸控目標
- 按鈕使用 11px 13px 內距，確保舒適的點擊目標
- 導覽連結 14px 大寫搭配適當間距
- 深色背景上的綠色邊框按鈕提供高對比觸控目標
- 手機版：漢堡選單展開為全螢幕覆蓋

### 折疊策略
- 主視覺：36px 標題按比例縮小
- 導覽列：約 1024px 時全水平導覽折疊為漢堡選單
- 產品卡片：3 欄→2 欄→單欄堆疊
- 頁尾：多欄網格折疊為單欄堆疊
- 區段間距：64–80px 在手機版縮減為 32–48px
- 圖片：維持長寬比，縮放至容器寬度

### 圖片行為
- GPU／產品渲染圖在所有尺寸保持高解析度
- 主視覺圖片依視窗比例縮放
- 卡片圖片使用一致的長寬比
- 全出血深色區段維持邊緣到邊緣的處理

## 8. 響應式行為（延伸）

### 字型縮放
- Display 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 weight 700，行高 1.25，顏色 #ffffff。副標題 18px weight 400，行高 1.67，顏色 #a7a7a7。CTA 按鈕背景透明，邊框 2px solid #76b900，圓角 2px，內距 11px 13px，文字 #ffffff。懸停時：背景 #1eaedb，文字白色。」
- 「設計產品卡片：白色背景，圓角 2px，box-shadow rgba(0,0,0,0.3) 0px 0px 5px。標題 20px NVIDIA-EMEA weight 700，行高 1.25，顏色 #000000。內文 15px weight 400，行高 1.67，顏色 #757575。標題下方綠色底線強調：border-bottom 2px solid #76b900。」
- 「建立導覽列：#000000 背景，固定於頂部。NVIDIA logo 左對齊。連結 14px NVIDIA-EMEA weight 700 大寫，顏色 #ffffff。懸停：顏色 #3860be。右側對齊綠色邊框 CTA 按鈕。」
- 「建立深色功能區段：#000000 背景。區段標籤 14px weight 700 大寫，顏色 #76b900。標題 24px weight 700，顏色 #ffffff。描述文字 16px weight 400，顏色 #a7a7a7。三張產品卡片水平排列，間距 20px。」
- 「設計頁尾：#000000 背景。多欄版面含連結群組。連結 14px weight 400，顏色 #a7a7a7。懸停：顏色 #76b900。底部列含法律文字 12px，顏色 #757575。」

### 迭代指南
1. 永遠以 `#76b900` 作為強調色，絕不作為背景填充——它是邊框、底線與高亮的訊號色
2. 按鈕預設為透明搭配綠色邊框——填充背景僅在懸停／啟用狀態出現
3. Weight 700 是所有互動元素與標題的主要語調；400 僅用於內文段落
4. 所有元素圓角統一為 2px——這種銳利的極小圓角是工業美學的核心
5. 深色區段使用白色文字；淺色區段使用黑色文字——綠色強調色在兩者上效果相同
6. 連結懸停一律為 `#3860be`（藍色），無論連結的預設顏色為何
7. 標題行高 1.25，內文行高 1.50–1.67——維持此對比以建立視覺層級
8. 導覽列使用大寫 14px 粗體——這種硬體標籤式的排版語調是品牌語音的一部分