Notion 设计系统深度解析：从 DESIGN.md 视觉规范到 tokens.css 语义化落地

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本文以 design-systems/notion 包中的规范文档（英文原版 DESIGN.md，及乌克兰语等多语言版本 DESIGN-uk.md）为核心骨架，系统拆解 Notion 官网的视觉语言——温暖极简主义、NotionInter 负字距排版、细语（whisper）边框与多层低透明度阴影，并对照仓库中的 tokens.css、components.manifest.json 等落地文件，说明这套规范如何在 OpenDesign 设计系统包中被语义化编码，以及如何直接指导编码 Agent 生成风格一致的页面原型。读完你将掌握：Notion 风格的完整设计 token 体系、可复制的组件配方、可直接粘贴给 Agent 的提示词模板，以及该规范在仓库中的实现与校验链路。

1. 包结构与阅读路径

在 OpenDesign 仓库中，每个设计系统都是一个可移植的包，统一放置在design-systems/<slug>/目录下，Notion 包位于 design-systems/notion。根据 design-systems/README.md 的说明，每个内置包至少有manifest.json、DESIGN.md、tokens.css三个文件，其中：

• manifest.json负责发现元数据、来源声明与包内路径；
• DESIGN.md是面向 Agent 的规范正文（本仓库同时提供DESIGN-uk.md等 18 种语言的翻译版本）；
• tokens.css是编译好的语义 token 样式表。

USAGE.md 给出了 Agent 与评审者的推荐阅读顺序：

1. 先读USAGE.md理解包契约；
2. 再读DESIGN.md理解视觉意图、约束与反模式；
3. 将tokens.css粘贴到第一个产物（artifact）的<style>块中，再编写组件 CSS；
4. 用components.manifest.json查看紧凑的组件清单，需要精确选择器或状态时打开components.html；
5. 需要视觉检查时查看preview/页面（preview/colors.html、preview/typography.html、preview/spacing.html）。

从 manifest.json 可以看到，该包声明为"importMode": "normalized"，其craft字段建议在生成时应用color与accessibility-baseline两条工艺规范（对应 craft/color.md 与 craft/accessibility-baseline.md）。

2. 视觉主题与氛围：温暖的纸张感，而非冰冷的玻璃感

Notion 官网的设计哲学与其产品一致：一块不挡路的干净画布。整个系统建立在暖中性色而非冷灰色的基础上，营造出一种"优质纸张"而非"无菌玻璃"的可接近极简主义。

• 页面画布为纯白#ffffff，但文字不是纯黑，而是温暖的近黑rgba(0,0,0,0.95)，在不可察觉的层面柔化了阅读体验；
• 暖灰阶（#f6f5f4、#31302e、#615d59、#a39e98）带有细微的黄褐色底色，赋予界面触觉般的、近乎模拟的温暖；
• 自定义字体NotionInter（Inter 的修改版）是系统的支柱，在展示尺寸（64px）下使用激进的负字距-2.125px，让标题显得紧凑而精确；
• 边框哲学：不依赖重边框或阴影，而是用极细的1px solid rgba(0,0,0,0.1)边框——"细语式"分隔线，几乎不可见却建立了无重量的结构；
• 阴影哲学：多层堆叠阴影，累计透明度从不超过 0.05，"深度是被感受到的，而不是被看见的"。

关键特性速查：

在 tokens.css 中，这套氛围被直接编码为语义变量：--bg: #ffffff、--fg: rgba(0,0,0,0.95)、--surface: #f6f5f4，文件头注释明确写道"depth felt rather than seen"（深度感而非可见感），与规范文档一一对应。

3. 色彩体系与角色：一个饱和色 + 暖中性骨干

3.1 主色（Primary）

• Notion Black（rgba(0,0,0,0.95)/#000000f2）：主要文本、标题、正文。95% 不透明度柔化了纯黑，同时不牺牲可读性。
• Pure White（#ffffff）：页面背景、卡片表面、蓝色按钮上的文字。
• Notion Blue（#0075de）：主要 CTA、链接色、交互强调色——核心 UI 中唯一的饱和色。

3.2 品牌次级色（Brand Secondary）

• Deep Navy（#213183）：品牌次级色，少量用于强调与深色功能区块。
• Active Blue（#005bab）：按钮激活/按下态——Notion Blue 的更暗变体。

3.3 暖中性色阶（Warm Neutral Scale）

• Warm White（#f6f5f4）：表面底色、区块交替、卡片细微填充。黄色底调是关键。
• Warm Dark（#31302e）：深色表面背景、深色区块文字。比标准灰更暖。
• Warm Gray 500（#615d59）：次级文本、描述、弱化标签。
• Warm Gray 300（#a39e98）：占位符文本、禁用态、说明文字。

3.4 语义强调色（Semantic Accent）

3.5 交互色（Interactive）

• Link Blue（#0075de）：主链接色，悬停时下划线。
• Link Light Blue（#62aef0）：用于深色背景的较亮链接变体。
• Focus Blue（#097fe8）：交互元素上的焦点环。
• Badge Blue Bg（#f2f9ff）：胶囊徽章背景，蓝色调表面。
• Badge Blue Text（#097fe8）：胶囊徽章文字，更深的蓝以保证可读性。

3.6 阴影与深度（Shadows & Depth）

• Card Shadow：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——多层卡片抬升。
• Deep Shadow：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——五层深抬升，用于模态框与重点内容。
• Whisper Border（1px solid rgba(0,0,0,0.1)）：标准分隔边框——卡片、分隔线、区块。

在 tokens.css 中，这些色值被绑定为--accent: #0075de、--accent-hover: #005bab、--success: #1aae39、--warn: #dd5b00、--danger: #dc2626、--muted: #615d59、--meta: #a39e98、--border: rgba(0,0,0,0.1)，而 Card Shadow 被收敛为--elev-raised变量（单层透明度上限 0.04）。值得注意的是--accent-active使用了现代 CSS 的color-mix(in oklab, var(--accent), black 14%)来动态计算按下态。

4. 排版规则：NotionInter 的压缩艺术

4.1 字体族（Font Family）

• 主字体：NotionInter，回退栈为Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol。
• OpenType 特性：展示与标题文本启用"lnum"（齐线数字）与"locl"（本地化字形）。

4.2 完整层级表（Hierarchy）

4.3 排版四原则

1. 按尺寸压缩（Compression at scale）：展示尺寸用 -2.125px（64px），逐级放松到 -0.625px（26px）、normal（16px）。压缩制造标题密度，同时保持正文可读。
2. 四字重系统：400（正文/阅读）、500（UI/交互）、600（强调/导航）、700（标题/展示）。比大多数系统更宽的字重范围允许细腻的层级。
3. 温暖缩放（Warm scaling）：行高随字号增大而收紧——正文 1.50（16px），副标题 1.23–1.27，展示 1.00–1.04。产生更密、更有冲击力的标题。
4. 徽章微字距（Badge micro-tracking）：12px 徽章文字使用正向字距 0.125px——系统中唯一的正字距，让细小文字更宽、更易读。

在 tokens.css 中，8 档字号被收敛为 schema 槽位：--text-xs: 12px到--text-4xl: 64px，54px 次级 hero 介于--text-3xl与--text-4xl之间，按注释说明按需内联使用；字距归一化为--tracking-display: -0.033em（即 -2.125px / 64px 的 em 归一化值）；行高则绑定为--leading-body: 1.5与--leading-tight: 1.00。字体族对应--font-display与--font-body，同时提供--font-mono（等宽栈）供代码场景使用。

5. 组件样式：按钮、卡片、表单、导航

5.1 按钮（Buttons）

Primary Blue（主按钮）

• 背景：#0075de（Notion Blue）；文字：#ffffff
• 内边距：8px 16px；圆角：4px（细微）；边框：1px solid transparent
• 悬停：背景加深至#005bab；按下：scale(0.9)变换；焦点：2px solid焦点轮廓 +var(--shadow-level-200)阴影
• 用途：主 CTA（"Get Notion free"、"Try it"）

Secondary / Tertiary（次级/三级）

• 背景：rgba(0,0,0,0.05)（半透明暖灰）；文字：#000000（近黑）
• 内边距：8px 16px；圆角：4px
• 悬停：文字色偏移、scale(1.05)；按下：scale(0.9)变换
• 用途：次级动作、表单提交

Ghost / Link Button（幽灵/链接按钮）

• 背景：透明；文字：rgba(0,0,0,0.95)
• 装饰：悬停时下划线；用途：三级动作、行内链接

Pill Badge Button（胶囊徽章按钮）

• 背景：#f2f9ff（蓝色调）；文字：#097fe8
• 内边距：4px 8px；圆角：9999px（全胶囊）；字体：12px、字重 600
• 用途：状态徽章、功能标签、"New" 标签

5.2 卡片与容器（Cards & Containers）

• 背景：#ffffff；边框：1px solid rgba(0,0,0,0.1)（细语边框）
• 圆角：12px（标准卡片）、16px（重点/hero 卡片）
• 阴影：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 圆角，图片填满上半部分

5.3 输入框与表单（Inputs & Forms）

• 背景：#ffffff；文字：rgba(0,0,0,0.9)；边框：1px solid #dddddd
• 内边距：6px；圆角：4px；焦点：蓝色轮廓环；占位符：暖灰#a39e98

5.4 导航（Navigation）

• 白色上的干净横向导航，不粘性定位
• 品牌 logo 左对齐（33x34px 图标 + 字标）
• 链接：NotionInter 15px、字重 500–600、近黑文字；悬停：偏移至var(--color-link-primary-text-hover)
• CTA：蓝色胶囊按钮（"Get Notion free"）右对齐
• 移动端：折叠为汉堡菜单；产品下拉菜单为多级分类菜单

5.5 图片处理（Image Treatment）

• 产品截图带1px solid rgba(0,0,0,0.1)边框
• 顶部圆角图片：12px 12px 0px 0px
• 面板/工作区预览截图主导功能区块；hero 插图背后为暖色渐变背景（装饰性手绘角色插图）

5.6 特色组件（Distinctive Components）

带插图的 Feature Cards

• 大型插画式头部（《神奈川冲浪里》、产品 UI 截图）
• 12px 圆角 + 细语边框；标题 22px/700，描述 16px/400
• 暖白（#f6f5f4）背景变体用于区块交替

Trust Bar / Logo 网格

• 公司 logo（信任团队区块）使用其品牌色
• 横向滚动或网格布局 + 团队数量；指标展示模式：大数字 + 描述

指标卡片（Metric Cards）

• 大数字展示（如 "$4,200 ROI"），NotionInter 40px+/700
• 下方暖灰正文描述；细语边框容器

在 components.manifest.json 中，这些组件被索引为 9 个组件组（buttons、inputs、cards、badges、links、keyboard、icons、typography、layout），包含 43 个选择器、22 个类名、24 个元素；例如 buttons 组引用--accent-hover、--ease-standard、--radius-sm、--space-2、--text-sm等 token，badges 组引用--radius-pill、--space-1、--text-xs。该清单还记录了 token 的declared/referenced/unusedDeclared/undeclaredReferenced四类统计（当前undeclaredReferenced为空，即所有引用的 token 均已声明），并附带colorExpressions: 7、pixelValues: 20的字面量审计。

6. 布局原则：8px 基准的有机间距

6.1 间距系统（Spacing System）

• 基准单位：8px
• 刻度：2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px
• 非僵硬的有机刻度，含分数值（5.6px、6.4px）用于微调

在 tokens.css 中对应--space-1: 4px至--space-12: 48px，并额外声明了区块纵向节奏变量--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px，直接呼应响应式章节的折叠策略。

6.2 网格与容器（Grid & Container）

• 最大内容宽度：约 1200px
• Hero：居中单列，顶部内边距宽裕（80–120px）
• 功能区块：2–3 列卡片网格
• 全宽暖白（#f6f5f4）区块背景用于交替
• 代码/仪表盘截图以细语边框收容

6.3 留白哲学（Whitespace Philosophy）

• 宽裕的纵向节奏：主要区块之间 64–120px。Notion 以巨大的纵向内边距让内容呼吸。
• 温暖交替：白色区块与暖白（#f6f5f4）区块交替，形成柔和视觉节奏而无生硬色彩断裂。
• 内容优先的密度：正文文本块紧凑（行高 1.50），但周围环绕宽裕留白，形成白色海洋中的可读内容孤岛。

6.4 圆角刻度（Border Radius Scale）

对应 token：--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。

7. 深度与抬升：细语级的多层阴影系统

7.1 抬升层级表

7.2 阴影哲学

Notion 的阴影系统使用多层、单层透明度极低（0.01 到 0.05）的阴影，累积成柔和、自然的抬升感。4 层卡片阴影从 1.04px 覆盖到 18px 模糊，形成深度的渐变而非一道生硬阴影；5 层深阴影延伸到 52px 模糊、0.05 透明度，产生环境光遮蔽（ambient occlusion），感觉像自然光而非计算机生成的深度。这种分层方法让元素"嵌入"页面，而非"浮在"页面上。

在 tokens.css 中对应三个变量：--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)（细语级环形轮廓）、--elev-raised（4 层卡片阴影堆叠）。

7.3 装饰性深度

• Hero 区块：装饰性手绘角色插图（俏皮风格）
• 区块交替：白色到暖白（#f6f5f4）的背景偏移
• 无生硬区块边框——分隔来自背景色变化与间距

8. 响应式行为：七档断点与折叠策略

8.1 断点表（Breakpoints）

8.2 触控目标（Touch Targets）

• 按钮使用舒适内边距（垂直 8px–16px）
• 导航链接 15px 且间距充足
• 胶囊徽章有 8px 水平内边距，保证点按目标
• 移动菜单开关为标准汉堡按钮

8.3 折叠策略（Collapsing Strategy）

• Hero：64px 展示字 → 40px → 移动端 26px，保持成比例的字距
• 导航：横向链接 + 蓝色 CTA → 汉堡菜单
• 功能卡片：3 列 → 2 列 → 单列堆叠
• 产品截图：保持宽高比，响应式图片
• 信任条 logo：网格 → 移动端横向滚动
• 页脚：多列 → 堆叠单列
• 区块间距：80px+ → 移动端 48px

8.4 图片行为（Image Behavior）

• 工作区截图在所有尺寸下保持细语边框
• Hero 插图等比缩放
• 产品截图使用响应式图片与一致圆角
• 全宽暖白区块保持通栏处理

9. 可访问性与状态：对比度优先的焦点系统

9.1 焦点系统（Focus System）

• 所有交互元素都有可见焦点指示
• 焦点轮廓：2px solid焦点色 + level 200 阴影
• 所有交互组件支持 Tab 导航
• 高对比文本：白底近黑文字超过 WCAG AAA（对比度 >14:1）

在 tokens.css 中编码为--focus-ring: 0 0 0 3px rgba(9, 127, 232, 0.3)，配合--motion-fast: 150ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)作为过渡基准。

9.2 交互状态（Interactive States）

• 默认：细语边框的标准外观
• 悬停：文字色偏移、按钮scale(1.05)、链接下划线
• 激活/按下：scale(0.9)变换、更暗背景变体
• 焦点：蓝色轮廓环 + 阴影强化
• 禁用：暖灰（#a39e98）文字、降低不透明度

9.3 颜色对比度（Color Contrast）

• 白底主文本（rgba(0,0,0,0.95)）：约 18:1
• 白底次级文本（#615d59）：约 5.5:1（WCAG AA）
• 白底蓝色 CTA（#0075de）：约 4.6:1（大文本 WCAG AA）
• 徽章底上的徽章文字（#097fe8于#f2f9ff）：约 4.5:1（大文本 WCAG AA）

这也解释了为何 manifest.json 的craft.suggested字段建议应用 craft/color.md 与 craft/accessibility-baseline.md 两条工艺规范——保证生成结果符合对比度与色彩角色约束。

10. Agent 提示指南：把规范直接变成提示词

10.1 快速颜色参考（Quick Color Reference）

10.2 示例组件提示词（可直接复制给 Agent）

Hero 区块："Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover)."

卡片："Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: 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. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59."

胶囊徽章："Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px."

导航："Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius)."

交替区块布局："Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px."

10.3 迭代指南（Iteration Guide）

1. 始终使用暖中性色——Notion 的灰带黄褐底调（#f6f5f4、#31302e、#615d59、#a39e98），绝不用蓝灰；
2. 字距随字号缩放：64px 时 -2.125px、54px 时 -1.875px、26px 时 -0.625px、16px 时 normal；
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 Blue（#0075de）是核心 UI 中唯一的饱和色——仅用于 CTA 与链接。

11. 仓库中的实现与校验：从规范到可运行产物

11.1 语义 token 契约（tokens.css）

该文件是包内唯一的 token 真源。它把规范文档中的所有设计决策绑定到共享的 schema 变量上，关键映射决策包括：

• --bg绑定纯白；--surface绑定暖白（#f6f5f4）；--surface-warm别名指向同一暖白层；
• --fg绑定rgba(0,0,0,0.95)——标志性的近黑；
• --fg-2绑定#31302e（暖深）用于表面上的标题；
• --accent是 Notion Blue（#0075de）——唯一的饱和色；
• --tracking-display: -0.033em（-2.125px / 64px 归一化）；
• --elev-raised是 4 层卡片阴影，最大透明度 0.04；
• --radius-sm: 4px（按钮/输入框）；--radius-md: 8px（卡片）。

11.2 派生产物与一致性保障

根据 source/evidence.md，本包由 OpenDesign 精选的内置 fixture 反填（backfill）而成，并不声称抓取过原始上游品牌站点；source/token-contract.report.json 将每一个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行。以下文件均为派生缓存而非竞争真源，应按注释要求由报告与 token 样式表重新生成，而非手工编辑：

• design-tokens.json：由 token 契约报告派生，必须与tokens.css一致；
• tailwind-v4.css：由tokens.css派生，通过@theme把--color-*、--text-*、--spacing-*、--radius-*、--shadow-*等映射为 Tailwind v4 工具类；
• components.manifest.json：由components.html与tokens.css派生。

依据 design-systems/README.md，仓库的包质量守卫（guard）会校验声明路径、丰富档案、派生文件一致性、token 契约、组件 fixture、来源证据与预览覆盖；编写新包后需运行pnpm guard与pnpm typecheck。包的批量同步由 scripts/sync-design-systems.ts 负责，而完整的包编写规范与评审清单见 docs/design-systems.md。

11.3 使用方式

在 OpenDesign 的 Design System 界面或项目创建工作流中选择该包，其设计上下文即被组合进 Agent 提示词中；用户也可以在 UI 与od design-systems import-*CLI 中通过本地文件夹、GitHub 与 shadcn 三种导入流引入包。生成页面时，按 USAGE.md 的"避免"清单操作：不要在拷贝的:roottoken 块之外使用裸十六进制值、不要脱离tokens.css单独重定义 Tailwind 或 design-token 值、不要新增components.html或DESIGN.md中未体现的组件配方。

总结

Notion 设计系统包（design-systems/notion）是一套高度自洽的"温暖极简主义"规范：一个饱和色（Notion Blue#0075de）、一条带黄褐底调的暖中性色阶、一套随字号缩放字距的 NotionInter 排版系统、全站统一的细语边框与低透明度多层阴影。规范文档 DESIGN.md（及 DESIGN-uk.md 等多语言版本）提供了从色彩、排版、组件、布局、响应式到可访问性的完整配方与 Agent 提示词模板；而 tokens.css 以共享语义 token 契约将其编译为可直接粘贴使用的 CSS 变量，配合components.manifest.json的组件索引与 token 审计、tailwind-v4.css的 Tailwind 映射，构成了"规范 → token → 组件 → 校验"的完整落地链路，让编码 Agent 可以稳定复现 Notion 官网式的视觉质感。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成