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。
313 lines
17 KiB
Markdown
313 lines
17 KiB
Markdown
# 受 Notion 啟發的設計系統
|
||
|
||
> Category: 效率與 SaaS
|
||
> 一體化工作區。溫暖極簡主義，襯線字體標題，柔和介面。
|
||
|
||
## 1. 視覺主題與氛圍
|
||
|
||
Notion 的網站體現了其工具本身的哲學：一塊不干擾你的空白畫布。設計系統建立在溫暖中性色調而非冷灰色之上，創造出一種截然不同的平易近人的極簡主義風格，感覺像優質紙張而非無菌玻璃。頁面畫布是純白色（`#ffffff`），但文字並非純黑——它是一種溫暖的近黑色（`rgba(0,0,0,0.95)`），以難以察覺的方式柔化了閱讀體驗。溫暖灰色調（`#f6f5f4`、`#31302e`、`#615d59`、`#a39e98`）帶有細微的黃棕色底色，賦予介面一種觸感十足、近乎模擬的溫暖。
|
||
|
||
定製字型 NotionInter（修改版 Inter）是整個系統的骨幹。在展示尺寸（64px）下，它使用激進的負字間距（-2.125px），使標題看起來緊湊而精準。字重範圍比一般系統更廣：內文 400，UI 元素 500，半粗標籤 600，展示標題 700。較大文字上啟用了 OpenType 特性 `"lnum"`（等高數字）和 `"locl"`（本地化字形），增加了排印精緻度，值得細細品讀。
|
||
|
||
Notion 視覺語言的獨特之處在於其邊框哲學。Notion 不使用厚重邊框或陰影，而是使用超細的 `1px solid rgba(0,0,0,0.1)` 邊框——這些邊框如低語般存在，幾乎難以察覺的分界線在不增加重量的情況下創造結構。陰影系統同樣克制：多層疊加，累積透明度從未超過 0.05，創造出感受到而非看到的深度。
|
||
|
||
**核心特徵：**
|
||
- NotionInter（修改版 Inter），展示尺寸使用負字間距（64px 時 -2.125px）
|
||
- 溫暖中性色調：灰色帶有黃棕色底色（`#f6f5f4` 溫暖白，`#31302e` 溫暖深色）
|
||
- 透過 `rgba(0,0,0,0.95)` 實現近黑色文字——非純黑，營造微妙溫暖感
|
||
- 超細邊框：全域使用 `1px solid rgba(0,0,0,0.1)`——低語級別的分割
|
||
- 透明度低於 0.05 的多層陰影疊加，營造若有若無的深度
|
||
- Notion 藍（`#0075de`）作為 CTA 和互動元素的唯一強調色
|
||
- 膠囊徽章（9999px 圓角）配色調藍色背景，用於狀態指示器
|
||
- 8px 基礎間距單位，有機、非剛性的比例
|
||
|
||
## 2. 色彩體系與角色
|
||
|
||
### 主色
|
||
- **Notion 黑**（`rgba(0,0,0,0.95)` / `#000000f2`）：主要文字、標題、內文。95% 不透明度在不影響可讀性的情況下柔化了純黑。
|
||
- **純白**（`#ffffff`）：頁面背景、卡片表面、藍色上的按鈕文字。
|
||
- **Notion 藍**（`#0075de`）：主要 CTA、連結顏色、互動強調色——核心 UI 框架中唯一的飽和色。
|
||
|
||
### 品牌輔助色
|
||
- **深海軍藍**（`#213183`）：次要品牌色，少量用於強調和深色功能區塊。
|
||
- **啟用藍**（`#005bab`）：按鈕啟用/按下狀態——Notion 藍的深色變體。
|
||
|
||
### 溫暖中性色調
|
||
- **溫暖白**（`#f6f5f4`）：背景表面色調、區塊交替、細微卡片填充。黃色底色是關鍵。
|
||
- **溫暖深色**（`#31302e`）：深色表面背景、深色區塊文字。比標準灰色更溫暖。
|
||
- **溫暖灰 500**（`#615d59`）：次要文字、描述、靜音標籤。
|
||
- **溫暖灰 300**（`#a39e98`）：佔位文字、停用狀態、說明文字。
|
||
|
||
### 語義強調色
|
||
- **青綠**（`#2a9d99`）：成功狀態、正面指示器。
|
||
- **綠色**（`#1aae39`）：確認、完成徽章。
|
||
- **橙色**（`#dd5b00`）：警告狀態、注意指示器。
|
||
- **粉色**（`#ff64c8`）：裝飾性強調、功能高亮。
|
||
- **紫色**（`#391c57`）：高級功能、深色強調。
|
||
- **棕色**（`#523410`）：大地色強調、溫暖功能區塊。
|
||
|
||
### 互動色
|
||
- **連結藍**（`#0075de`）：主要連結顏色，懸停時帶底線。
|
||
- **淺連結藍**（`#62aef0`）：深色背景上的淺色連結變體。
|
||
- **焦點藍**（`#097fe8`）：互動元素的焦點環。
|
||
- **徽章藍背景**（`#f2f9ff`）：膠囊徽章背景，藍色調表面。
|
||
- **徽章藍文字**（`#097fe8`）：膠囊徽章文字，深藍色確保可讀性。
|
||
|
||
### 陰影與深度
|
||
- **卡片陰影**（`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`）：多層卡片高度。
|
||
- **深陰影**（`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`）：模態框和特色內容的五層深度高度。
|
||
- **低語邊框**（`1px solid rgba(0,0,0,0.1)`）：標準分割邊框——卡片、分隔線、區塊。
|
||
|
||
## 3. 排版規則
|
||
|
||
### 字型家族
|
||
- **主字型**：`NotionInter`，備用字型：`Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
|
||
- **OpenType 特性**：在展示和標題文字上啟用 `"lnum"`（等高數字）和 `"locl"`（本地化字形）。
|
||
|
||
### 層次結構
|
||
|
||
| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字間距 | 備註 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 展示主標題 | NotionInter | 64px (4.00rem) | 700 | 1.00（緊湊） | -2.125px | 最大壓縮，廣告牌級標題 |
|
||
| 展示次標題 | NotionInter | 54px (3.38rem) | 700 | 1.04（緊湊） | -1.875px | 次要主標，功能標題 |
|
||
| 區塊標題 | NotionInter | 48px (3.00rem) | 700 | 1.00（緊湊） | -1.5px | 功能區塊標題，配合 `"lnum"` |
|
||
| 大型副標題 | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | 卡片標題、功能子區塊 |
|
||
| 副標題 | NotionInter | 26px (1.63rem) | 700 | 1.23（緊湊） | -0.625px | 區塊副標題、內容標題 |
|
||
| 卡片標題 | NotionInter | 22px (1.38rem) | 700 | 1.27（緊湊） | -0.25px | 功能卡片、清單標題 |
|
||
| 大內文 | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | 簡介、功能描述 |
|
||
| 內文 | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | 標準閱讀文字 |
|
||
| 內文中等 | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | 導覽、強調 UI 文字 |
|
||
| 內文半粗 | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | 強調標籤、啟用狀態 |
|
||
| 內文粗體 | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | 內文尺寸的標題 |
|
||
| 導覽/按鈕 | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | 導覽連結、按鈕文字 |
|
||
| 說明 | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | 元資料、次要標籤 |
|
||
| 淺說明 | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | 內文說明、描述 |
|
||
| 徽章 | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | 膠囊徽章、標籤、狀態標籤 |
|
||
| 微型標籤 | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | 小元資料、時間戳記 |
|
||
|
||
### 原則
|
||
- **尺度壓縮**：NotionInter 在展示尺寸使用 64px 時 -2.125px 的字間距，逐漸放寬至 26px 時 -0.625px 和 16px 時的正常值。壓縮在標題處創造密度，同時在內文尺寸保持可讀性。
|
||
- **四字重系統**：400（內文/閱讀）、500（UI/互動）、600（強調/導覽）、700（標題/展示）。與大多數系統相比更寬的字重範圍允許細膩的層次結構。
|
||
- **溫暖縮放**：行高隨尺寸增大而收緊——內文（16px）1.50，副標題 1.23-1.27，展示 1.00-1.04。這在標題處創造更密集、更有衝擊力的效果。
|
||
- **徽章微字距**：12px 徽章文字使用正字間距（0.125px）——系統中唯一的正字距，創造更寬、更易辨認的小號文字。
|
||
|
||
## 4. 元件樣式
|
||
|
||
### 按鈕
|
||
|
||
**主藍色**
|
||
- 背景：`#0075de`（Notion 藍）
|
||
- 文字：`#ffffff`
|
||
- 內邊距：8px 16px
|
||
- 圓角：4px（微妙）
|
||
- 邊框：`1px solid transparent`
|
||
- 懸停：背景加深至 `#005bab`
|
||
- 啟用：scale(0.9) 變換
|
||
- 焦點：`2px solid` 焦點輪廓，`var(--shadow-level-200)` 陰影
|
||
- 用途：主要 CTA（"免費使用 Notion"、"立即嘗試"）
|
||
|
||
**次要/三級**
|
||
- 背景：`rgba(0,0,0,0.05)`（半透明溫暖灰）
|
||
- 文字：`#000000`（近黑色）
|
||
- 內邊距：8px 16px
|
||
- 圓角：4px
|
||
- 懸停：文字顏色變化，scale(1.05)
|
||
- 啟用：scale(0.9) 變換
|
||
- 用途：次要操作、表單提交
|
||
|
||
**幽靈/連結按鈕**
|
||
- 背景：透明
|
||
- 文字：`rgba(0,0,0,0.95)`
|
||
- 裝飾：懸停時底線
|
||
- 用途：三級操作、內聯連結
|
||
|
||
**膠囊徽章按鈕**
|
||
- 背景：`#f2f9ff`（藍色調）
|
||
- 文字：`#097fe8`
|
||
- 內邊距：4px 8px
|
||
- 圓角：9999px（完整膠囊）
|
||
- 字型：12px 字重 600
|
||
- 用途：狀態徽章、功能標籤、「新」標籤
|
||
|
||
### 卡片與容器
|
||
- 背景：`#ffffff`
|
||
- 邊框：`1px solid rgba(0,0,0,0.1)`（低語邊框）
|
||
- 圓角：12px（標準卡片），16px（特色/主打卡片）
|
||
- 陰影：`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
|
||
- 懸停：微妙陰影增強
|
||
- 圖片卡片：12px 頂部圓角，圖片填充上半部分
|
||
|
||
### 輸入框與表單
|
||
- 背景：`#ffffff`
|
||
- 文字：`rgba(0,0,0,0.9)`
|
||
- 邊框：`1px solid #dddddd`
|
||
- 內邊距：6px
|
||
- 圓角：4px
|
||
- 焦點：藍色輪廓環
|
||
- 佔位符：溫暖灰 `#a39e98`
|
||
|
||
### 導覽
|
||
- 白色背景上的簡潔水平導覽，非黏性
|
||
- 品牌標誌左對齊（33x34px 圖示 + 文字標誌）
|
||
- 連結：NotionInter 15px 字重 500-600，近黑色文字
|
||
- 懸停：顏色變化至 `var(--color-link-primary-text-hover)`
|
||
- CTA：藍色膠囊按鈕（"免費使用 Notion"）右對齊
|
||
- 行動裝置：漢堡選單折疊
|
||
- 帶多層分類選單的產品下拉選單
|
||
|
||
### 圖片處理
|
||
- 產品截圖配 `1px solid rgba(0,0,0,0.1)` 邊框
|
||
- 頂部圓角圖片：`12px 12px 0px 0px` 圓角
|
||
- 儀表板/工作區預覽截圖主導功能區塊
|
||
- 主標題插圖後的溫暖漸層背景（裝飾性角色插圖）
|
||
|
||
### 特色元件
|
||
|
||
**帶插圖的功能卡片**
|
||
- 大型插圖標題（神奈川沖浪裏、產品 UI 截圖）
|
||
- 12px 圓角卡片配低語邊框
|
||
- 標題 22px 字重 700，描述 16px 字重 400
|
||
- 溫暖白（`#f6f5f4`）背景變體用於交替區塊
|
||
|
||
**信任欄/Logo 網格**
|
||
- 公司標誌（受信任團隊區塊）使用品牌原色
|
||
- 水平捲動或帶團隊數量的網格版面
|
||
- 指標展示：大數字 + 描述模式
|
||
|
||
**指標卡片**
|
||
- 大數字展示（例如「$4,200 ROI」）
|
||
- NotionInter 40px+ 字重 700 用於指標
|
||
- 下方溫暖灰內文描述
|
||
- 低語邊框卡片容器
|
||
|
||
## 5. 版面原則
|
||
|
||
### 間距系統
|
||
- 基礎單位：8px
|
||
- 比例：2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px
|
||
- 帶小數值（5.6px、6.4px）的有機非剛性比例，用於微調
|
||
|
||
### 網格與容器
|
||
- 最大內容寬度：約 1200px
|
||
- 主標題：居中單欄，頂部大內邊距（80-120px）
|
||
- 功能區塊：2-3 欄卡片網格
|
||
- 全寬溫暖白（`#f6f5f4`）區塊背景用於交替
|
||
- 程式碼/儀表板截圖配低語邊框內嵌
|
||
|
||
### 留白哲學
|
||
- **充裕的垂直節奏**：主要區塊間 64-120px。Notion 讓內容以大量垂直內邊距呼吸。
|
||
- **溫暖交替**：白色區塊與溫暖白（`#f6f5f4`）區塊交替，創造柔和的視覺節奏，無強烈色彩斷裂。
|
||
- **內容優先密度**：內文塊緊湊（行高 1.50），但被充裕的邊距包圍，在白色空間的海洋中創造可讀內容孤島。
|
||
|
||
### 圓角比例
|
||
- 微型（4px）：按鈕、輸入框、功能性互動元素
|
||
- 微妙（5px）：連結、清單項目、選單項目
|
||
- 標準（8px）：小卡片、容器、內聯元素
|
||
- 舒適（12px）：標準卡片、功能容器、圖片頂部
|
||
- 大型（16px）：主打卡片、特色內容、推廣塊
|
||
- 完整膠囊（9999px）：徽章、膠囊、狀態指示器
|
||
- 圓形（100%）：標籤指示器、頭像
|
||
|
||
## 6. 深度與高度
|
||
|
||
| 層級 | 處理方式 | 用途 |
|
||
|-------|-----------|-----|
|
||
| 平面（Level 0） | 無陰影，無邊框 | 頁面背景、文字塊 |
|
||
| 低語（Level 1） | `1px solid rgba(0,0,0,0.1)` | 標準邊框、卡片輪廓、分隔線 |
|
||
| 柔和卡片（Level 2） | 4層陰影疊加（最大透明度 0.04） | 內容卡片、功能塊 |
|
||
| 深度卡片（Level 3） | 5層陰影疊加（最大透明度 0.05，52px 模糊） | 模態框、特色面板、主打元素 |
|
||
| 焦點（無障礙） | `2px solid var(--focus-color)` 輪廓 | 所有互動元素的鍵盤焦點 |
|
||
|
||
**陰影哲學**：Notion 的陰影系統使用多層極低個體透明度（0.01 至 0.05）的疊加，累積成柔和、自然的高度效果。4層卡片陰影從 1.04px 延伸到 18px 模糊，創造深度漸變而非單一硬陰影。5層深陰影延伸至 52px 模糊，透明度 0.05，產生感覺像自然光而非電腦生成深度的環境遮蔽。這種分層方法使元素感覺嵌入頁面而非漂浮於其上。
|
||
|
||
### 裝飾性深度
|
||
- 主標題區塊：裝飾性角色插圖（俏皮、手繪風格）
|
||
- 區塊交替：白色到溫暖白（`#f6f5f4`）背景切換
|
||
- 無硬性區塊邊框——分隔來自背景色變化和間距
|
||
|
||
## 7. 響應式行為
|
||
|
||
### 斷點
|
||
| 名稱 | 寬度 | 主要變化 |
|
||
|------|-------|-------------|
|
||
| 小型行動裝置 | <400px | 緊湊單欄，最小內邊距 |
|
||
| 行動裝置 | 400-600px | 標準行動，堆疊版面 |
|
||
| 小型平板 | 600-768px | 開始 2 欄網格 |
|
||
| 平板 | 768-1080px | 完整卡片網格，擴展內邊距 |
|
||
| 小型桌面 | 1080-1200px | 標準桌面版面 |
|
||
| 桌面 | 1200-1440px | 完整版面，最大內容寬度 |
|
||
| 大型桌面 | >1440px | 居中，充裕邊距 |
|
||
|
||
### 觸控目標
|
||
- 按鈕使用舒適內邊距（垂直 8px-16px）
|
||
- 導覽連結 15px，配合充足間距
|
||
- 膠囊徽章有 8px 水平內邊距用於點選目標
|
||
- 行動裝置選單切換使用標準漢堡按鈕
|
||
|
||
### 折疊策略
|
||
- 主標題：64px 展示 -> 縮小至 40px -> 行動裝置 26px，保持比例字間距
|
||
- 導覽：水平連結 + 藍色 CTA -> 漢堡選單
|
||
- 功能卡片：3欄 -> 2欄 -> 單欄堆疊
|
||
- 產品截圖：使用響應式圖片保持長寬比
|
||
- 信任欄標誌：網格 -> 行動裝置水平捲動
|
||
- 頁腳：多欄 -> 堆疊單欄
|
||
- 區塊間距：80px+ -> 行動裝置 48px
|
||
|
||
### 圖片行為
|
||
- 工作區截圖在所有尺寸保持低語邊框
|
||
- 主標題插圖按比例縮放
|
||
- 產品截圖使用一致圓角的響應式圖片
|
||
- 全寬溫暖白區塊保持邊到邊處理
|
||
|
||
## 8. 無障礙與狀態
|
||
|
||
### 焦點系統
|
||
- 所有互動元素接收可見焦點指示器
|
||
- 焦點輪廓：`2px solid` 配焦點色 + 陰影 level 200
|
||
- 所有互動元件全程支援鍵盤導覽
|
||
- 高對比度文字：白色背景上的近黑色超過 WCAG AAA（>14:1 比率）
|
||
|
||
### 互動狀態
|
||
- **預設**：帶低語邊框的標準外觀
|
||
- **懸停**：文字顏色變化，按鈕 scale(1.05)，連結底線
|
||
- **啟用/按下**：scale(0.9) 變換，更深背景變體
|
||
- **焦點**：帶陰影加強的藍色輪廓環
|
||
- **停用**：溫暖灰（`#a39e98`）文字，降低透明度
|
||
|
||
### 色彩對比度
|
||
- 白色背景上的主要文字（rgba(0,0,0,0.95)）：約 18:1 比率
|
||
- 白色背景上的次要文字（#615d59）：約 5.5:1 比率（WCAG AA）
|
||
- 白色背景上的藍色 CTA（#0075de）：約 4.6:1 比率（大文字 WCAG AA）
|
||
- 徽章背景（#f2f9ff）上的徽章文字（#097fe8）：約 4.5:1 比率（大文字 WCAG AA）
|
||
|
||
## 9. Agent 提示指南
|
||
|
||
### 快速色彩參考
|
||
- 主要 CTA：Notion 藍（`#0075de`）
|
||
- 背景：純白（`#ffffff`）
|
||
- 替代背景：溫暖白（`#f6f5f4`）
|
||
- 標題文字：近黑色（`rgba(0,0,0,0.95)`）
|
||
- 內文文字：近黑色（`rgba(0,0,0,0.95)`）
|
||
- 次要文字：溫暖灰 500（`#615d59`）
|
||
- 靜音文字：溫暖灰 300（`#a39e98`）
|
||
- 邊框：`1px solid rgba(0,0,0,0.1)`
|
||
- 連結：Notion 藍（`#0075de`）
|
||
- 焦點環：焦點藍（`#097fe8`）
|
||
|
||
### 示例元件提示
|
||
- "在白色背景上創建主標題區塊。標題 64px NotionInter 字重 700，行高 1.00，字間距 -2.125px，顏色 rgba(0,0,0,0.95)。副標題 20px 字重 600，行高 1.40，顏色 #615d59。藍色 CTA 按鈕（#0075de，4px 圓角，8px 16px 內邊距，白色文字）和幽靈按鈕（透明背景，近黑色文字，懸停時底線）。"
|
||
- "設計一張卡片：白色背景，1px solid rgba(0,0,0,0.1) 邊框，12px 圓角。使用陰影疊加：rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px。標題 22px NotionInter 字重 700，字間距 -0.25px。內文 16px 字重 400，顏色 #615d59。"
|
||
- "構建一個膠囊徽章：#f2f9ff 背景，#097fe8 文字，9999px 圓角，4px 8px 內邊距，12px NotionInter 字重 600，字間距 0.125px。"
|
||
- "創建導覽：白色標題欄。導覽連結 NotionInter 15px 字重 600，近黑色文字。右對齊藍色膠囊 CTA '免費使用 Notion'（#0075de 背景，白色文字，4px 圓角）。"
|
||
- "設計交替區塊版面：白色區塊與溫暖白（#f6f5f4）區塊交替。每個區塊 64-80px 垂直內邊距，最大寬度 1200px 居中。區塊標題 48px 字重 700，行高 1.00，字間距 -1.5px。"
|
||
|
||
### 迭代指南
|
||
1. 始終使用溫暖中性色——Notion 的灰色帶有黃棕色底色（#f6f5f4、#31302e、#615d59、#a39e98），絕不使用藍灰色
|
||
2. 字間距隨字型尺寸縮放：64px 時 -2.125px，54px 時 -1.875px，26px 時 -0.625px，16px 時正常
|
||
3. 四種字重：400（閱讀）、500（互動）、600（強調）、700（宣告）
|
||
4. 邊框是低語：1px solid rgba(0,0,0,0.1)——絕不更重
|
||
5. 陰影使用 4-5 層，個體透明度從不超過 0.05
|
||
6. 溫暖白（#f6f5f4）區塊背景對視覺節奏至關重要
|
||
7. 狀態/標籤使用膠囊（9999px），按鈕和輸入框使用 4px 圓角
|
||
8. Notion 藍（#0075de）是核心 UI 中唯一的飽和色——謹慎用於 CTA 和連結
|