# 以 Stripe 為靈感的設計系統

> Category: 金融科技與加密貨幣
> 支付基礎設施。標誌性紫色漸層，字重 300 的優雅質感。

## 1. 視覺主題與氛圍

Stripe 的網站是金融科技設計的黃金標準——一套既能呈現技術感又兼具奢華感、既精準又不失溫度的系統。頁面以乾淨的白色畫布（`#ffffff`）為底，搭配深海軍藍標題（`#061b31`）與標誌性的紫色（`#533afd`），後者同時扮演品牌錨點與互動強調色的角色。這並非企業軟體那種冷冽、臨床的紫色，而是一種飽和度高的藍紫，傳遞出自信與高端的氣質。整體印象猶如一家金融機構經由世界頂尖字型鑄造廠重新詮釋。

自訂可變字型 `sohne-var` 是 Stripe 視覺識別的決定性元素。所有文字元素都啟用了 OpenType `"ss01"` 風格集，修改字型輪廓，呈現出鮮明的幾何現代感。在展示尺寸（48px–56px）下，sohne-var 採用字重 300——這對標題而言是極為纖細的字重，創造出一種飄渺而悄聲的權威感。這與「粗體英雄標題」的慣例截然相反；Stripe 的標題感覺不需要大聲呼喊。負值字距（56px 時為 -1.4px，48px 時為 -0.96px）將文字壓縮成緊密的工程感方塊。在較小尺寸下，系統同樣採用字重 300，並按比例縮減字距追蹤，且透過 `"tnum"` 啟用等寬數字，用於金融數據的呈現。

真正令 Stripe 與眾不同的是其陰影系統。有別於大多數網站的扁平或單層做法，Stripe 使用多層、帶藍色調的陰影：標誌性的 `rgba(50,50,93,0.25)` 搭配 `rgba(0,0,0,0.1)`，創造出帶有涼意、近乎大氣層深度的陰影——彷彿元素漂浮在暮色天空中。主陰影顏色（50,50,93）的藍灰色調直接呼應海軍藍-紫色的品牌調色盤，使連層次感都充滿品牌氣息。

**主要特徵：**
- 所有文字套用帶有 OpenType `"ss01"` 的 sohne-var——定義品牌字型輪廓的自訂風格集
- 字重 300 作為標誌性標題字重——輕盈、自信、反傳統
- 展示尺寸下的負值字距（56px 時為 -1.4px，向下按比例漸進放寬）
- 使用 `rgba(50,50,93,0.25)` 的藍色調多層陰影——帶有品牌色彩的層次感
- 深海軍藍（`#061b31`）標題取代黑色——溫潤、高端、金融質感
- 保守的圓角（4px–8px）——無膠囊形，無銳角
- 寶石紅（`#ea2261`）與洋紅（`#f96bee`）強調色，用於漸層與裝飾元素
- `SourceCodePro` 作為等寬字型搭檔，用於程式碼與技術標籤

## 2. 色彩調色盤與角色

### 主要色彩
- **Stripe 紫**（`#533afd`）：主要品牌色、CTA 背景、連結文字、互動強調。飽和的藍紫色，錨定整個系統。
- **深海軍藍**（`#061b31`）：`--hds-color-heading-solid`。主要標題色。非黑非灰——極深的藍色，為文字增添溫潤與深度。
- **純白**（`#ffffff`）：頁面背景、卡片表面、深色背景上的按鈕文字。

### 品牌色與深色
- **品牌深色**（`#1c1e54`）：`--hds-color-util-brand-900`。深靛藍，用於深色區塊、頁尾背景及品牌沉浸時刻。
- **深海軍藍**（`#0d253d`）：`--hds-color-core-neutral-975`。最深的中性色——近乎黑色但帶藍色調，呈現最大深度而不顯生硬。

### 強調色
- **寶石紅**（`#ea2261`）：`--hds-color-accentColorMode-ruby-icon-solid`。暖紅粉，用於圖示、警告與強調元素。
- **洋紅**（`#f96bee`）：`--hds-color-accentColorMode-magenta-icon-gradientMiddle`。鮮豔的粉紫，用於漸層與裝飾亮點。
- **淡洋紅**（`#ffd7ef`）：`--hds-color-util-accent-magenta-100`。洋紅主題卡片與徽章的帶色表面。

### 互動色
- **主紫**（`#533afd`）：主要連結色、啟用狀態、選取元素。
- **紫色懸停**（`#4434d4`）：主要元素懸停時的深紫色。
- **深紫**（`#2e2b8c`）：`--hds-color-button-ui-iconHover`。圖示懸停狀態的深紫。
- **淡紫**（`#b9b9f9`）：`--hds-color-action-bg-subduedHover`。柔和薰衣草色，用於低調的懸停背景。
- **中紫**（`#665efd`）：`--hds-color-input-selector-text-range`。範圍選擇器與輸入框的強調色。

### 中性色階
- **標題色**（`#061b31`）：主要標題、導覽文字、強調標籤。
- **標籤色**（`#273951`）：`--hds-color-input-text-label`。表單標籤、次要標題。
- **正文色**（`#64748d`）：次要文字、說明、圖說。
- **成功綠**（`#15be53`）：狀態徽章、成功指示（背景/邊框使用 0.2–0.4 透明度）。
- **成功文字色**（`#108c3d`）：成功徽章的文字色。
- **檸檬黃**（`#9b6829`）：`--hds-color-core-lemon-500`。警告與高亮強調色。

### 表面色與邊框
- **預設邊框**（`#e5edf5`）：卡片、分隔線與容器的標準邊框色。
- **紫色邊框**（`#b9b9f9`）：按鈕與輸入框的啟用/選取狀態邊框。
- **柔和紫色邊框**（`#d6d9fc`）：次要元素的微妙紫色調邊框。
- **洋紅邊框**（`#ffd7ef`）：洋紅主題元素的粉色調邊框。
- **虛線邊框**（`#362baa`）：拖放區與佔位元素的虛線邊框。

### 陰影色
- **藍色陰影**（`rgba(50,50,93,0.25)`）：標誌性——帶藍色調的主要陰影色。
- **深藍陰影**（`rgba(3,3,39,0.25)`）：高架元素的更深藍色陰影。
- **黑色陰影**（`rgba(0,0,0,0.1)`）：強化深度的次要陰影層。
- **環境陰影**（`rgba(23,23,23,0.08)`）：細膩層次感的柔和環境陰影。
- **輕柔陰影**（`rgba(23,23,23,0.06)`）：輕微浮起的最小環境陰影。

## 3. 字型規則

### 字型家族
- **主要字型**：`sohne-var`，後備字型：`SF Pro Display`
- **等寬字型**：`SourceCodePro`，後備字型：`SFMono-Regular`
- **OpenType 功能**：所有 sohne-var 文字全域啟用 `"ss01"`；金融數據與圖說的等寬數字使用 `"tnum"`。

### 字型層級

| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字距 | 功能 | 備註 |
|------|------|------|--------|-------------|----------------|----------|-------|
| 展示英雄 | sohne-var | 56px (3.50rem) | 300 | 1.03（緊湊） | -1.4px | ss01 | 最大尺寸，輕盈字重的權威感 |
| 大型展示 | sohne-var | 48px (3.00rem) | 300 | 1.15（緊湊） | -0.96px | ss01 | 次要英雄標題 |
| 區塊標題 | sohne-var | 32px (2.00rem) | 300 | 1.10（緊湊） | -0.64px | ss01 | 功能區塊標題 |
| 大型副標題 | sohne-var | 26px (1.63rem) | 300 | 1.12（緊湊） | -0.26px | ss01 | 卡片標題、子區塊 |
| 副標題 | sohne-var | 22px (1.38rem) | 300 | 1.10（緊湊） | -0.22px | ss01 | 較小的區塊標題 |
| 大正文 | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | 功能說明、引言文字 |
| 正文 | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | 標準閱讀文字 |
| 按鈕 | sohne-var | 16px (1.00rem) | 400 | 1.00（緊湊） | normal | ss01 | 主要按鈕文字 |
| 小型按鈕 | sohne-var | 14px (0.88rem) | 400 | 1.00（緊湊） | normal | ss01 | 次要/緊湊按鈕 |
| 連結 | sohne-var | 14px (0.88rem) | 400 | 1.00（緊湊） | normal | ss01 | 導覽連結 |
| 圖說 | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | 小型標籤、後設資料 |
| 小型圖說 | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | 細則、時間戳記 |
| 等寬圖說 | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | 金融數據、數字 |
| 微型 | sohne-var | 10px (0.63rem) | 300 | 1.15（緊湊） | 0.1px | ss01 | 微型標籤、座標軸標記 |
| 等寬微型 | sohne-var | 10px (0.63rem) | 300 | 1.15（緊湊） | -0.3px | tnum | 圖表數據、小數字 |
| 奈米 | sohne-var | 8px (0.50rem) | 300 | 1.07（緊湊） | normal | ss01 | 最小標籤 |
| 程式碼正文 | SourceCodePro | 12px (0.75rem) | 500 | 2.00（寬鬆） | normal | -- | 程式碼區塊、語法 |
| 粗體程式碼 | SourceCodePro | 12px (0.75rem) | 700 | 2.00（寬鬆） | normal | -- | 粗體程式碼、關鍵字 |
| 程式碼標籤 | SourceCodePro | 12px (0.75rem) | 500 | 2.00（寬鬆） | normal | 大寫 | 技術標籤 |
| 程式碼微型 | SourceCodePro | 9px (0.56rem) | 500 | 1.00（緊湊） | normal | ss01 | 微型程式碼註解 |

### 原則
- **輕量字重作為標誌**：展示尺寸下的字重 300 是 Stripe 最具辨識度的字型選擇。當其他人用 600–700 吸引注意時，Stripe 以輕盈作為奢華的表達——文字如此自信，不需要字重來彰顯權威。
- **ss01 無所不在**：`"ss01"` 風格集是不可妥協的。它修改特定字型（可能是替代的 `a`、`g`、`l` 形式），為所有 sohne-var 文字創造更幾何、更當代的質感。
- **兩種 OpenType 模式**：展示/正文文字使用 `"ss01"`，金融數據的等寬數字使用 `"tnum"`。兩者永不重疊——段落中的數字使用 ss01，數據表格中的數字使用 tnum。
- **漸進式字距**：字距隨尺寸成比例收緊：56px 時 -1.4px、48px 時 -0.96px、32px 時 -0.64px、26px 時 -0.26px、16px 及以下 normal。
- **雙字重的簡潔**：主要使用 300（正文與標題）和 400（UI/按鈕）。主要字型不使用粗體（700）——SourceCodePro 以 500/700 提供程式碼對比。

## 4. 元件樣式

### 按鈕

**主紫色按鈕**
- 背景：`#533afd`
- 文字：`#ffffff`
- 內距：8px 16px
- 圓角：4px
- 字型：16px sohne-var 字重 400，`"ss01"`
- 懸停：`#4434d4` 背景
- 用途：主要 CTA（「立即開始」、「聯絡銷售」）

**幽靈/輪廓按鈕**
- 背景：透明
- 文字：`#533afd`
- 內距：8px 16px
- 圓角：4px
- 邊框：`1px solid #b9b9f9`
- 字型：16px sohne-var 字重 400，`"ss01"`
- 懸停：背景切換為 `rgba(83,58,253,0.05)`
- 用途：次要操作

**透明資訊按鈕**
- 背景：透明
- 文字：`#2874ad`
- 內距：8px 16px
- 圓角：4px
- 邊框：`1px solid rgba(43,145,223,0.2)`
- 用途：第三層/資訊級操作

**中性幽靈按鈕**
- 背景：透明（`rgba(255,255,255,0)`）
- 文字：`rgba(16,16,16,0.3)`
- 內距：8px 16px
- 圓角：4px
- 外框：`1px solid rgb(212,222,233)`
- 用途：停用或靜音操作

### 卡片與容器
- 背景：`#ffffff`
- 邊框：`1px solid #e5edf5`（標準）或 `1px solid #061b31`（深色強調）
- 圓角：4px（緊湊）、5px（標準）、6px（舒適）、8px（精選）
- 陰影（標準）：`rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
- 陰影（環境）：`rgba(23,23,23,0.08) 0px 15px 35px 0px`
- 懸停：陰影加深，通常加入藍色調層

### 徽章/標籤/膠囊
**中性膠囊**
- 背景：`#ffffff`
- 文字：`#000000`
- 內距：0px 6px
- 圓角：4px
- 邊框：`1px solid #f6f9fc`
- 字型：11px 字重 400

**成功徽章**
- 背景：`rgba(21,190,83,0.2)`
- 文字：`#108c3d`
- 內距：1px 6px
- 圓角：4px
- 邊框：`1px solid rgba(21,190,83,0.4)`
- 字型：10px 字重 300

### 輸入框與表單
- 邊框：`1px solid #e5edf5`
- 圓角：4px
- 聚焦：`1px solid #533afd` 或紫色光暈
- 標籤：`#273951`，14px sohne-var
- 文字：`#061b31`
- 佔位文字：`#64748d`

### 導覽
- 白色背景上的簡潔水平導覽，帶模糊背景的黏性效果
- 品牌字標靠左對齊
- 連結：sohne-var 14px 字重 400，`#061b31` 文字，帶 `"ss01"`
- 圓角：導覽容器 6px
- CTA：靠右對齊的紫色按鈕（「登入」、「立即開始」）
- 行動裝置：漢堡選單切換，6px 圓角

### 裝飾元素
**虛線邊框**
- `1px dashed #362baa`（紫色），用於佔位/拖放區
- `1px dashed #ffd7ef`（洋紅），用於洋紅主題裝飾邊框

**漸層強調**
- 寶石紅至洋紅漸層（`#ea2261` 至 `#f96bee`），用於英雄裝飾
- 品牌深色區塊使用 `#1c1e54` 背景搭配白色文字

## 5. 版面原則

### 間距系統
- 基礎單位：8px
- 刻度：1px、2px、4px、6px、8px、10px、11px、12px、14px、16px、18px、20px
- 特點：小端刻度緊密（4–12 每 2px 一格），反映 Stripe 針對金融數據的精準 UI 取向

### 網格與容器
- 最大內容寬度：約 1080px
- 英雄區：居中單欄，充裕內距，輕盈標題
- 功能區塊：2–3 欄網格的功能卡片
- 品牌沉浸式全寬深色區塊，背景色 `#1c1e54`
- 程式碼/儀表板預覽以帶藍色調陰影的容器卡片呈現

### 留白哲學
- **精準間距**：有別於極簡系統的大量空白，Stripe 使用有節制、有目的的留白。每個間隙都是刻意的排版選擇。
- **密集數據，寬裕框架**：金融數據呈現（表格、圖表）緊湊排列，周圍的 UI 框架則大方留白。這營造出一種受控的密度感——如同精緻框架中的一份整潔試算表。
- **區塊節奏**：白色區塊與深色品牌區塊（`#1c1e54`）交替出現，形成戲劇性的明暗韻律，避免單調而不引入隨意的色彩。

### 圓角刻度
- 微型（1px）：精細元素，細膩圓角
- 標準（4px）：按鈕、輸入框、徽章、卡片——主力
- 舒適（5px）：標準卡片容器
- 寬鬆（6px）：導覽、較大互動元素
- 大型（8px）：精選卡片、英雄元素
- 複合：`0px 0px 6px 6px` 用於底部圓角容器（分頁面板、下拉選單頁尾）

## 6. 深度與層次

| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 扁平（層級 0） | 無陰影 | 頁面背景、行內文字 |
| 環境（層級 1） | `rgba(23,23,23,0.06) 0px 3px 6px` | 細微卡片浮起、懸停提示 |
| 標準（層級 2） | `rgba(23,23,23,0.08) 0px 15px 35px` | 標準卡片、內容面板 |
| 高架（層級 3） | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | 精選卡片、下拉選單、彈出框 |
| 深度（層級 4） | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | 模態框、浮動面板 |
| 光環（無障礙） | `2px solid #533afd` 外框 | 鍵盤聚焦光環 |

**陰影哲學**：Stripe 的陰影系統建立在色彩深度的原則上。當大多數設計系統使用中性灰或黑色陰影時，Stripe 的主要陰影色（`rgba(50,50,93,0.25)`）是一種深藍灰，呼應品牌的海軍藍調色盤。這使陰影不只是增添深度——更增添品牌氛圍。多層做法將這種藍色調陰影與偏移不同的純黑次要層（`rgba(0,0,0,0.1)`）搭配，創造出視差般的深度：品牌色陰影距元素較遠，中性陰影距元素較近。負擴散值（-30px、-18px）確保陰影不會水平延伸超出元素範圍，使層次感保持垂直且受控。

### 裝飾深度
- 深色品牌區塊（`#1c1e54`）透過背景色對比創造沉浸式深度
- 寶石紅至洋紅過渡的漸層疊加，用於英雄裝飾
- 陰影色 `rgba(0,55,112,0.08)`（`--hds-color-shadow-sm-top`），用於黏性元素的頂邊陰影

## 7. 應做與不應做

### 應做
- 所有文字元素都使用帶有 `"ss01"` 的 sohne-var——風格集本身就是品牌
- 所有標題與正文文字使用字重 300——輕盈是標誌
- 所有高架元素套用藍色調陰影（`rgba(50,50,93,0.25)`）
- 標題使用 `#061b31`（深海軍藍）而非 `#000000`——溫潤感至關重要
- 將圓角保持在 4px–8px 之間——保守的圓角是刻意為之
- 所有等寬/金融數字顯示使用 `"tnum"`
- 疊加陰影：遠處藍色調 + 近處中性，創造深度視差
- 使用 `#533afd` 紫色作為主要互動/CTA 色

### 不應做
- 不要對 sohne-var 標題使用字重 600–700——字重 300 是品牌聲音
- 不要在卡片或按鈕上使用大圓角（12px+、膠囊形）——Stripe 風格保守
- 不要使用中性灰陰影——始終以藍色調（`rgba(50,50,93,...)`）染色
- 不要在任何 sohne-var 文字上省略 `"ss01"`——替代字型定義了品牌個性
- 不要對標題使用純黑（`#000000`）——始終使用 `#061b31` 深海軍藍
- 不要對互動元素使用暖色強調（橙色、黃色）——紫色是主色
- 不要在展示尺寸上套用正值字距——Stripe 字距緊湊
- 不要將洋紅/寶石紅強調色用於按鈕或連結——它們僅供裝飾/漸層使用

## 8. 響應式行為

### 斷點
| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 行動裝置 | <640px | 單欄、縮小標題尺寸、堆疊卡片 |
| 平板 | 640-1024px | 雙欄網格、適中內距 |
| 桌面 | 1024-1280px | 完整版面、三欄功能網格 |
| 大型桌面 | >1280px | 居中內容，充裕邊距 |

### 觸控目標
- 按鈕使用舒適內距（垂直 8px–16px）
- 導覽連結 14px，間距充足
- 徽章最小水平內距 6px，確保點擊目標
- 行動裝置導覽切換按鈕，6px 圓角

### 收合策略
- 英雄：56px 展示 -> 行動裝置 32px，字重 300 維持不變
- 導覽：水平連結 + CTA -> 漢堡選單切換
- 功能卡片：三欄 -> 雙欄 -> 單欄堆疊
- 深色品牌區塊：維持全寬處理，縮減內部內距
- 金融數據表格：行動裝置上水平捲動
- 區塊間距：64px+ -> 行動裝置 40px
- 字型刻度壓縮：跨斷點英雄尺寸 56px -> 48px -> 32px

### 圖片行為
- 儀表板/產品截圖在所有尺寸維持藍色調陰影
- 英雄漸層裝飾在行動裝置上簡化
- 程式碼區塊維持 `SourceCodePro` 處理，可水平捲動
- 卡片圖片維持一致的 4px–6px 圓角

## 9. Agent 提示指南

### 快速色彩參考
- 主要 CTA：Stripe 紫（`#533afd`）
- CTA 懸停：深紫（`#4434d4`）
- 背景：純白（`#ffffff`）
- 標題文字：深海軍藍（`#061b31`）
- 正文文字：板岩灰（`#64748d`）
- 標籤文字：深板岩灰（`#273951`）
- 邊框：柔和藍（`#e5edf5`）
- 連結：Stripe 紫（`#533afd`）
- 深色區塊：品牌深色（`#1c1e54`）
- 成功：綠色（`#15be53`）
- 裝飾強調：寶石紅（`#ea2261`）、洋紅（`#f96bee`）

### 元件提示範例
- 「在白色背景上建立英雄區塊。標題 48px sohne-var 字重 300，行高 1.15，字距 -0.96px，顏色 #061b31，font-feature-settings 'ss01'。副標題 18px 字重 300，行高 1.40，顏色 #64748d。紫色 CTA 按鈕（#533afd，4px 圓角，8px 16px 內距，白色文字）與幽靈按鈕（透明背景，1px solid #b9b9f9，#533afd 文字，4px 圓角）。」
- 「設計卡片：白色背景，1px solid #e5edf5 邊框，6px 圓角。陰影：rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px。標題 22px sohne-var 字重 300，字距 -0.22px，顏色 #061b31，'ss01'。正文 16px 字重 300，#64748d。」
- 「建立成功徽章：rgba(21,190,83,0.2) 背景，#108c3d 文字，4px 圓角，1px 6px 內距，10px sohne-var 字重 300，邊框 1px solid rgba(21,190,83,0.4)。」
- 「建立導覽：白色黏性標題，帶 backdrop-filter blur(12px)。連結使用 sohne-var 14px 字重 400，#061b31 文字，'ss01'。靠右對齊紫色 CTA『立即開始』（#533afd 背景，白色文字，4px 圓角）。導覽容器 6px 圓角。」
- 「設計深色品牌區塊：#1c1e54 背景，白色文字。標題 32px sohne-var 字重 300，字距 -0.64px，'ss01'。正文 16px 字重 300，rgba(255,255,255,0.7)。內部卡片使用 rgba(255,255,255,0.1) 邊框，6px 圓角。」

### 迭代指南
1. 始終在 sohne-var 文字上啟用 `font-feature-settings: "ss01"`——這是品牌的字型 DNA
2. 字重 300 是預設值；僅按鈕/連結/導覽使用 400
3. 陰影公式：`rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2`，其中 Y1/B1 較大（遠陰影）、Y2/B2 較小（近陰影）
4. 標題色為 `#061b31`（深海軍藍），正文為 `#64748d`（板岩灰），標籤為 `#273951`（深板岩灰）
5. 圓角保持在 4px–8px 範圍——切勿使用膠囊形或大圓角
6. 表格、圖表或金融顯示中的任何數字都使用 `"tnum"`
7. 深色區塊使用 `#1c1e54`——非黑非灰，而是深邃的品牌靛藍
8. 程式碼使用 SourceCodePro，12px/500 字重，行高 2.00（非常寬鬆，易於閱讀）