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