open-design 中的 Notion 设计系统暖色极简主义的设计令牌、组件规范与 Agent 落地指南【免费下载链接】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.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本篇技术指南以仓库内 design-systems/notion 包为研究对象系统拆解 Notion 风格设计系统在 open-design 项目中的完整落地方式从暖中性色板、NotionInter 排版层级、低透明度多层阴影到响应式断点与无障碍状态并配套tokens.css设计令牌、components.html参考组件与面向 Agent 的提示词模板。读完本文你将掌握如何基于该设计系统包复刻 Notion 式「温暖极简」的 SaaS 界面以及如何将设计规范转换为可复用的 CSS 变量与组件类。1. 包结构与阅读顺序design-systems/notion是一个标准的 open-design 设计系统包Design System 2.0manifest.json声明了其元信息id: notion类别为Productivity SaaS生产力与 SaaS来源类型为bundledopen-design 精选的内置 fixture并非对上游品牌站的实时抓取核心文件DESIGN.md视觉意图与约束、tokens.css结构化设计令牌、design-tokens.json派生 JSON、tailwind-v4.cssTailwind 绑定、components.html参考组件辅助文件components.manifest.json组件清单、USAGE.md使用契约、preview/colors、typography、spacing 三个预览页、source/审计证据。USAGE.md 给出了明确的阅读顺序先读 USAGE 理解包契约再读 DESIGN 理解视觉意图随后将tokens.css粘贴进第一个 artifact 的style块作为 token 基础用components.manifest.json做组件盘点必要时打开components.html核对选择器与状态最后用preview/页面做视觉核对。该包强调三条纪律USAGE「Do / Avoid」保持 schema token 名称原样确保跨品牌切换cross-brand switching稳定用--accent统一承担主操作、链接、焦点态不在复制的:roottoken 块之外使用裸 hex 值不脱离tokens.css单独重定义 Tailwind 或 token 值。从 source/evidence.md 可以看到该包基于 open-design 精选的 bundled fixture 生成source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定回溯到tokens.css的声明行design-tokens.json与tailwind-v4.css属于派生产物应由报告与令牌样式表再生成而非手工编辑。2. 视觉主题与氛围温暖的「纸感」而非冷玻璃Notion 设计系统的核心哲学是页面是一块干净的画布UI 应该让开。它不是用冷灰与玻璃拟态营造科技感而是用暖中性色营造「高品质纸张」的触感。体现在三个层面纯白画布 近黑文字页面背景为纯白#ffffff但正文并非纯黑而是rgba(0,0,0,0.95)——95% 不透明度的近黑在观感上产生「微暖」阅读体验更柔和暖灰色带黄棕底色#f6f5f4暖白、#31302e暖深、#615d59暖灰 500、#a39e98暖灰 300都带有微妙的黄棕色相绝不用蓝灰色「耳语」级边框与阴影全系统边框统一为1px solid rgba(0,0,0,0.1)阴影是多层叠加且单层不透明度不超过 0.05——「深度是感觉到的而不是看见的」。tokens.css的头部注释用三句话概括了这套品牌身份暖中性色贯穿始终、NotionInter 在展示级字号上使用激进负字距64px 时 -2.125px、耳语边框 亚 0.05 不透明度多层阴影。关键特征清单继承自 DESIGN-pl.mdNotionInter改造版 Inter在展示级字号使用负字距64px 时 -2.125px暖中性色板灰色带黄棕底色#f6f5f4暖白、#31302e暖深近黑文字rgba(0,0,0,0.95)——非纯黑形成微暖全系统超细边框1px solid rgba(0,0,0,0.1)——耳语级分隔多层阴影堆叠、单层不透明度低于 0.05——若有似无的深度Notion Blue#0075de是基础 UI 中唯一的饱和强调色只用于 CTA 与交互元素药丸形pill徽章圆角 9999px配淡蓝底用于状态指示8px 基准间距单位配以非僵硬的有机缩放。3. 颜色调色板与角色3.1 基础色Notion Blackrgba(0,0,0,0.95)/#000000f2主文本、标题、基础内容。95% 不透明度柔和了纯黑却不损失可读性。Pure White#ffffff页面背景、卡片表面、蓝底按钮上的文字。Notion Blue#0075de主 CTA、链接色、交互强调——基础 UI 中唯一的饱和色。3.2 次级品牌色Deep Navy#213183次级品牌色克制地用于强调与深色功能区块。Active Blue#005bab按钮按下/激活态——Notion Blue 的更深变体。3.3 暖中性色阶Warm White#f6f5f4背景表面着色、区块交替、卡片微填充。黄色底色是关键。Warm Dark#31302e深色表面背景、深色区块文字。比标准灰更暖。Warm Gray 500#615d59次级文字、描述、弱化标签。Warm Gray 300#a39e98占位文字、禁用态、说明文字。3.4 语义强调色Teal#2a9d99成功态、正向指标。Green#1aae39确认、完成徽章。Orange#dd5b00警告态、注意指标。Pink#ff64c8装饰强调、功能亮点。Purple#391c57高级功能、深度强调。Brown#523410大地色强调、暖色功能区块。3.5 交互色Link Blue#0075de主链接色悬停加下划线。Link Light Blue#62aef0深色背景上的更亮链接变体。Focus Blue#097fe8交互元素的焦点环。Badge Blue Bg#f2f9ff药丸徽章背景淡蓝着色表面。Badge Blue Text#097fe8药丸徽章文字深蓝保证可读。3.6 阴影与深度Card Shadowrgba(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 Shadowrgba(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 Border1px solid rgba(0,0,0,0.1)标准分隔边框——卡片、分隔线、区块。3.7 令牌映射从调色板到 CSS 变量components.manifest.json 记录了 57 个已声明 token 中有 43 个被组件实际引用、0 个「未声明却引用」的不一致项。关键映射见 tokens.css语义角色Token 变量值说明背景--bg#ffffff纯白画布表面--surface#f6f5f4暖白区块交替表面别名--surface-warmvar(--surface)同层暖白前景--fgrgba(0,0,0,0.95)招牌近黑前景次级--fg-2#31302e表面上标题用暖深弱化--muted#615d59暖灰 500元信息--meta#a39e98暖灰 300边框--borderrgba(0,0,0,0.1)耳语边框强调--accent#0075deNotion Blue强调悬停--accent-hover#005babActive Blue成功/警告/危险--success/--warn/--danger#1aae39/#dd5b00/#dc2626语义色4. 排版规则4.1 字体族与 OpenType 特性主字体NotionInter后备链为Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI SymbolOpenType 特性展示级与标题文本开启lnum等宽数字与locl本地化字形。在tokens.css中体现为--font-display与--font-body两个变量共用 NotionInter 栈另设--font-mono等宽栈ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace。4.2 完整排版层级表继承自 DESIGN-pl.md角色字体字号字重行高字距备注Display HeroNotionInter64px (4.00rem)7001.00紧凑-2.125px最大压缩广告牌级标题Display SecondaryNotionInter54px (3.38rem)7001.04紧凑-1.875px次级 hero、功能标题Section HeadingNotionInter48px (3.00rem)7001.00紧凑-1.5px功能区块标题开启lnumSub-heading LargeNotionInter40px (2.50rem)7001.50normal卡片标题、功能子区块Sub-headingNotionInter26px (1.63rem)7001.23紧凑-0.625px区块副标题、内容标题Card TitleNotionInter22px (1.38rem)7001.27紧凑-0.25px功能卡片、列表标题Body LargeNotionInter20px (1.25rem)6001.40-0.125px引言、功能描述BodyNotionInter16px (1.00rem)4001.50normal标准正文Body MediumNotionInter16px (1.00rem)5001.50normal导航、强调 UI 文本Body SemiboldNotionInter16px (1.00rem)6001.50normal强标签、激活态Body BoldNotionInter16px (1.00rem)7001.50normal正文级标题Nav / ButtonNotionInter15px (0.94rem)6001.33normal导航链接、按钮文字CaptionNotionInter14px (0.88rem)5001.43normal元数据、次级标签Caption LightNotionInter14px (0.88rem)4001.43normal内容说明、描述BadgeNotionInter12px (0.75rem)6001.330.125px药丸徽章、标签、状态标签Micro LabelNotionInter12px (0.75rem)4001.330.125px小元数据、时间戳4.3 排版规则缩放即压缩展示级字距从 64px 的 -2.125px 渐进放松到 26px 的 -0.625px16px 正文回到 normal。标题获得密度正文保持可读。四档字重体系400正文/阅读、500UI/交互、600强调/导航、700标题/展示。比多数系统更宽的字重范围支撑了细腻的层级。温暖缩放行高随字号增大而收紧——16px 正文 1.50、副标题 1.23-1.27、展示级 1.00-1.04标题更紧凑更有冲击力。徽章微字距12px 徽章文字采用全系统唯一的正字距 0.125px让小号文字更开阔易读。4.4 源码实现印证在 components.html 的样式块中h1使用var(--text-4xl)64pxvar(--tracking-display)归一化为-0.033em即 -2.125px/64pxlnum,locl特性h2使用 48px、line-height: 1.00、letter-spacing: -0.031em-1.5px并单独开启lnumh3使用 26px、line-height: 1.23、letter-spacing: -0.024em-0.625px。正文.lead为 20px/600 字重/1.40 行高/--muted颜色。tokens.css将 8 档 schema 字号槽--text-xs12px 到--text-4xl64px映射为层级主轴54px 次级 hero 因位于--text-4xl与--text-3xl之间按注释说明以内联方式出现在components.html中。5. 组件样式规范5.1 按钮Primary Blue主按钮背景#0075deNotion 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 标签。components.html中.btn基类以inline-flex布局、8px 16px 内边距、--radius-sm圆角、15px/600 字重、1.33 行高并带background-color/color/transform的--motion-fast150ms过渡.btn:focus-visible仅保留--focus-ring阴影、.btn:active为scale(0.95).btn-primary悬停切换--accent-hover.btn-secondary悬停背景加深至rgba(0,0,0,0.08).btn-ghost则以underline装饰 4px 水平内边距实现链接化。5.2 卡片与容器背景#ffffff、边框1px solid rgba(0,0,0,0.1)耳语边框圆角 12px标准卡、16px强调/hero 卡阴影为四层堆叠见 3.6 Card Shadow悬停阴影温和增强图片卡顶部圆角 12px图片占满上半部。实现上.card背景var(--bg)、边框var(--border)、圆角var(--radius-lg)12px、内边距var(--space-6)24pxbox-shadow过渡使用--motion-base200ms.card:hover揭示--elev-raised四层阴影栈.card-warm背景切换为var(--surface)暖白用于区块交替。5.3 输入框与表单背景#ffffff、文字rgba(0,0,0,0.9)边框1px solid #dddddd、内边距 6px、圆角 4px焦点为蓝色轮廓环占位文字用暖灰#a39e98。实现上.field为纵向 flex 容器gap: var(--space-2)label 15px/500 字重.field input边框#dddddd、圆角--radius-sm、内边距6px 8px、::placeholder使用--meta:focus时边框切至--accent并加--focus-ring0 0 0 3px rgba(9,127,232,0.3)。5.4 导航白色背景上的纯净水平导航不吸顶品牌 logo 左对齐33x34px 图标 wordmark链接 NotionInter 15px、字重 500-600、近黑文字悬停变色为var(--color-link-primary-text-hover)右侧对齐药丸形蓝色 CTAGet Notion free移动端折叠为汉堡菜单产品下拉菜单为多级分类菜单。5.5 图像处理产品截图带1px solid rgba(0,0,0,0.1)边框图片顶部圆角12px 12px 0px 0px桌面/工作区预览截图主导功能区块hero 插画背后用暖色渐变背景装饰性手绘角色插画。5.6 特色组件带插画的功能卡片大尺寸插画头图如巨浪、产品 UI 截图12px 圆角 耳语边框标题 22px/700、描述 16px/400暖白#f6f5f4背景变体用于区块交替。信任条 / Logo 网格品牌色 Logo信任团队区横向滚动或网格布局大数字 描述的指标展示模式。指标卡大数字展示如 $4,200 ROINotionInter 40px / 700下方暖灰正文描述耳语边框卡片容器。6. 布局规则6.1 间距系统基准单位 8px刻度2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px非僵硬的有机刻度含分数值5.6px、6.4px用于微调。tokens.css将 8px 基准具象化为--space-1(4px) 至--space-12(48px) 的标准档位并额外给出区块纵向节奏 token--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px。6.2 网格与容器内容最大宽度约 1200pxHero居中单列 宽裕顶部内边距80-120px功能区块2-3 列卡片网格区块背景以暖白#f6f5f4整宽交替代码/桌面截图以耳语边框包裹。components.html中.container使用max-width: var(--container-max)1200pxmargin-inline: auto居中并按下述断点切换--container-gutter-desktop/tablet/phone24/16/12px.hero-grid为1fr 1fr双列、.features-grid为repeat(3, 1fr)三列均在 1023px 与 639px 处逐级降为 2 列与 1 列。6.3 留白哲学宽裕纵向节奏主区块间 64-120px。让内容在广阔纵向留白中呼吸。温暖交替白区块与暖白#f6f5f4区块交错形成没有生硬色断的柔和视觉节奏。内容密度优先正文块紧凑行高 1.50但被充足留白包围形成白海中可读内容的「岛屿」。6.4 圆角刻度微4px按钮、输入框、功能性交互元素微妙5px链接、列表项、菜单项标准8px小卡片、容器、内联元素舒适12px标准卡、功能容器、图片顶部大16pxhero 卡、重点内容、推广块全药丸9999px徽章、胶囊、状态指示圆形100%卡片指示点、头像。令牌层面为--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。7. 深度与抬升7.1 抬升层级表层级处理用途平面Level 0无阴影、无边框页面背景、文本块耳语Level 11px solid rgba(0,0,0,0.1)标准边框、卡片轮廓、分隔线柔和卡Level 24 层阴影栈最大不透明度 0.04内容卡、功能块深卡Level 35 层阴影栈最大不透明度 0.05、模糊 52px模态窗、重点面板、hero 元素焦点无障碍2px solid var(--focus-color)轮廓所有交互元素的键盘焦点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四层栈三个抬升 token--focus-ring以 3px 的rgba(9,127,232,0.3)外环承担焦点强化。7.3 装饰性深度hero 区块装饰性手绘角色插画俏皮风格区块交替背景在纯白与暖白#f6f5f4间过渡无生硬区块边框——区块分隔靠背景色变化与留白实现。8. 响应式行为8.1 断点表继承自 DESIGN-pl.md名称宽度关键变化Mobile Small400px紧凑单列、最小内边距Mobile400-600px标准移动端、堆叠布局Tablet Small600-768px开始出现 2 列网格Tablet768-1080px完整卡片网格、加宽内边距Desktop Small1080-1200px标准桌面布局Desktop1200-1440px完整布局、内容最大宽度Large Desktop1440px居中、宽裕边距8.2 触控目标按钮使用舒适内边距纵向 8-16px导航链接 15px 足够间距药丸徽章有 8px 水平内边距保障触控面积移动端菜单开关使用标准汉堡按钮。8.3 折叠策略Hero64px 展示字号 - 40px - 移动端 26px字距按比例保持导航水平链接 蓝色 CTA - 汉堡菜单功能卡3 列 - 2 列 - 单列堆叠产品截图响应式图片保持比例信任条 logo网格 - 移动端横向滚动页脚多列 - 单列堆叠区块间距80px - 移动端 48px。8.4 图像行为工作区截图在所有尺寸下保持耳语边框hero 插画按比例缩放产品截图使用响应式图片与一致圆角整宽暖白区块在所有尺寸下保持边缘到边缘处理。9. 可访问性与状态9.1 焦点系统所有交互元素提供可见焦点指示焦点轮廓2px solid焦点色 200 级阴影所有交互组件支持 Tab 导航高对比文字白底近黑文字对比度超过 WCAG AAA14:1。9.2 交互状态默认耳语边框的标准外观悬停文字变色、按钮scale(1.05)、链接加下划线激活/按下scale(0.9)变换 更深背景变体焦点蓝色轮廓环 阴影增强禁用暖灰文字#a39e98 降低不透明度。9.3 颜色对比度白底近黑正文rgba(0,0,0,0.95)约 18:1白底次级文字#615d59约 5.5:1WCAG AA白底蓝色 CTA#0075de约 4.6:1大文本 WCAG AA徽章蓝文字#097fe8配徽章蓝底#f2f9ff约 4.5:1大文本 WCAG AA。10. Agent 提示词指南可直接复用10.1 快速颜色参考主 CTANotion Blue#0075de背景Pure White#ffffff交替背景Warm White#f6f5f4标题文字近黑rgba(0,0,0,0.95)正文近黑rgba(0,0,0,0.95)次级文字Warm Gray 500#615d59弱化文字Warm Gray 300#a39e98边框1px solid rgba(0,0,0,0.1)链接Notion Blue#0075de焦点环Focus Blue#097fe8。10.2 示例组件提示词以下提示词模板继承自 DESIGN-pl.md可直接用于向 Agent 描述 Notion 风格界面Hero 区块「创建白色背景的 hero 区块。标题 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 Get Notion free背景 #0075de、白字、圆角 4px。」交替区块布局「设计交替区块布局白区块与暖白#f6f5f4区块交错。每区块 64-80px 纵向内边距max-width 1200px 居中。区块标题 48px 字重 700、行高 1.00、字距 -1.5px。」10.3 迭代指南始终使用暖中性色——Notion 灰色带黄棕底色#f6f5f4、#31302e、#615d59、#a39e98绝不使用蓝灰字距随字号缩放64px 时 -2.125px、54px 时 -1.875px、26px 时 -0.625px、16px 时 normal四档字重400阅读、500交互、600强调、700宣告边框是「耳语」1px solid rgba(0,0,0,0.1)——绝不更重阴影用 4-5 层、单层不透明度不超过 0.05暖白区块背景#f6f5f4对视觉节奏不可或缺药丸9999px用于状态/标签4px 圆角用于按钮与输入框Notion Blue#0075de是基础 UI 中唯一饱和色——只用于 CTA 与链接。11. 从规范到实现把 DESIGN 文档变成可运行代码这个包的价值在于「文档 - 令牌 - 组件」三层契约闭环规范层DESIGN.md及多语言版本如 DESIGN-zh.md、DESIGN-pl.md 等描述视觉意图、约束与反模式令牌层tokens.css 将规范转译为 57 个 schema 令牌面、前景、边框、强调、语义、字体、字号、行高字距、间距、圆角、抬升、焦点、动效、布局 14 类并附design-tokens.json与tailwind-v4.css两个派生绑定组件层components.html 提供 43 个选择器、22 个类、24 个元素的可运行参考实现其「每个可见值都来自 tokens.css、无裸 hex、无脱令牌字号」的约束被components.manifest.json的 token 引用审计declared/referenced/unusedDeclared/undeclaredReferenced所验证。按 USAGE.md 的约定Agent 或开发者拿到这个包后读取契约 - 粘贴tokens.css到style块 - 按components.manifest.json盘点组件 - 参照components.html精确实现 - 用preview/页面核对视觉。source/目录evidence.md、tokens.source.json、token-contract.report.json则作为打包回填的审计证据确保每个 token 都能回溯到声明行。这套「规范即代码、代码可审计」的封装方式正是 open-design 让设计系统可以被 Agent 直接消费并复刻的关键——你既可以把 Notion 的暖色极简风格完整复刻到自己的 SaaS 落地页、原型或仪表盘中也能用同样的包结构为其他品牌建立可切换的设计令牌体系。【免费下载链接】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.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 open-design 中的 Notion 设计系统：暖色极简主义的设计令牌、组件规范与 Agent 落地指南
open-design 中的 Notion 设计系统暖色极简主义的设计令牌、组件规范与 Agent 落地指南【免费下载链接】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.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本篇技术指南以仓库内 design-systems/notion 包为研究对象系统拆解 Notion 风格设计系统在 open-design 项目中的完整落地方式从暖中性色板、NotionInter 排版层级、低透明度多层阴影到响应式断点与无障碍状态并配套tokens.css设计令牌、components.html参考组件与面向 Agent 的提示词模板。读完本文你将掌握如何基于该设计系统包复刻 Notion 式「温暖极简」的 SaaS 界面以及如何将设计规范转换为可复用的 CSS 变量与组件类。1. 包结构与阅读顺序design-systems/notion是一个标准的 open-design 设计系统包Design System 2.0manifest.json声明了其元信息id: notion类别为Productivity SaaS生产力与 SaaS来源类型为bundledopen-design 精选的内置 fixture并非对上游品牌站的实时抓取核心文件DESIGN.md视觉意图与约束、tokens.css结构化设计令牌、design-tokens.json派生 JSON、tailwind-v4.cssTailwind 绑定、components.html参考组件辅助文件components.manifest.json组件清单、USAGE.md使用契约、preview/colors、typography、spacing 三个预览页、source/审计证据。USAGE.md 给出了明确的阅读顺序先读 USAGE 理解包契约再读 DESIGN 理解视觉意图随后将tokens.css粘贴进第一个 artifact 的style块作为 token 基础用components.manifest.json做组件盘点必要时打开components.html核对选择器与状态最后用preview/页面做视觉核对。该包强调三条纪律USAGE「Do / Avoid」保持 schema token 名称原样确保跨品牌切换cross-brand switching稳定用--accent统一承担主操作、链接、焦点态不在复制的:roottoken 块之外使用裸 hex 值不脱离tokens.css单独重定义 Tailwind 或 token 值。从 source/evidence.md 可以看到该包基于 open-design 精选的 bundled fixture 生成source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定回溯到tokens.css的声明行design-tokens.json与tailwind-v4.css属于派生产物应由报告与令牌样式表再生成而非手工编辑。2. 视觉主题与氛围温暖的「纸感」而非冷玻璃Notion 设计系统的核心哲学是页面是一块干净的画布UI 应该让开。它不是用冷灰与玻璃拟态营造科技感而是用暖中性色营造「高品质纸张」的触感。体现在三个层面纯白画布 近黑文字页面背景为纯白#ffffff但正文并非纯黑而是rgba(0,0,0,0.95)——95% 不透明度的近黑在观感上产生「微暖」阅读体验更柔和暖灰色带黄棕底色#f6f5f4暖白、#31302e暖深、#615d59暖灰 500、#a39e98暖灰 300都带有微妙的黄棕色相绝不用蓝灰色「耳语」级边框与阴影全系统边框统一为1px solid rgba(0,0,0,0.1)阴影是多层叠加且单层不透明度不超过 0.05——「深度是感觉到的而不是看见的」。tokens.css的头部注释用三句话概括了这套品牌身份暖中性色贯穿始终、NotionInter 在展示级字号上使用激进负字距64px 时 -2.125px、耳语边框 亚 0.05 不透明度多层阴影。关键特征清单继承自 DESIGN-pl.mdNotionInter改造版 Inter在展示级字号使用负字距64px 时 -2.125px暖中性色板灰色带黄棕底色#f6f5f4暖白、#31302e暖深近黑文字rgba(0,0,0,0.95)——非纯黑形成微暖全系统超细边框1px solid rgba(0,0,0,0.1)——耳语级分隔多层阴影堆叠、单层不透明度低于 0.05——若有似无的深度Notion Blue#0075de是基础 UI 中唯一的饱和强调色只用于 CTA 与交互元素药丸形pill徽章圆角 9999px配淡蓝底用于状态指示8px 基准间距单位配以非僵硬的有机缩放。3. 颜色调色板与角色3.1 基础色Notion Blackrgba(0,0,0,0.95)/#000000f2主文本、标题、基础内容。95% 不透明度柔和了纯黑却不损失可读性。Pure White#ffffff页面背景、卡片表面、蓝底按钮上的文字。Notion Blue#0075de主 CTA、链接色、交互强调——基础 UI 中唯一的饱和色。3.2 次级品牌色Deep Navy#213183次级品牌色克制地用于强调与深色功能区块。Active Blue#005bab按钮按下/激活态——Notion Blue 的更深变体。3.3 暖中性色阶Warm White#f6f5f4背景表面着色、区块交替、卡片微填充。黄色底色是关键。Warm Dark#31302e深色表面背景、深色区块文字。比标准灰更暖。Warm Gray 500#615d59次级文字、描述、弱化标签。Warm Gray 300#a39e98占位文字、禁用态、说明文字。3.4 语义强调色Teal#2a9d99成功态、正向指标。Green#1aae39确认、完成徽章。Orange#dd5b00警告态、注意指标。Pink#ff64c8装饰强调、功能亮点。Purple#391c57高级功能、深度强调。Brown#523410大地色强调、暖色功能区块。3.5 交互色Link Blue#0075de主链接色悬停加下划线。Link Light Blue#62aef0深色背景上的更亮链接变体。Focus Blue#097fe8交互元素的焦点环。Badge Blue Bg#f2f9ff药丸徽章背景淡蓝着色表面。Badge Blue Text#097fe8药丸徽章文字深蓝保证可读。3.6 阴影与深度Card Shadowrgba(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 Shadowrgba(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 Border1px solid rgba(0,0,0,0.1)标准分隔边框——卡片、分隔线、区块。3.7 令牌映射从调色板到 CSS 变量components.manifest.json 记录了 57 个已声明 token 中有 43 个被组件实际引用、0 个「未声明却引用」的不一致项。关键映射见 tokens.css语义角色Token 变量值说明背景--bg#ffffff纯白画布表面--surface#f6f5f4暖白区块交替表面别名--surface-warmvar(--surface)同层暖白前景--fgrgba(0,0,0,0.95)招牌近黑前景次级--fg-2#31302e表面上标题用暖深弱化--muted#615d59暖灰 500元信息--meta#a39e98暖灰 300边框--borderrgba(0,0,0,0.1)耳语边框强调--accent#0075deNotion Blue强调悬停--accent-hover#005babActive Blue成功/警告/危险--success/--warn/--danger#1aae39/#dd5b00/#dc2626语义色4. 排版规则4.1 字体族与 OpenType 特性主字体NotionInter后备链为Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI SymbolOpenType 特性展示级与标题文本开启lnum等宽数字与locl本地化字形。在tokens.css中体现为--font-display与--font-body两个变量共用 NotionInter 栈另设--font-mono等宽栈ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace。4.2 完整排版层级表继承自 DESIGN-pl.md角色字体字号字重行高字距备注Display HeroNotionInter64px (4.00rem)7001.00紧凑-2.125px最大压缩广告牌级标题Display SecondaryNotionInter54px (3.38rem)7001.04紧凑-1.875px次级 hero、功能标题Section HeadingNotionInter48px (3.00rem)7001.00紧凑-1.5px功能区块标题开启lnumSub-heading LargeNotionInter40px (2.50rem)7001.50normal卡片标题、功能子区块Sub-headingNotionInter26px (1.63rem)7001.23紧凑-0.625px区块副标题、内容标题Card TitleNotionInter22px (1.38rem)7001.27紧凑-0.25px功能卡片、列表标题Body LargeNotionInter20px (1.25rem)6001.40-0.125px引言、功能描述BodyNotionInter16px (1.00rem)4001.50normal标准正文Body MediumNotionInter16px (1.00rem)5001.50normal导航、强调 UI 文本Body SemiboldNotionInter16px (1.00rem)6001.50normal强标签、激活态Body BoldNotionInter16px (1.00rem)7001.50normal正文级标题Nav / ButtonNotionInter15px (0.94rem)6001.33normal导航链接、按钮文字CaptionNotionInter14px (0.88rem)5001.43normal元数据、次级标签Caption LightNotionInter14px (0.88rem)4001.43normal内容说明、描述BadgeNotionInter12px (0.75rem)6001.330.125px药丸徽章、标签、状态标签Micro LabelNotionInter12px (0.75rem)4001.330.125px小元数据、时间戳4.3 排版规则缩放即压缩展示级字距从 64px 的 -2.125px 渐进放松到 26px 的 -0.625px16px 正文回到 normal。标题获得密度正文保持可读。四档字重体系400正文/阅读、500UI/交互、600强调/导航、700标题/展示。比多数系统更宽的字重范围支撑了细腻的层级。温暖缩放行高随字号增大而收紧——16px 正文 1.50、副标题 1.23-1.27、展示级 1.00-1.04标题更紧凑更有冲击力。徽章微字距12px 徽章文字采用全系统唯一的正字距 0.125px让小号文字更开阔易读。4.4 源码实现印证在 components.html 的样式块中h1使用var(--text-4xl)64pxvar(--tracking-display)归一化为-0.033em即 -2.125px/64pxlnum,locl特性h2使用 48px、line-height: 1.00、letter-spacing: -0.031em-1.5px并单独开启lnumh3使用 26px、line-height: 1.23、letter-spacing: -0.024em-0.625px。正文.lead为 20px/600 字重/1.40 行高/--muted颜色。tokens.css将 8 档 schema 字号槽--text-xs12px 到--text-4xl64px映射为层级主轴54px 次级 hero 因位于--text-4xl与--text-3xl之间按注释说明以内联方式出现在components.html中。5. 组件样式规范5.1 按钮Primary Blue主按钮背景#0075deNotion 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 标签。components.html中.btn基类以inline-flex布局、8px 16px 内边距、--radius-sm圆角、15px/600 字重、1.33 行高并带background-color/color/transform的--motion-fast150ms过渡.btn:focus-visible仅保留--focus-ring阴影、.btn:active为scale(0.95).btn-primary悬停切换--accent-hover.btn-secondary悬停背景加深至rgba(0,0,0,0.08).btn-ghost则以underline装饰 4px 水平内边距实现链接化。5.2 卡片与容器背景#ffffff、边框1px solid rgba(0,0,0,0.1)耳语边框圆角 12px标准卡、16px强调/hero 卡阴影为四层堆叠见 3.6 Card Shadow悬停阴影温和增强图片卡顶部圆角 12px图片占满上半部。实现上.card背景var(--bg)、边框var(--border)、圆角var(--radius-lg)12px、内边距var(--space-6)24pxbox-shadow过渡使用--motion-base200ms.card:hover揭示--elev-raised四层阴影栈.card-warm背景切换为var(--surface)暖白用于区块交替。5.3 输入框与表单背景#ffffff、文字rgba(0,0,0,0.9)边框1px solid #dddddd、内边距 6px、圆角 4px焦点为蓝色轮廓环占位文字用暖灰#a39e98。实现上.field为纵向 flex 容器gap: var(--space-2)label 15px/500 字重.field input边框#dddddd、圆角--radius-sm、内边距6px 8px、::placeholder使用--meta:focus时边框切至--accent并加--focus-ring0 0 0 3px rgba(9,127,232,0.3)。5.4 导航白色背景上的纯净水平导航不吸顶品牌 logo 左对齐33x34px 图标 wordmark链接 NotionInter 15px、字重 500-600、近黑文字悬停变色为var(--color-link-primary-text-hover)右侧对齐药丸形蓝色 CTAGet Notion free移动端折叠为汉堡菜单产品下拉菜单为多级分类菜单。5.5 图像处理产品截图带1px solid rgba(0,0,0,0.1)边框图片顶部圆角12px 12px 0px 0px桌面/工作区预览截图主导功能区块hero 插画背后用暖色渐变背景装饰性手绘角色插画。5.6 特色组件带插画的功能卡片大尺寸插画头图如巨浪、产品 UI 截图12px 圆角 耳语边框标题 22px/700、描述 16px/400暖白#f6f5f4背景变体用于区块交替。信任条 / Logo 网格品牌色 Logo信任团队区横向滚动或网格布局大数字 描述的指标展示模式。指标卡大数字展示如 $4,200 ROINotionInter 40px / 700下方暖灰正文描述耳语边框卡片容器。6. 布局规则6.1 间距系统基准单位 8px刻度2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px非僵硬的有机刻度含分数值5.6px、6.4px用于微调。tokens.css将 8px 基准具象化为--space-1(4px) 至--space-12(48px) 的标准档位并额外给出区块纵向节奏 token--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px。6.2 网格与容器内容最大宽度约 1200pxHero居中单列 宽裕顶部内边距80-120px功能区块2-3 列卡片网格区块背景以暖白#f6f5f4整宽交替代码/桌面截图以耳语边框包裹。components.html中.container使用max-width: var(--container-max)1200pxmargin-inline: auto居中并按下述断点切换--container-gutter-desktop/tablet/phone24/16/12px.hero-grid为1fr 1fr双列、.features-grid为repeat(3, 1fr)三列均在 1023px 与 639px 处逐级降为 2 列与 1 列。6.3 留白哲学宽裕纵向节奏主区块间 64-120px。让内容在广阔纵向留白中呼吸。温暖交替白区块与暖白#f6f5f4区块交错形成没有生硬色断的柔和视觉节奏。内容密度优先正文块紧凑行高 1.50但被充足留白包围形成白海中可读内容的「岛屿」。6.4 圆角刻度微4px按钮、输入框、功能性交互元素微妙5px链接、列表项、菜单项标准8px小卡片、容器、内联元素舒适12px标准卡、功能容器、图片顶部大16pxhero 卡、重点内容、推广块全药丸9999px徽章、胶囊、状态指示圆形100%卡片指示点、头像。令牌层面为--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。7. 深度与抬升7.1 抬升层级表层级处理用途平面Level 0无阴影、无边框页面背景、文本块耳语Level 11px solid rgba(0,0,0,0.1)标准边框、卡片轮廓、分隔线柔和卡Level 24 层阴影栈最大不透明度 0.04内容卡、功能块深卡Level 35 层阴影栈最大不透明度 0.05、模糊 52px模态窗、重点面板、hero 元素焦点无障碍2px solid var(--focus-color)轮廓所有交互元素的键盘焦点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四层栈三个抬升 token--focus-ring以 3px 的rgba(9,127,232,0.3)外环承担焦点强化。7.3 装饰性深度hero 区块装饰性手绘角色插画俏皮风格区块交替背景在纯白与暖白#f6f5f4间过渡无生硬区块边框——区块分隔靠背景色变化与留白实现。8. 响应式行为8.1 断点表继承自 DESIGN-pl.md名称宽度关键变化Mobile Small400px紧凑单列、最小内边距Mobile400-600px标准移动端、堆叠布局Tablet Small600-768px开始出现 2 列网格Tablet768-1080px完整卡片网格、加宽内边距Desktop Small1080-1200px标准桌面布局Desktop1200-1440px完整布局、内容最大宽度Large Desktop1440px居中、宽裕边距8.2 触控目标按钮使用舒适内边距纵向 8-16px导航链接 15px 足够间距药丸徽章有 8px 水平内边距保障触控面积移动端菜单开关使用标准汉堡按钮。8.3 折叠策略Hero64px 展示字号 - 40px - 移动端 26px字距按比例保持导航水平链接 蓝色 CTA - 汉堡菜单功能卡3 列 - 2 列 - 单列堆叠产品截图响应式图片保持比例信任条 logo网格 - 移动端横向滚动页脚多列 - 单列堆叠区块间距80px - 移动端 48px。8.4 图像行为工作区截图在所有尺寸下保持耳语边框hero 插画按比例缩放产品截图使用响应式图片与一致圆角整宽暖白区块在所有尺寸下保持边缘到边缘处理。9. 可访问性与状态9.1 焦点系统所有交互元素提供可见焦点指示焦点轮廓2px solid焦点色 200 级阴影所有交互组件支持 Tab 导航高对比文字白底近黑文字对比度超过 WCAG AAA14:1。9.2 交互状态默认耳语边框的标准外观悬停文字变色、按钮scale(1.05)、链接加下划线激活/按下scale(0.9)变换 更深背景变体焦点蓝色轮廓环 阴影增强禁用暖灰文字#a39e98 降低不透明度。9.3 颜色对比度白底近黑正文rgba(0,0,0,0.95)约 18:1白底次级文字#615d59约 5.5:1WCAG AA白底蓝色 CTA#0075de约 4.6:1大文本 WCAG AA徽章蓝文字#097fe8配徽章蓝底#f2f9ff约 4.5:1大文本 WCAG AA。10. Agent 提示词指南可直接复用10.1 快速颜色参考主 CTANotion Blue#0075de背景Pure White#ffffff交替背景Warm White#f6f5f4标题文字近黑rgba(0,0,0,0.95)正文近黑rgba(0,0,0,0.95)次级文字Warm Gray 500#615d59弱化文字Warm Gray 300#a39e98边框1px solid rgba(0,0,0,0.1)链接Notion Blue#0075de焦点环Focus Blue#097fe8。10.2 示例组件提示词以下提示词模板继承自 DESIGN-pl.md可直接用于向 Agent 描述 Notion 风格界面Hero 区块「创建白色背景的 hero 区块。标题 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 Get Notion free背景 #0075de、白字、圆角 4px。」交替区块布局「设计交替区块布局白区块与暖白#f6f5f4区块交错。每区块 64-80px 纵向内边距max-width 1200px 居中。区块标题 48px 字重 700、行高 1.00、字距 -1.5px。」10.3 迭代指南始终使用暖中性色——Notion 灰色带黄棕底色#f6f5f4、#31302e、#615d59、#a39e98绝不使用蓝灰字距随字号缩放64px 时 -2.125px、54px 时 -1.875px、26px 时 -0.625px、16px 时 normal四档字重400阅读、500交互、600强调、700宣告边框是「耳语」1px solid rgba(0,0,0,0.1)——绝不更重阴影用 4-5 层、单层不透明度不超过 0.05暖白区块背景#f6f5f4对视觉节奏不可或缺药丸9999px用于状态/标签4px 圆角用于按钮与输入框Notion Blue#0075de是基础 UI 中唯一饱和色——只用于 CTA 与链接。11. 从规范到实现把 DESIGN 文档变成可运行代码这个包的价值在于「文档 - 令牌 - 组件」三层契约闭环规范层DESIGN.md及多语言版本如 DESIGN-zh.md、DESIGN-pl.md 等描述视觉意图、约束与反模式令牌层tokens.css 将规范转译为 57 个 schema 令牌面、前景、边框、强调、语义、字体、字号、行高字距、间距、圆角、抬升、焦点、动效、布局 14 类并附design-tokens.json与tailwind-v4.css两个派生绑定组件层components.html 提供 43 个选择器、22 个类、24 个元素的可运行参考实现其「每个可见值都来自 tokens.css、无裸 hex、无脱令牌字号」的约束被components.manifest.json的 token 引用审计declared/referenced/unusedDeclared/undeclaredReferenced所验证。按 USAGE.md 的约定Agent 或开发者拿到这个包后读取契约 - 粘贴tokens.css到style块 - 按components.manifest.json盘点组件 - 参照components.html精确实现 - 用preview/页面核对视觉。source/目录evidence.md、tokens.source.json、token-contract.report.json则作为打包回填的审计证据确保每个 token 都能回溯到声明行。这套「规范即代码、代码可审计」的封装方式正是 open-design 让设计系统可以被 Agent 直接消费并复刻的关键——你既可以把 Notion 的暖色极简风格完整复刻到自己的 SaaS 落地页、原型或仪表盘中也能用同样的包结构为其他品牌建立可切换的设计令牌体系。【免费下载链接】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.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考