- AI 应用
- 人工智能
- AI 技能
- 设计系统
- 媒体生成
【免费下载链接】open-design
🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.
本文以 OpenDesign 倉庫中 design-systems/notion/DESIGN-zh-tw.md 為核心骨架，結合同目錄下的
tokens.css、components.html、manifest.json等真實交付物，完整拆解 Notion 設計語言的每一個可複製細節：從溫暖中性色調、NotionInter 負字間距排版，到低語邊框與多層陰影的「感受到而非看到」的深度哲學，再到面向 Agent 的提示指南。讀者讀完後，可以直接把這套設計系統以 Token 形式落地到自己的 Landing Page、SaaS 產品介面或代理生成的工作流中，並理解它在 OpenDesign 設計系統目錄中的包裝結構與使用方式。
1. 視覺主題與氛圍：一塊不干擾你的空白畫布
Notion 的網站體現了其工具本身的哲學：一塊不干擾你的空白畫布。整個設計系統建立在溫暖中性色調而非冷灰色之上，創造出一種截然不同的平易近人的極簡主義風格，感覺像優質紙張而非無菌玻璃。
幾個決定性的視覺決策：
- 頁面畫布是純白色（
#ffffff），但文字並非純黑——它是溫暖的近黑色rgba(0,0,0,0.95)，以難以察覺的方式柔化了閱讀體驗。 - 溫暖灰色調帶有黃棕色底色（
#f6f5f4、#31302e、#615d59、#a39e98），賦予介面一種觸感十足、近乎模擬的溫暖。 - 定製字型 NotionInter（修改版 Inter）是整個系統的骨幹。在展示尺寸（64px）下使用激進的負字間距（-2.125px），使標題看起來緊湊而精準；字重範圍比一般系統更廣（400/500/600/700）。
- 邊框哲學：不使用厚重邊框或陰影，而是使用超細的
1px solid rgba(0,0,0,0.1)邊框——低語級別的分界線，在不增加重量的情況下創造結構。 - 陰影系統克制：多層疊加，累積透明度從未超過 0.05，創造出「感受到而非看到」的深度。
在 OpenDesign 的 tokens.css 中，這套視覺語言被壓縮為可複用的 CSS 變數。例如--fg綁定rgba(0, 0, 0, 0.95)這個簽名式近黑色、--surface綁定#f6f5f4溫暖白、--border綁定rgba(0, 0, 0, 0.1)低語邊框，而--tracking-display: -0.033em正是將 64px 下 -2.125px 的字間距歸一化後的結果（-2.125px ÷ 64px）。
核心特徵一覽：
- 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. 色彩體系與角色
2.1 主色
| 名稱 | 值 | 角色 |
|---|---|---|
| Notion 黑 | rgba(0,0,0,0.95)/#000000f2 | 主要文字、標題、內文。95% 不透明度在不影響可讀性的情況下柔化了純黑 |
| 純白 | #ffffff | 頁面背景、卡片表面、藍色上的按鈕文字 |
| Notion 藍 | #0075de | 主要 CTA、連結顏色、互動強調色——核心 UI 框架中唯一的飽和色 |
在 Token 層面，這三個主色分別對應 tokens.css 中的--fg（近黑色文字）、--bg（純白畫布）、--accent（Notion 藍）。
2.2 品牌輔助色
- 深海軍藍（
#213183）：次要品牌色，少量用於強調和深色功能區塊。 - 啟用藍（
#005bab）：按鈕啟用/按下狀態——Notion 藍的深色變體。對應 Token--accent-hover。
2.3 溫暖中性色調
| 名稱 | 值 | Token | 用途 |
|---|---|---|---|
| 溫暖白 | #f6f5f4 | --surface | 背景表面色調、區塊交替、細微卡片填充。黃色底色是關鍵 |
| 溫暖深色 | #31302e | --fg-2 | 深色表面背景、深色區塊文字。比標準灰色更溫暖 |
| 溫暖灰 500 | #615d59 | --muted | 次要文字、描述、靜音標籤 |
| 溫暖灰 300 | #a39e98 | --meta | 佔位文字、停用狀態、說明文字 |
值得注意的是，--surface-warm在 tokens.css 中被定義為var(--surface)的別名，這正是 OpenDesign Token 模式中「B-slot」層級的典型寫法（見第 10 節）。
2.4 語義強調色
- 青綠（
#2a9d99）：成功狀態、正面指示器。 - 綠色（
#1aae39）：確認、完成徽章（Token--success）。 - 橙色（
#dd5b00）：警告狀態、注意指示器（Token--warn）。 - 粉色（
#ff64c8）：裝飾性強調、功能高亮。 - 紫色（
#391c57）：高級功能、深色強調。 - 棕色（
#523410）：大地色強調、溫暖功能區塊。
2.5 互動色
| 名稱 | 值 | 用途 |
|---|---|---|
| 連結藍 | #0075de | 主要連結顏色，懸停時帶底線 |
| 淺連結藍 | #62aef0 | 深色背景上的淺色連結變體 |
| 焦點藍 | #097fe8 | 互動元素的焦點環 |
| 徽章藍背景 | #f2f9ff | 膠囊徽章背景，藍色調表面 |
| 徽章藍文字 | #097fe8 | 膠囊徽章文字，深藍色確保可讀性 |
焦點環在 Token 層面體現為--focus-ring: 0 0 0 3px rgba(9, 127, 232, 0.3)，由焦點藍（#097fe8）轉化而來。
2.6 陰影與深度
- 卡片陰影：
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——多層卡片高度（Token--elev-raised）。 - 深陰影：
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)——標準分割邊框（卡片、分隔線、區塊，Token--border）。
此外 tokens.css 還提供了--elev-flat: none（平面層）與--elev-ring: 0 0 0 1px var(--border)（環狀描邊）兩個額外高度檔位。
3. 排版規則
3.1 字型家族
- 主字型：
NotionInter，備用字型：Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol。對應 Token--font-display與--font-body（兩者值相同，均為完整的字型棧）。 - OpenType 特性：在展示和標題文字上啟用
"lnum"（等高數字）和"locl"（本地化字形）。在 components.html 的body規則中通過font-feature-settings: "lnum", "locl"全局開啟，h1亦單獨宣告。 - 等寬字型：
ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace（Token--font-mono）。
3.2 層次結構
| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字間距 | 備註 |
|---|---|---|---|---|---|---|
| 展示主標題 | 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 | 小元資料、時間戳記 |
在 Token 體系中，這套尺度被壓縮為--text-xs（12px）到--text-4xl（64px）共 8 個檔位，並以--leading-body: 1.5、--leading-tight: 1.00、--tracking-display: -0.033em三個變數承載行高與字間距的核心決策。54px 的展示次標題介於--text-4xl與--text-3xl之間，在 tokens.css 的注釋中標明作為「inline」值出現在 components.html 中按需使用。
3.3 原則
- 尺度壓縮：NotionInter 在展示尺寸使用 64px 時 -2.125px 的字間距，逐漸放寬至 26px 時 -0.625px 和 16px 時的正常值。壓縮在標題處創造密度，同時在內文尺寸保持可讀性。在 components.html 中體現為
h1 { letter-spacing: var(--tracking-display) }、h2 { letter-spacing: -0.031em }、h3 { letter-spacing: -0.024em }的漸進放寬。 - 四字重系統：400（內文/閱讀）、500（UI/互動）、600（強調/導覽）、700（標題/展示）。與大多數系統相比更寬的字重範圍允許細膩的層次結構。
- 溫暖縮放：行高隨尺寸增大而收緊——內文（16px）1.50，副標題 1.23-1.27，展示 1.00-1.04。這在標題處創造更密集、更有衝擊力的效果。
- 徽章微字距：12px 徽章文字使用正字間距（0.125px）——系統中唯一的正字距，創造更寬、更易辨認的小號文字。
4. 元件樣式
4.1 按鈕
主藍色按鈕（.btn-primary）
- 背景：
#0075de（Notion 藍，Token--accent） - 文字：
#ffffff（Token--accent-on） - 內邊距：8px 16px
- 圓角：4px（微妙，Token
--radius-sm） - 邊框：
1px solid transparent - 懸停：背景加深至
#005bab（Token--accent-hover） - 啟用：scale(0.9) 變換（components.html 中實際為
.btn:active { transform: scale(0.95) }） - 焦點：
2px solid焦點輪廓 +--focus-ring陰影強化 - 用途：主要 CTA（「免費使用 Notion」「立即嘗試」）
次要/三級按鈕（.btn-secondary）
- 背景：
rgba(0,0,0,0.05)（半透明溫暖灰，hover 時加深至rgba(0,0,0,0.08)） - 文字：
#000000（近黑色） - 內邊距：8px 16px；圓角：4px
- 啟用：scale(0.9) 變換
- 用途：次要操作、表單提交
幽靈/連結按鈕（.btn-ghost）
- 背景：透明；文字：
rgba(0,0,0,0.95) - 裝飾：懸停時底線（components.html 中
.btn-ghost直接以text-decoration: underline呈現，內邊距收窄為 8px 4px） - 用途：三級操作、內聯連結
膠囊徽章按鈕（.pill、.pill-blue、.pill-green）
- 背景：
#f2f9ff（藍色調）；文字：#097fe8 - 內邊距：4px 8px；圓角：9999px（完整膠囊，Token
--radius-pill） - 字型：12px 字重 600（Token
--text-xs），字間距 0.125px - 綠色變體：背景
#e8faf0、文字#1aae39（成功狀態） - 用途：狀態徽章、功能標籤、「新」標籤
4.2 卡片與容器
- 背景：
#ffffff（Token--bg）；溫暖變體.card-warm使用--surface - 邊框：
1px solid rgba(0,0,0,0.1)（低語邊框） - 圓角：12px（標準卡片，Token
--radius-lg），16px（特色/主打卡片） - 陰影：
rgba(0,0,0,0.04) 0px 4px 18px, ...四層疊加（Token--elev-raised） - 懸停：微妙陰影增強（components.html 中
.card預設無陰影，:hover才浮現--elev-raised，以--motion-base（200ms）過渡） - 圖片卡片：12px 頂部圓角，圖片填充上半部分
4.3 輸入框與表單（.field）
- 背景：
#ffffff；文字：rgba(0,0,0,0.9) - 邊框：
1px solid #dddddd；內邊距：6px（components.html 中為 6px 8px） - 圓角：4px
- 焦點：邊框變為
--accent藍色 +--focus-ring陰影 - 佔位符：溫暖灰
#a39e98（Token--meta） - 標籤：14px 字重 500（Token
--text-sm）
4.4 導覽
- 白色背景上的簡潔水平導覽，非黏性
- 品牌標誌左對齊（33x34px 圖示 + 文字標誌）
- 連結：NotionInter 15px 字重 500-600，近黑色文字
- 懸停：顏色變化至
var(--color-link-primary-text-hover) - CTA：藍色膠囊按鈕（「免費使用 Notion」）右對齊
- 行動裝置：漢堡選單折疊
- 帶多層分類選單的產品下拉選單
4.5 圖片處理
- 產品截圖配
1px solid rgba(0,0,0,0.1)邊框 - 頂部圓角圖片：
12px 12px 0px 0px圓角 - 儀表板/工作區預覽截圖主導功能區塊
- 主標題插圖後的溫暖漸層背景（裝飾性角色插圖）
4.6 特色元件
帶插圖的功能卡片
- 大型插圖標題（神奈川沖浪裏、產品 UI 截圖）
- 12px 圓角卡片配低語邊框
- 標題 22px 字重 700，描述 16px 字重 400
- 溫暖白（
#f6f5f4）背景變體用於交替區塊
信任欄/Logo 網格
- 公司標誌（受信任團隊區塊）使用品牌原色
- 水平捲動或帶團隊數量的網格版面
- 指標展示：大數字 + 描述模式
指標卡片
- 大數字展示（例如「$4,200 ROI」或 components.html 中的「4,000,000+」）
- NotionInter 40px+ 字重 700 用於指標（components.html 中以
--text-2xl+letter-spacing: -0.02em實現） - 下方溫暖灰內文描述
- 低語邊框卡片容器
5. 版面原則
5.1 間距系統
- 基礎單位：8px（Token
--space-2） - 比例：2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px
- 帶小數值（5.6px、6.4px）的有機非剛性比例，用於微調
- Token 化之後：
--space-1（4px）至--space-12（48px）共 9 個檔位
5.2 網格與容器
- 最大內容寬度：約 1200px（Token
--container-max） - 主標題：居中單欄，頂部大內邊距（80-120px）
- 功能區塊：2-3 欄卡片網格（components.html 中
.features-grid為 3 欄，平板降為 2 欄，手機 1 欄；.hero-grid為 1fr 1fr 雙欄） - 全寬溫暖白（
#f6f5f4）區塊背景用於交替 - 程式碼/儀表板截圖配低語邊框內嵌
- 容器左右內邊距按設備分檔：桌面 24px、平板 16px、手機 12px（Token
--container-gutter-desktop/tablet/phone）
5.3 留白哲學
- 充裕的垂直節奏：主要區塊間 64-120px。Token 層面以
--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px三個變數統一控制區塊上下內邊距，components.html 中section { padding-block: var(--section-y-desktop) }並配合媒體查詢降級。 - 溫暖交替：白色區塊與溫暖白（
#f6f5f4）區塊交替，創造柔和的視覺節奏，無強烈色彩斷裂。components.html 中以section + section { border-top: 1px solid var(--border) }替代硬性區塊分割。 - 內容優先密度：內文塊緊湊（行高 1.50），但被充裕的邊距包圍，在白色空間的海洋中創造可讀內容孤島。
5.4 圓角比例
| 檔位 | 值 | 用途 | Token |
|---|---|---|---|
| 微型 | 4px | 按鈕、輸入框、功能性互動元素 | --radius-sm |
| 微妙 | 5px | 連結、清單項目、選單項目 | — |
| 標準 | 8px | 小卡片、容器、內聯元素 | --radius-md |
| 舒適 | 12px | 標準卡片、功能容器、圖片頂部 | --radius-lg |
| 大型 | 16px | 主打卡片、特色內容、推廣塊 | — |
| 完整膠囊 | 9999px | 徽章、膠囊、狀態指示器 | --radius-pill |
| 圓形 | 100% | 標籤指示器、頭像 | — |
6. 深度與高度
| 層級 | 處理方式 | 用途 | 對應 Token |
|---|---|---|---|
| 平面（Level 0） | 無陰影，無邊框 | 頁面背景、文字塊 | --elev-flat |
| 低語（Level 1） | 1px solid rgba(0,0,0,0.1) | 標準邊框、卡片輪廓、分隔線 | --border/--elev-ring |
| 柔和卡片（Level 2） | 4層陰影疊加（最大透明度 0.04） | 內容卡片、功能塊 | --elev-raised |
| 深度卡片（Level 3） | 5層陰影疊加（最大透明度 0.05，52px 模糊） | 模態框、特色面板、主打元素 | — |
| 焦點（無障礙） | 2px solid var(--focus-color)輪廓 | 所有互動元素的鍵盤焦點 | --focus-ring |
陰影哲學：Notion 的陰影系統使用多層極低個體透明度（0.01 至 0.05）的疊加，累積成柔和、自然的高度效果。4 層卡片陰影從 1.04px 延伸到 18px 模糊，創造深度漸變而非單一硬陰影；5 層深陰影延伸至 52px 模糊，透明度 0.05，產生感覺像自然光而非電腦生成深度的環境遮蔽。這種分層方法使元素感覺嵌入頁面而非漂浮於其上。
裝飾性深度
- 主標題區塊：裝飾性角色插圖（俏皮、手繪風格）
- 區塊交替：白色到溫暖白（
#f6f5f4）背景切換 - 無硬性區塊邊框——分隔來自背景色變化和間距
7. 響應式行為
7.1 斷點
| 名稱 | 寬度 | 主要變化 |
|---|---|---|
| 小型行動裝置 | <400px | 緊湊單欄，最小內邊距 |
| 行動裝置 | 400-600px | 標準行動，堆疊版面 |
| 小型平板 | 600-768px | 開始 2 欄網格 |
| 平板 | 768-1080px | 完整卡片網格，擴展內邊距 |
| 小型桌面 | 1080-1200px | 標準桌面版面 |
| 桌面 | 1200-1440px | 完整版面，最大內容寬度 |
| 大型桌面 | >1440px | 居中，充裕邊距 |
在 components.html 的實際實現中，斷點簡化為兩個媒體查詢：max-width: 1023px（容器改用平板內邊距、區塊改用平板垂直節奏、hero 與功能網格降欄）與max-width: 639px（改用手機內邊距與手機節奏、功能網格單欄）。設計規範的 7 檔斷點與實現的 2 檔媒體查詢互為補充：前者是完整的設計意圖，後者是經濟的落地策略。
7.2 觸控目標
- 按鈕使用舒適內邊距（垂直 8px-16px）
- 導覽連結 15px，配合充足間距
- 膠囊徽章有 8px 水平內邊距用於點選目標
- 行動裝置選單切換使用標準漢堡按鈕
7.3 折疊策略
- 主標題：64px 展示 → 縮小至 40px → 行動裝置 26px，保持比例字間距
- 導覽：水平連結 + 藍色 CTA → 漢堡選單
- 功能卡片：3欄 → 2欄 → 單欄堆疊
- 產品截圖：使用響應式圖片保持長寬比
- 信任欄標誌：網格 → 行動裝置水平捲動
- 頁腳：多欄 → 堆疊單欄
- 區塊間距：80px+ → 行動裝置 48px（Token 層面即
--section-y-*三檔切換）
7.4 圖片行為
- 工作區截圖在所有尺寸保持低語邊框
- 主標題插圖按比例縮放
- 產品截圖使用一致圓角的響應式圖片
- 全寬溫暖白區塊保持邊到邊處理
8. 無障礙與狀態
8.1 焦點系統
- 所有互動元素接收可見焦點指示器
- 焦點輪廓：
2px solid配焦點色 + 陰影強化（components.html 中.btn:focus-visible { outline: none; box-shadow: var(--focus-ring) }，輸入框:focus則同時切換邊框色為--accent） - 所有互動元件全程支援鍵盤導覽
- 高對比度文字：白色背景上的近黑色超過 WCAG AAA（>14:1 比率）
8.2 互動狀態
- 預設：帶低語邊框的標準外觀
- 懸停：文字顏色變化，按鈕 scale(1.05)，連結底線（主按鈕實際為背景加深至
--accent-hover） - 啟用/按下：scale(0.9) 變換，更深背景變體（components.html 中
transform: scale(0.95)） - 焦點：帶陰影加強的藍色輪廓環
- 停用：溫暖灰（
#a39e98）文字，降低透明度
8.3 色彩對比度
- 白色背景上的主要文字（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）
值得注意的是，manifest.json 的craft.suggested欄位明確推薦color與accessibility-baseline兩份 craft 規範，與本節的對比度數據互相印證；相關規範位於倉庫 craft/color.md 與 craft/accessibility-baseline.md。
9. Agent 提示指南
9.1 快速色彩參考
- 主要 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）
9.2 示例元件提示
以下是原文中可直接複製給 LLM/Agent 的元件級提示詞：
- 主標題區塊：「在白色背景上創建主標題區塊。標題 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。」
9.3 迭代指南
- 始終使用溫暖中性色——Notion 的灰色帶有黃棕色底色（#f6f5f4、#31302e、#615d59、#a39e98），絕不使用藍灰色
- 字間距隨字型尺寸縮放：64px 時 -2.125px，54px 時 -1.875px，26px 時 -0.625px，16px 時正常
- 四種字重：400（閱讀）、500（互動）、600（強調）、700（宣告）
- 邊框是低語：1px solid rgba(0,0,0,0.1)——絕不更重
- 陰影使用 4-5 層，個體透明度從不超過 0.05
- 溫暖白（#f6f5f4）區塊背景對視覺節奏至關重要
- 狀態/標籤使用膠囊（9999px），按鈕和輸入框使用 4px 圓角
- Notion 藍（#0075de）是核心 UI 中唯一的飽和色——謹慎用於 CTA 和連結
10. 從規範到交付物：OpenDesign 中的包裝結構
這份設計規範在 OpenDesign 中並非孤立文檔，而是以「Design System Project」的標準結構打包（見 manifest.json 與 USAGE.md）：
design-systems/notion/ ├── DESIGN.md / DESIGN-zh-tw.md ← 設計意圖、約束與反模式（本規範） ├── tokens.css ← 權威 Token 樣式表（:root 變數） ├── design-tokens.json ← 由 tokens.css 派生的 Design Tokens JSON ├── tailwind-v4.css ← Tailwind v4 @theme 派生檔案 ├── components.html ← 獨立元件 fixture（單一 <style> + 語義化 HTML） ├── components.manifest.json ← 由 components.html + tokens.css 派生之元件清單 ├── manifest.json ← 機器可讀的專案入口 ├── USAGE.md ← Agent 與審查者使用的套件指南 ├── preview/ ← colors / typography / spacing 靜態預覽頁 ├── source/ ← evidence.md、tokens.source.json、token-contract.report.json 稽核證據 └── system/ ← kit.html、kit.dark.html、tokens.default.json推薦閱讀順序（來自 USAGE.md）：先讀 USAGE.md 理解套件契約 → 再讀 DESIGN.md 掌握視覺意圖與約束 → 將tokens.css貼入 artifact 的第一個<style>區塊 → 用components.manifest.json做元件盤點 → 需要精確選擇器或狀態時查閱components.html→ 需要視覺抽檢時打開preview/頁面。
幾個關鍵使用約束：
- 保持 schema token 名稱精確不變，以確保跨品牌切換可靠。
- 使用
--accent承載主要操作、連結、焦點狀態及一個清晰的焦點元素。 - 複用
components.manifest.json中的元件組，避免發明新控制項。 - 避免在複製的
:rootToken 區塊之外使用裸色值；不要獨立於tokens.css重新定義 Tailwind 或 design-token 值。
在 Token 層面，design-tokens.json 顯示該包共宣告 56 個 Token（A1-identity 8 個、B-slot 4 個、A2 26 個、A1-structure 18 個），契約評分 100、等級 excellent，全部 56 個 Token 均有tokens.css原始聲明行背書。這些 Token 再透過 tailwind-v4.css 的@theme { --color-accent: var(--accent); ... }映射為 Tailwind v4 的 utility 主題，實現「一份權威值、多種消費方式」。
11. Token 分層：A1、A2 與 B-slot 的設計哲學
為什麼--surface-warm是var(--surface)的別名？為什麼--motion-fast也要被宣告？答案在 OpenDesign 的 Token 契約中（見 design-systems/_schema/AGENTS.md 及 packages/contracts/src/design-systems/token-schema.ts 的 TOKEN_SCHEMA）：
| 層級 | 誰決定值 | 若省略 | 舉例 |
|---|---|---|---|
| A1-identity | 品牌 | guard 失敗 | --bg、--fg、--accent、--font-display |
| A1-structure | 品牌 | guard 失敗 | 字型尺度、--container-max、--section-y-* |
| A2 | 品牌（帶 fallback） | 今日 guard 失敗，未來由派生腳本填充 | --motion-fast、--success、--space-4、--font-mono |
| B-slot | 品牌或 schema 建議的別名 | guard 失敗——品牌必須宣告 | --fg-2 → var(--fg)、--surface-warm → var(--surface) |
關鍵原因是：OpenDesign 的 artifact 由 Agent 將單一品牌的:root區塊貼入單個<style>生成，沒有全局樣式表與品牌並行載入。若品牌省略某個 A2 或 B-slot Token，任何transition: var(--motion-fast)或var(--fg-2)引用都會在 artifact 內靜默失效。因此在當前契約下，每個品牌的tokens.css都必須宣告全部共用 Token——Notion 包 56 個 Token 全數齊備正是這一契約的執行結果。品牌特有的 Token 則作為 C-extension 追蹤，當第二個品牌使用同名 Token 時再依「C → B-slot → A2」路徑升級。
12. 如何將這套系統應用於實戰
12.1 直接複製 Token 基底
在生成 Landing Page 或產品介面 artifact 時，將 tokens.css 的:root區塊（或 components.html 中的同名區塊）貼入<style>頂部，之後所有元件規則一律引用var(--*)，杜絕裸色值。
12.2 按元件配方組裝
依照 components.manifest.json 的元件組盤點（按鈕、輸入框、卡片、徽章、連結、圖示、排版、版面共 9 組，43 個選擇器），直接複用.btn-primary、.card、.pill、.field、.hero-grid、.features-grid等已驗證的配方。該清單還記錄了每個元件組引用的 Token 清單（例如 buttons 組引用--accent-hover、--radius-sm、--space-2、--text-sm等），便於審查元件與 Token 的綁定關係。
12.3 搭配 Tailwind v4 使用
若專案基於 Tailwind v4，可@import "./tokens.css"並套用 tailwind-v4.css 的@theme映射，直接獲得bg-bg、text-fg、text-accent、rounded-pill、shadow-raised等語義 utility，且所有值仍指向同一份權威 Token。
12.4 視覺驗證與稽核
- 視覺抽檢：打開 preview/colors.html、preview/typography.html、preview/spacing.html 三個預覽頁。
- Token 契約稽核：
source/token-contract.report.json將每個 TOKEN_SCHEMA 綁定映射回tokens.css的聲明行；source/evidence.md說明本包基於 OpenDesign 精選 bundled fixture，不對上游品牌網站做全新爬取。 - 守衛檢查：
design-tokens.json的recommendRebuild: false表示當前 Token 檔案與來源一致，無需重建。
總結
Notion 設計系統的核心可濃縮為一句話：用溫暖中性色、緊湊展示字型、低語邊框與多層微陰影，在純白畫布上創造「感受到而非看到」的品質。在 OpenDesign 中，這套規範不是靜態文檔，而是被完整 Token 化、元件化、契約化的可交付套件——56 個 Token 全數具備來源背書，43 個選擇器覆蓋 9 大元件組，並提供 Tailwind v4 映射、靜態預覽與機器可讀的稽核證據。無論是人工設計還是交由 Agent 生成，只要遵循本文第 9 節的提示指南與第 10-11 節的包裝結構，就能穩定複現 Notion 的溫暖極簡品質，同時保持跨品牌切換的可靠性。
- AI 应用
- 人工智能
- AI 技能
- 设计系统
- 媒体生成
【免费下载链接】open-design
🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.
相关推荐
打造遊戲化設計系統：OpenDesign 中受 Duolingo 啟發的設計系統（DESIGN-zh-tw）完整實戰指南
打造遊戲化設計系統：OpenDesign 中受 Duolingo 啟發的設計系統（DESIGN zh tw）完整實戰指南 本文以 design systems/
AI 应用人工智能AI 技能设计系统媒体生成Starship Jetpack Preset 完整指南：基於終端配色主題的偽極簡提示字元設定
Starship Jetpack Preset 完整指南：基於終端配色主題的偽極簡提示字元設定 Jetpack 是 Starship 官方收錄的社群預設集（pr
CLI开发工具BepInEx：免费给Unity游戏加插件的框架
BepInEx：免费给Unity游戏加插件的框架 BepInEx 是一个免费的 Unity 游戏插件框架：把插件 DLL 丢进游戏目录的 plugins 文件夹
游戏开发插件系统
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
