workbuddy_skills/open-design/design-systems/shopify/DESIGN-zh-tw.md

# 受 Shopify 啟發的設計系統

> Category: 電子商務與零售
> 電商平台。深色優先的電影感，霓虹綠強調色，超細字重。

## 1. 視覺主題與氛圍

Shopify.com 是一座深色優先的數位劇場——一個將其商業平台以電影首映式方式呈現的網站。整個體驗在近黑色的表面上展開，這些表面帶著深邃森林綠的最微弱低語（`#02090A`、`#061A1C`、`#102620`），營造出一種夜間氛圍，感覺與其說是一個 SaaS 行銷頁面，不如說是科技發表會上的一場獨家產品揭幕。這種黑暗並不冷酷或企業化——它是奢華體驗中溫暖包覆的黑暗，就像坐在黑暗禮堂的前排。

排版是當之無愧的主角。NeueHaasGrotesk——一種精緻的 Helvetica 後裔——以紀念碑式的尺寸（96px）和難以置信的細字重（330-400）出現，創造出感覺是用光刻就而非用墨水印刷的標題。`ss03` OpenType 特性賦予字形獨特個性，使 Shopify 的字體與普通 Helvetica 用法區分開來。在展示層之下，Inter Variable 以外科手術般的精準處理內文，使用同樣不尋常的可變字重（420、450、550），這些字重存在於傳統字重檔位之間的空間裡。這種精準度傳遞出一家對每個細節都精益求精的公司的訊號。

顏色使用極為克制。主要強調色是 Shopify 霓虹綠（`#36F4A4`）——一種電子薄荷色，只出現在焦點環和強調高亮上，在深色畫布上像生物發光訊號一樣脈動。更柔和的綠色調（蘆薈綠 `#C1FBD4`、開心果綠 `#D4F9E0`）提供氛圍渲染。白色是深色表面上唯一重要的文字顏色，而基於鋅色的中性色階（`#A1A1AA` 到 `#3F3F46`）處理安靜資訊的層次結構。結果是一種讓商業技術感覺屬於科幻未來的設計。

**Key Characteristics：**
- 深色優先設計，帶有深邃森林青綠色底調（非純黑色）
- 超細展示排版（字重 330）以紀念碑式尺寸（96px）創造飄逸存在感
- 霓虹綠（`#36F4A4`）作為黑暗中單一的高能強調色
- 完整圓角按鈕（9999px 圓角半徑）作為主要互動形狀
- 分層多級盒陰影創造攝影般的深度感
- 產品截圖嵌入深色 UI 環境中，與周圍的黑暗融為一體
- 基於鋅色的中性色階處理文字層次——在冷暖之間取得平衡

## 2. 色彩面板與用途

### 主色

- **Shopify 白**（`#FFFFFF`）：深色表面上的主要文字，按鈕填充，高對比度元素
- **Shopify 黑**（`#000000`）：頁面主背景，白色按鈕上的文字，最大對比度基礎（--color-shade-100）

### 輔助色與強調色

- **霓虹綠**（`#36F4A4`）：標誌性強調色——焦點環、互動高亮、啟用狀態指示器。電子感與生物發光感
- **蘆薈綠**（`#C1FBD4`）：裝飾性背景、氛圍卡片的柔和綠色渲染（--color-aloe-10）
- **開心果綠**（`#D4F9E0`）：細微表面差異化的最淺綠色調（--color-pistachio-10）

### 表面與背景色

- **虛空黑**（`#000000`）：根頁面背景——真正的黑色以獲得最大深度
- **深青綠**（`#02090A`）：卡片表面、內容容器——帶有綠色底調的近黑色
- **深森林綠**（`#061A1C`）：具有明顯綠色特徵的區塊背景
- **森林綠**（`#102620`）：提升的深色表面、頁首背景——最溫暖的深色調
- **深色卡片邊框**（`#1E2C31`）：深色表面上的卡片邊框，細微的邊界定義

### 中性色與文字色（鋅色階）

- **Shade-30**（`#D4D4D8`）：最淺中性色，深色上幾乎不可見的邊框（--color-shade-30）
- **靜默文字**（`#A1A1AA`）：次級文字、中繼資料、描述——安靜的聲音
- **Shade-50**（`#71717A`）：三級文字、時間戳記、最不重要的資訊（--color-shade-50）
- **Shade-60**（`#52525B`）：停用文字、裝飾性中性色（--color-shade-60）
- **Shade-70**（`#3F3F46`）：細微分隔線，幾乎不可見的 UI 邊界（--color-shade-70）
- **淺色邊框**（`#E4E4E7`）：淺色表面上的邊框（罕用——僅在淺色強制回應視窗中）

### 語意色與強調色

- **Link Muted**（`#9797A2`）：帶有底線裝飾的靜默連結文字
- **Link Sage**（`#9DABAD`）：青綠色調的靜默連結
- **Link Lavender**（`#BDBDCA`）：較淺的連結變體
- **Link Mint**（`#99B3AD`）：主題區塊的綠色調連結變體

### 漸層系統

- **深青綠渲染**：從 `#102620` 中心到 `#02090A` 邊緣的徑向漸層——用於產品展示區後方
- **綠色氛圍**：英雄區塊後方細微的綠色調環境漸層，在不使用純色的情況下創造深度
- **聚光燈**：亮度集中區域逐漸消退至黑色——創造發表會風格的演示照明效果

## 3. 排版規則

### 字體族

**展示字體：** NeueHaasGrotesk（精緻的 Helvetica 後裔，可變字體）
- 備用字體：Helvetica、Arial、sans-serif
- OpenType 特性：`ss03`（風格集 3——獨特的字形替代方案）
- 可用字重：330、360、400、500、750（可變）
- 用於所有標題、英雄文字和大型展示元素

**內文字體：** Inter-Variable
- 備用字體：Helvetica、Arial、sans-serif
- OpenType 特性：`ss03`
- 可用字重：400、420、450、500、550（可變）
- 用於內文文字、連結、按鈕、UI 元素

**等寬字體：** ui-monospace
- 備用字體：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
- 用於程式碼片段、資料標籤、技術內容

### 層次結構

| 角色 | 大小 | 字重 | 行高 | 字距 | 備註 |
|------|------|--------|-------------|----------------|-------|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk，英雄標題，"ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk，強調展示 |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk，間距展示 |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk，飄逸展示 |
| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk，區塊標題 |
| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk，子區塊 |
| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk，功能標題 |
| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk，卡片標題 |
| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk，小標題 |
| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk，次要標題 |
| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter，引言段落 |
| Body | 18px | 400 | 1.56 | — | Inter-Variable，標準內文 |
| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable，強調內文 |
| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk，緊湊內文 |
| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable，輕微強調 |
| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk，CTA 文字 |
| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk，導覽項目 |
| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter，中繼資料 |
| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable，強調說明文字 |
| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk，寬字距標籤 |
| Micro | 13px | 500 | 1.50 | -0.13px | Inter，緊字距小文字 |
| Label | 12px | 400 | 1.20 | 0.72px | Inter，大寫標籤 |
| Code | 16px | 400 | 1.50 | — | ui-monospace，大寫，程式碼區塊 |
| Code Small | 12px | 400 | 1.33 | — | ui-monospace，大寫，行內程式碼 |

### 原則

Shopify 的排版是可變字體精準度的大師級示範。展示層幾乎完全使用 330-400 的字重——羽毛般輕盈的文字，看起來像投影光一樣懸浮於深色背景之上。這與大多數 SaaS 網站採用的粗重方式截然相反：別人大聲呼喊，Shopify 卻在巨大尺度上低語。96px 標題配以 330 字重創造出巨大尺寸與纖細筆畫的悖論，既有紀念碑感，又有脆弱感。`ss03` OpenType 特性啟用了一個風格集，賦予特定字元（可能是 'a'、'g' 和某些數字）更精緻的外觀，使 Shopify 的排版有別於標準 Helvetica Neue 的用法。Inter Variable 以外科手術般的精準處理內文層，使用 420 和 550 等存在於傳統檔位之間的字重——每段文字都擁有其所需的準確視覺重量。

## 4. 元件樣式

### 按鈕

**主要按鈕（白色填充）**
- 背景：白色（`#FFFFFF`）
- 文字：黑色（`#000000`）
- 邊框：2px 透明實線
- 圓角半徑：完整圓角（9999px）
- 內邊距：12px 26px 12px 16px（不對稱——右側更多內邊距以獲得視覺平衡）
- 懸停：輕微透明度降低或背景偏移
- 焦點：2px `#36F4A4`（霓虹綠）外框
- 過渡：all 200ms ease

**次要按鈕（幽靈/輪廓）**
- 背景：透明
- 文字：白色（`#FFFFFF`）
- 邊框：2px 白色實線（`#FFFFFF`）
- 圓角半徑：完整圓角（9999px）
- 內邊距：12px 26px 12px 16px
- 懸停：填充為白色背景配黑色文字
- 焦點：2px `#36F4A4` 外框

**徽章/標籤（中性填充）**
- 背景：`rgba(255, 255, 255, 0.2)`（霧面玻璃）
- 文字：白色（`#FFFFFF`）
- 邊框：無
- 圓角半徑：輕微圓角（4px）
- 內邊距：12px 16px
- 字體：16px 常規

### 卡片與容器

- 背景：深色頁面上的深青綠（`#02090A`）
- 邊框：1px 實線 `#1E2C31`（深色卡片邊框）——幾乎不可見的邊界
- 圓角半徑：標準卡片 8px，特色卡片 12px，頂部圓角卡片 20px 20px 0 0
- 陰影：多層系統：
  - 靜止狀態：`rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px` + `rgba(255,255,255,0.03) 0px 1px 0px inset`
  - 內嵌白色高亮創造細微的頂部邊緣發光效果
- 懸停：陰影擴展，卡片可能略微變亮
- 過渡：box-shadow 300ms ease，transform 200ms ease

### 輸入框與表單

- 背景：透明或深森林綠（`#061A1C`）
- 文字：白色（`#FFFFFF`）
- 邊框：1px 實線 `#3F3F46`（Shade-70）
- 圓角半徑：8px
- 內邊距：12px 16px
- 焦點：2px 實線 `#36F4A4`（霓虹綠焦點環）
- 佔位符：Shade-50（`#71717A`）
- 過渡：border-color 200ms ease

### 導覽列

- 背景：透明（疊加在深色英雄區上），捲動時變為森林綠（`#102620`）
- 高度：約 64px
- 左側：Shopify 文字標誌（SVG，深色背景上的白色）
- 中/右：18px/500 NeueHaasGrotesk 導覽連結，白色，字距 0.72px
- CTA：白色圓角按鈕「Start for free」（右側）
- 次要 CTA：帶白色邊框的幽靈按鈕
- 懸停：連結變為靜默文字（`#A1A1AA`）或出現底線
- 行動裝置：漢堡選單，全螢幕深色遮罩層
- 過渡：捲動時背景 300ms ease

### 圖片處理

- 產品截圖：嵌入深色 UI 環境中，與周圍的黑暗融為一體
- 管理介面預覽：展示在帶細微卡片邊框的深色背景上
- 長寬比：多樣——英雄圖片較寬（約 16:9），功能截圖較靈活
- 所有圖片在深色容器內平鋪——無亮色邊框或外框
- 延遲載入配以深色佔位表面

### 信任指標

- 突出展示統計數據：「15+」（年）、「150M+」（買家）
- 數字以 NeueHaasGrotesk 展示級別顯示
- 合作夥伴/開發者生態系統專區
- 深色主題的評價評論融入頁面流程中

## 5. 版面配置原則

### 間距系統

基礎單位：8px

| 標記 | 值 | 用途 |
|-------|-------|-----|
| space-1 | 4px | 緊湊行內間距 |
| space-2 | 8px | 基礎單位，圖示間距 |
| space-3 | 12px | 卡片內邊距，緊湊外邊距 |
| space-4 | 16px | 標準元素內邊距 |
| space-5 | 24px | 卡片間距，區塊內邊距 |
| space-6 | 28px | 中等區塊間距 |
| space-7 | 32px | 區塊分隔 |
| space-8 | 36px | 大內邊距 |
| space-9 | 40px | 主要區塊內邊距 |
| space-10 | 64px | 英雄區塊內邊距，大間距 |

### 網格與容器

- 最大容器寬度：約 1280px（置中）
- 英雄區：全寬，邊到邊的深色背景配置中文字
- 功能區塊：帶文字和產品截圖的兩欄版面
- 統計區塊：配大數字的水平版面
- 水平內邊距：桌面 64px，平板 32px，行動裝置 16px
- 網格間距：主要內容塊之間 24-32px

### 留白哲學

Shopify 的留白策略是戲劇性的。區塊之間以大片深色空間分隔——80px 到 120px 的純黑色呼吸空間——創造出簡報的節奏，而不是網頁的節奏。每個內容塊都是主題演講式捲動中獨立的「投影片」。在區塊內部，間距更緊湊也更有意圖，在廣闊的虛空中創造焦點密度。宏觀層面的空曠與微觀層面的精準之間的對比，賦予了網站其電影般的韻律。

### 圓角半徑尺度

| 值 | 應用場景 |
|-------|---------|
| 4px | 標籤、徽章、微型元素 |
| 8px | 標準卡片、輸入框、影片容器 |
| 12px | 特色卡片、圖片容器、按鈕（非圓角膠囊） |
| 20px | 頂部圓角卡片（20px 20px 0 0），強制回應視窗頁首 |
| 340px | 大型圓角裝飾元素 |
| 9999px | 圓角膠囊按鈕、圓角膠囊徽章、導覽元素 |

## 6. 深度與層級

| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 基礎 | 無陰影，深色表面 | 預設頁面背景 |
| 細微 | `rgba(0,0,0,0.1) 0px 0px 0px 1px` + 內嵌白色發光 | 靜止卡片 |
| 中等 | 多層：1px 環 + 2px + 4px + 8px 陰影疊加 | 提升卡片，特色區塊 |
| 高 | `rgba(0,0,0,0.25) 0px 25px 50px -12px` | 強制回應視窗、下拉選單、遮罩層 |
| 焦點 | `0px 0px 0px 2px #36F4A4` | 鍵盤焦點環（霓虹綠） |

Shopify 的陰影系統異常精密。卡片不使用單一值陰影，而是使用疊加的多層方式：用於邊界定義的 1px 環、用於自然光衰減的 2px/4px/8px 漸進模糊，以及模擬頂部照明玻璃表面的精緻內嵌白色發光（`rgba(255,255,255,0.03)`）。在深色背景上，陰影從已經很深的表面繼續加深，因此陰影更像「環境遮蔽」而不是傳統的高度——卡片看起來略微下沉入表面，而不是漂浮在其上。

### 裝飾性深度

- **深青綠漸層**：英雄區塊和產品展示區後方的環境徑向渲染
- **聚光燈效果**：從中心亮區消退至黑色的區域，營造發表會式戲劇照明
- **邊緣發光**：透過內嵌盒陰影在深色卡片上形成細微的亮色邊緣
- **綠色氛圍光暈**：背景漸層中的微弱綠色調，呼應品牌強調色

## 7. 該做與不該做

### 該做

- 使用深青綠-黑色表面層次（虛空黑 → 深青綠 → 深森林綠 → 森林綠）來營造深度
- 保持展示排版在 330-400 字重——飄逸的輕盈感是設計的標誌
- 將霓虹綠（`#36F4A4`）專門用於焦點狀態和關鍵強調高亮
- 為所有主要 CTA 按鈕套用 9999px 圓角半徑——完整圓角膠囊不可妥協
- 為卡片高度使用多層陰影系統——單一陰影看起來平淡
- 在所有文字中保持 `ss03` OpenType 特性——這是排版身份的一部分
- 內文使用 Inter Variable，標題使用 NeueHaasGrotesk——不要混淆它們的角色
- 在區塊之間創造戲劇性間距（80px+）以獲得電影般的節奏

### 不該做

- 不要在深色背景上將純黑色（#000000）用於文字——只用白色（#FFFFFF）
- 不要引入暖色（橙色、紅色、黃色）——色盤嚴格限於冷色（綠色、青綠色、中性色）
- 不要為 NeueHaasGrotesk 內文使用高於 500 的字重——重字重會破壞飄逸感
- 不要將綠色強調色套用於大面積區域——霓虹綠只用於小而精準的高亮
- 不要在互動元素上使用尖銳角（0px 圓角）——所有元素都應有圓角
- 不要添加亮色背景——深色主題是根本，不是可選的
- 不要使用單層盒陰影——疊加方式是整個系統
- 不要將內文的行高設定在 1.56 以上——Shopify 的文字相對緊湊
- 不要在同等大小/角色下混用 NeueHaasGrotesk 和 Inter——它們的字重尺度不同
- 不要為標題設定低於 0 的字距——Shopify 標題的字距為中性或正值

## 8. 響應式行為

### 中斷點

| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 行動裝置 | <640px | 單欄，漢堡導覽，展示文字縮至 48px，16px 內邊距 |
| 平板 | 640-1024px | 兩欄網格開始，展示文字 70px，32px 內邊距 |
| 桌面 | 1024-1440px | 完整版面，展開導覽，96px 展示文字，64px 內邊距 |
| 大桌面 | >1440px | 最大寬度容器置中，增加區塊間距 |

### 觸控目標

- 最小觸控目標：44x44px（WCAG AAA）
- 圓角膠囊按鈕：最低 48px 高度配慷慨的水平內邊距
- 導覽連結：44px 觸控區域
- 卡片表面：連結時整張卡片可點擊

### 折疊策略

- **導覽列**：水平全連結 → 1024px 以下變漢堡選單；Logo 和 CTA 按鈕保持可見
- **英雄區塊**：96px 展示文字 → 平板 70px → 行動裝置 48px；保持單欄置中對齊
- **功能區塊**：文字+圖片兩欄 → 768px 以下疊加為單欄
- **統計**：水平列 → 行動裝置疊加為垂直
- **區塊內邊距**：隨視埠縮小從 64px → 40px → 24px → 16px
- **卡片**：網格 → 疊加，行動裝置保持全寬

### 圖片行為

- 產品截圖：在深色容器內響應式顯示，保持長寬比
- 英雄圖片：所有中斷點全寬，延遲載入配深色佔位符
- 管理 UI 預覽：按比例縮放，行動裝置可能裁切
- 所有圖片使用 CDN（`cdn.shopify.com`）配響應式 srcset

## 9. 智能代理提示指南

### 快速顏色參考

- 主要 CTA：Shopify 白（`#FFFFFF`）
- 頁面背景：虛空黑（`#000000`）
- 卡片表面：深青綠（`#02090A`）
- 區塊背景：深森林綠（`#061A1C`）
- 提升背景：森林綠（`#102620`）
- 強調色：霓虹綠（`#36F4A4`）
- 內文文字：白色（`#FFFFFF`）
- 靜默文字：靜默灰（`#A1A1AA`）
- 深色邊框：深色卡片邊框（`#1E2C31`）

### 範例元件提示

- 「在真實黑色（#000000）背景上建立一個英雄區塊，使用 96px/330 的 NeueHaasGrotesk 白色標題、20px/500 的 #A1A1AA 副標題，以及兩個圓角膠囊按鈕：白色填充（9999px 圓角）和帶 2px 白色邊框的幽靈按鈕」
- 「在深青綠（#02090A）上設計一張帶 1px #1E2C31 邊框、12px 圓角、多層陰影（1px 環 + 2px/4px/8px 模糊，10% 黑色）的功能卡片，內含 32px/360 白色標題和 18px/400 #A1A1AA 內文」
- 「在深森林綠（#061A1C）上建構一個統計區塊，使用 96px/750 白色數字（NeueHaasGrotesk）、16px/400 #A1A1AA 描述標籤，以及統計塊之間 64px 的慷慨間距」
- 「建立一個黏性導覽列，背景透明（捲動時變為 #102620），左側白色 Shopify Logo，18px/500 白色導覽連結配 0.72px 字距，右側白色圓角膠囊按鈕「Start for free」」
- 「設計一個帶 rgba(255,255,255,0.2) 霧面玻璃背景、4px 圓角、12px 16px 內邊距、16px 白色文字的標籤/徽章——漂浮在深色卡片表面上」

### 迭代指南

使用此設計系統完善已產生的介面時：
1. 每次專注於**一個**元件
2. 引用本文件中的具體顏色名稱和十六進位代碼
3. 記住：這是**深色優先**設計——淺色表面是例外，不是規則
4. 展示文字應始終感覺羽毛輕盈（字重 330-400）——如果看起來很重，降低字重
5. 霓虹綠（#36F4A4）是珍貴的——只為焦點和強調色節儉使用
6. 深色表面層次（黑色 → 深青綠 → 深森林綠 → 森林綠）創造細微深度
7. 陰影是多層的——單個 `box-shadow` 值無法捕捉 Shopify 卡片的感覺
8. `ss03` OpenType 特性必須在所有文字上啟用以保持排版一致性