# 受 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 和連結