受 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 时 -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. 深度与高度

阴影哲学：Notion 的阴影系统使用多层极低个体透明度（0.01 至 0.05）的叠加，累积成柔和、自然的高度效果。4层卡片阴影从 1.04px 延伸到 18px 模糊，创造深度渐变而非单一硬阴影。5层深阴影延伸至 52px 模糊，透明度 0.05，产生感觉像自然光而非计算机生成深度的环境遮蔽。这种分层方法使元素感觉嵌入页面而非漂浮于其上。

装饰性深度

• 主标题区块：装饰性角色插图（俏皮、手绘风格）
• 区块交替：白色到温暖白（#f6f5f4）背景切换
• 无硬性区块边框——分隔来自背景色变化和间距

7. 响应式行为

断点

触控目标

• 按钮使用舒适内边距（垂直 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 和链接