admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
326 lines
20 KiB
Markdown
326 lines
20 KiB
Markdown
# 以 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（非常寬鬆，易於閱讀）
|