Notion

version: alpha name: Notion-design-analysis description: Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces.

colors: primary: "#5645d4" primary-pressed: "#4534b3" primary-deep: "#3a2a99" on-primary: "#ffffff" brand-navy: "#0a1530" brand-navy-deep: "#070f24" brand-navy-mid: "#1a2a52" link-blue: "#0075de" link-blue-pressed: "#005bab" brand-orange: "#dd5b00" brand-orange-deep: "#793400" brand-pink: "#ff64c8" brand-pink-deep: "#a02e6d" brand-purple: "#7b3ff2" brand-purple-300: "#d6b6f6" brand-purple-800: "#391c57" brand-teal: "#2a9d99" brand-green: "#1aae39" brand-yellow: "#f5d75e" brand-brown: "#523410" card-tint-peach: "#ffe8d4" card-tint-rose: "#fde0ec" card-tint-mint: "#d9f3e1" card-tint-lavender: "#e6e0f5" card-tint-sky: "#dcecfa" card-tint-yellow: "#fef7d6" card-tint-yellow-bold: "#f9e79f" card-tint-cream: "#f8f5e8" card-tint-gray: "#f0eeec" canvas: "#ffffff" surface: "#f6f5f4" surface-soft: "#fafaf9" hairline: "#e5e3df" hairline-soft: "#ede9e4" hairline-strong: "#c8c4be" ink-deep: "#000000" ink: "#1a1a1a" charcoal: "#37352f" slate: "#5d5b54" steel: "#787671" stone: "#a4a097" muted: "#bbb8b1" on-dark: "#ffffff" on-dark-muted: "#a4a097" semantic-success: "#1aae39" semantic-warning: "#dd5b00" semantic-error: "#e03131"

typography: hero-display: fontFamily: Notion Sans fontSize: 80px fontWeight: 600 lineHeight: 1.05 letterSpacing: -2px display-lg: fontFamily: Notion Sans fontSize: 56px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1px heading-1: fontFamily: Notion Sans fontSize: 48px fontWeight: 600 lineHeight: 1.15 letterSpacing: -0.5px heading-2: fontFamily: Notion Sans fontSize: 36px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.5px heading-3: fontFamily: Notion Sans fontSize: 28px fontWeight: 600 lineHeight: 1.25 heading-4: fontFamily: Notion Sans fontSize: 22px fontWeight: 600 lineHeight: 1.30 heading-5: fontFamily: Notion Sans fontSize: 18px fontWeight: 600 lineHeight: 1.40 subtitle: fontFamily: Notion Sans fontSize: 18px fontWeight: 400 lineHeight: 1.50 body-md: fontFamily: Notion Sans fontSize: 16px fontWeight: 400 lineHeight: 1.55 body-md-medium: fontFamily: Notion Sans fontSize: 16px fontWeight: 500 lineHeight: 1.55 body-sm: fontFamily: Notion Sans fontSize: 14px fontWeight: 400 lineHeight: 1.50 body-sm-medium: fontFamily: Notion Sans fontSize: 14px fontWeight: 500 lineHeight: 1.50 caption: fontFamily: Notion Sans fontSize: 13px fontWeight: 400 lineHeight: 1.40 caption-bold: fontFamily: Notion Sans fontSize: 13px fontWeight: 600 lineHeight: 1.40 micro: fontFamily: Notion Sans fontSize: 12px fontWeight: 500 lineHeight: 1.40 micro-uppercase: fontFamily: Notion Sans fontSize: 11px fontWeight: 600 lineHeight: 1.40 letterSpacing: 1px button-md: fontFamily: Notion Sans fontSize: 14px fontWeight: 500 lineHeight: 1.30

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 20px xxxl: 24px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 20px xl: 24px xxl: 32px xxxl: 40px section-sm: 48px section: 64px section-lg: 96px hero: 120px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 18px" button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" button-primary-disabled: backgroundColor: "{colors.hairline}" textColor: "{colors.muted}" button-dark: backgroundColor: "{colors.ink-deep}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 18px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 18px" border: "1px solid {colors.hairline-strong}" button-on-dark: backgroundColor: "{colors.on-dark}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 18px" button-secondary-on-dark: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 18px" border: "1px solid {colors.on-dark-muted}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "8px 12px" button-link: backgroundColor: "transparent" textColor: "{colors.link-blue}" typography: "{typography.body-sm-medium}" padding: "0" card-base: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" card-feature: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" card-feature-yellow-bold: backgroundColor: "{colors.card-tint-yellow-bold}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-peach: backgroundColor: "{colors.card-tint-peach}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-rose: backgroundColor: "{colors.card-tint-rose}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-mint: backgroundColor: "{colors.card-tint-mint}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-sky: backgroundColor: "{colors.card-tint-sky}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-lavender: backgroundColor: "{colors.card-tint-lavender}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-yellow: backgroundColor: "{colors.card-tint-yellow}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-feature-cream: backgroundColor: "{colors.card-tint-cream}" textColor: "{colors.charcoal}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-agent-tile: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" card-template: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.lg}" border: "1px solid {colors.hairline}" card-startup-perk: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" pricing-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" pricing-card-featured: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "2px solid {colors.primary}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" border: "1px solid {colors.hairline-strong}" height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "2px solid {colors.primary}" search-pill: backgroundColor: "{colors.surface}" textColor: "{colors.steel}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" height: 44px border: "1px solid {colors.hairline}" pill-tab: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.md}" border: "1px solid {colors.hairline}" pill-tab-active: backgroundColor: "{colors.ink-deep}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" border: "1px solid {colors.ink-deep}" segmented-tab: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" border: "0 0 2px transparent solid" segmented-tab-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" border: "0 0 2px {colors.ink} solid" badge-purple: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-pink: backgroundColor: "{colors.brand-pink}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-orange: backgroundColor: "{colors.brand-orange}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-tag-purple: backgroundColor: "{colors.card-tint-lavender}" textColor: "{colors.brand-purple-800}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: "2px 8px" badge-tag-orange: backgroundColor: "{colors.card-tint-peach}" textColor: "{colors.brand-orange-deep}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: "2px 8px" badge-tag-green: backgroundColor: "{colors.card-tint-mint}" textColor: "{colors.brand-green}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: "2px 8px" badge-popular: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" promo-banner: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" hero-band-dark: backgroundColor: "{colors.brand-navy}" textColor: "{colors.on-dark}" rounded: "0" padding: "{spacing.hero}" workspace-mockup-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "0" border: "1px solid {colors.hairline}" shadow: "rgba(15, 15, 15, 0.2) 0px 24px 48px -8px" cta-banner-light: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "{spacing.section}" comparison-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" border: "1px solid {colors.hairline}" comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" padding: "{spacing.md} {spacing.lg}" border: "0 0 1px {colors.hairline-soft} solid" testimonial-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" logo-wall-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-md-medium}" padding: "{spacing.lg}" faq-accordion-item: backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.xl}" border: "0 0 1px {colors.hairline} solid" stat-row: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "{spacing.section-sm}" footer-region: backgroundColor: "{colors.canvas}" textColor: "{colors.charcoal}" typography: "{typography.body-sm}" padding: "{spacing.section} {spacing.xxl}" border: "1px solid {colors.hairline}" footer-link: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm}" padding: "{spacing.xxs} 0"

概述

Notion 以自信、插画丰富的品牌声音，将自己呈现为一站式工作空间。主页以居中的 "Meet the night shift." 开篇，置于深邃的藏青色首屏带（{colors.brand-navy}）之上，并散布着品牌色的便利贴圆点与网状线条插画。标志性的紫色药丸主 CTA（{colors.primary}）"Get Notion free" 居于视觉中心，旁边是带描边的次级 "Request a demo"。按钮下方，一张真实的 Notion 工作区 UI 模型卡片（即 "Ramp HQ" 看板）以深邃的弥散投影从首屏带中跃出。

首屏下方，页面循环展示一系列与众不同的功能区块序列：一块密集的便利贴 "Keep work moving 24/7" 面板，配备红/蓝/绿/紫/青的状态图标；一块大胆的黄色（{colors.card-tint-yellow-bold}）"Ask your on-demand assistants" 横幅卡片，两侧是橙色/玫瑰/薄荷色淡彩功能卡片，展示助手 UI 模型；以及一个 "Bring all your work together" 三列网格，承载品牌色模型（天蓝色教程卡片、浅色 Notion 日历、棕褐色客户证言石板）。Pricing 页面水平展示 4 个层级（Free / Plus / Business / Enterprise），其中一层（紫色边框）为精选层，下方紧跟一张密集的功能对比表。

整套系统在每个 UI 表面都使用 Notion-Sans 字体（基于 Inter）——一种人文几何风字体，与多彩插画自然呼应。按钮为 {rounded.md}（8px）矩形，不是药丸形——这让 Notion 沉稳的几何风格区别于普遍使用药丸形的竞品。卡片统一使用 {rounded.lg}（12px）。

核心特征：

• 深邃的藏青首屏带（{colors.brand-navy}），点缀着散落的便利贴圆点 + 网状线条装饰插画
• 标志性的紫色药丸（{colors.primary}）主 CTA——Notion 招牌的 "Get Notion free" 按钮颜色
• 真实 Notion 工作区 UI 模型卡片嵌入首屏，自带深邃投影
• 大胆的黄色功能横幅（{colors.card-tint-yellow-bold}），用于高强调度的内容区块
• 淡彩功能卡片调色板（桃色、玫瑰、薄荷、薰衣草、天蓝、黄色），呼应真实产品的数据库属性
• Notion-Sans（基于 Inter）贯穿每一个 UI 表面
• 8px 圆角按钮（不是药丸），12px 圆角卡片——沉稳编辑型几何
• 4 层定价对比，配以密集的功能对比表
• 居中首屏布局（不同于多数 B2B SaaS 的左对齐常规）

配色

来源页面：notion.com/（主页）、/enterprise、/product/ai、/product/agents、/startups、/pricing。六个页面的 token 覆盖完全一致。

品牌与主色

• Notion 紫（{colors.primary}）：标志性的主 CTA 颜色——令人一眼可辨的 "Get Notion free" 药丸按钮。仅保留给主 CTA。
• 紫色按下态（{colors.primary-pressed}）：按下态变体
• 紫色深色（{colors.primary-deep}）：更深的强调变体
• 品牌藏青（{colors.brand-navy}）：首屏带背景——深邃藏青色
• 品牌藏青深（{colors.brand-navy-deep}）：促销横幅的更深藏青
• 品牌藏青中（{colors.brand-navy-mid}）：中间调的藏青
• 链接蓝（{colors.link-blue}）：行内文字链接蓝色（不是主 CTA）
• 链接蓝按下态（{colors.link-blue-pressed}）：按下态的链接蓝

品牌色谱（呼应真实产品的数据库属性）

• 品牌粉（{colors.brand-pink}）：粉色点缀
• 品牌粉深（{colors.brand-pink-deep}）：更深的粉
• 品牌橙（{colors.brand-orange}）：橙色点缀
• 品牌橙深（{colors.brand-orange-deep}）：更深的橙赭色
• 品牌紫（{colors.brand-purple}）：紫色点缀变体
• 品牌紫 300（{colors.brand-purple-300}）：浅紫
• 品牌紫 800（{colors.brand-purple-800}）：用于标签文字的深紫
• 品牌青（{colors.brand-teal}）：青色点缀
• 品牌绿（{colors.brand-green}）：亮绿
• 品牌黄（{colors.brand-yellow}）：柔黄
• 品牌棕（{colors.brand-brown}）：用于"大地色"色调的品牌棕

卡片淡彩（淡彩功能卡片背景）

• 淡彩桃（{colors.card-tint-peach}）：浅桃色
• 淡彩玫瑰（{colors.card-tint-rose}）：浅玫瑰粉
• 淡彩薄荷（{colors.card-tint-mint}）：浅薄荷绿
• 淡彩薰衣草（{colors.card-tint-lavender}）：浅薰衣草
• 淡彩天蓝（{colors.card-tint-sky}）：浅天蓝
• 淡彩黄（{colors.card-tint-yellow}）：浅黄
• 淡彩黄加粗（{colors.card-tint-yellow-bold}）：高强调度功能横幅的大胆黄（"Ask your on-demand assistants"）
• 淡彩米（{colors.card-tint-cream}）：米色调
• 淡彩灰（{colors.card-tint-gray}）：中性表面

表面

• 画布白（{colors.canvas}）：页面背景与主卡片表面
• 表面（{colors.surface}）：用于柔和区块背景、搜索药丸静态态、精选定价层
• 表面柔（{colors.surface-soft}）：更安静的区块划分
• 细线（{colors.hairline}）：1px 边框与主分隔线
• 细线柔（{colors.hairline-soft}）：更安静的分隔线
• 细线强（{colors.hairline-strong}）：输入框的更强 1px 边框

文字

• Ink 深（{colors.ink-deep}）：纯黑，用于强调
• Ink（{colors.ink}）：主标题与正文字色
• Charcoal（{colors.charcoal}）：正文强调（Notion 招牌的暖灰黑）
• Slate（{colors.slate}）：次级文字
• Steel（{colors.steel}）：三级文字、页脚链接
• Stone（{colors.stone}）：柔和标签
• Muted（{colors.muted}）：禁用、占位符
• On Dark（{colors.on-dark}）：深色表面上的白色文字
• On Dark Muted（{colors.on-dark-muted}）：降低不透明度的白色

语义

• Success（{colors.semantic-success}）：确认绿色
• Warning（{colors.semantic-warning}）：中级警示（橙色）
• Error（{colors.semantic-error}）：校验错误（红色）

字体排版

字体家族

Notion Sans（主字体）：Notion 定制的基于 Inter 的可变字体。回退：Inter、-apple-system、system-ui、'Segoe UI'、Helvetica、sans-serif。一种人文几何风字体，贯穿每一个 UI 表面。

层级

设计原则

• 首屏标题行高紧凑（1.05），80px 展示
• 展示字号采用负字距（-2px 至 -0.5px）
• 正文行高宽松（1.55），便于文档可读
• 标题 600 字重 + 按钮 500 字重；正文 400

布局

间距系统

• 基础单位：4px（主增量 8px）
• Token：{spacing.xxs}（4px）至 {spacing.hero}（120px）
• 区块节奏：营销页面使用 {spacing.section-lg}（96px）；Pricing 页面收紧至 {spacing.section}（64px）

网格与容器

• 1280px 最大宽度，32px 列间距
• Pricing：桌面 4 层卡片行 + 紧凑对比表
• 主页：居中首屏，按钮下方为工作区模型；交替多彩功能卡片区块

留白哲学

营销表面在功能卡片带之间留出宽松的呼吸空间。首屏上的工作区模型卡片以全宽呈现，配深邃投影。

层次与深度

装饰性深度

• 首屏工作区模型卡片采用深邃的弥散投影（第 3 层）——在藏青带之上形成显著的高度
• 淡彩功能卡片通过淡彩背景自带视觉份量
• 便利贴圆点插画与网状线条为藏青首屏增添氛围装饰

形状

圆角尺度

Notion 的几何是"沉稳编辑型"——{rounded.md}（8px）的按钮让它与"万物皆药丸"的品牌区别开来。

组件

根据"无 hover"策略，hover 状态未记录。

按钮

button-primary —— 标志性的紫色矩形主 CTA，最重要的操作。

• 背景 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button-md}，内边距 10px 18px，圆角 {rounded.md}。
• 按下态 button-primary-pressed 加深为 {colors.primary-pressed}。
• 禁用态使用 {colors.hairline} 背景。

button-dark —— 浅色背景上的黑色矩形 CTA。

• 背景 {colors.ink-deep}，文字 {colors.on-dark}，字体 {typography.button-md}，内边距 10px 18px，圆角 {rounded.md}。

button-secondary —— 次级操作的描边矩形（"Request a demo"）。

• 背景透明，文字 {colors.ink}，边框 1px solid {colors.hairline-strong}，字体 {typography.button-md}，内边距 10px 18px，圆角 {rounded.md}。

button-on-dark —— 深色首屏带上的白色按钮。

• 背景 {colors.on-dark}，文字 {colors.ink}，字体 {typography.button-md}，内边距 10px 18px，圆角 {rounded.md}。

button-secondary-on-dark —— 深色上的描边按钮。

• 背景透明，文字 {colors.on-dark}，边框 1px solid {colors.on-dark-muted}，字体 {typography.button-md}，内边距 10px 18px，圆角 {rounded.md}。

button-ghost —— 更安静的空灵按钮。

• 背景透明，文字 {colors.ink}，字体 {typography.button-md}，内边距 8px 12px，圆角 {rounded.sm}。

button-link —— 行内蓝色文字链接（不是主紫）。

• 背景透明，文字 {colors.link-blue}，字体 {typography.body-sm-medium}，内边距 0。

卡片与容器

card-base —— 标准内容卡片。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.xl}，边框 1px solid {colors.hairline}。

card-feature —— 较大内边距的功能卡片。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.xxl}，边框 1px solid {colors.hairline}。

card-feature-yellow-bold —— 高强调度内容的大胆黄功能横幅（"Ask your on-demand assistants"）。

• 背景 {colors.card-tint-yellow-bold}，文字 {colors.charcoal}，圆角 {rounded.lg}，内边距 {spacing.xxl}。

card-feature-peach + card-feature-rose + card-feature-mint + card-feature-sky + card-feature-lavender + card-feature-yellow + card-feature-cream —— 淡彩功能卡片。

• 每个变体使用对应的 card-tint-* 颜色作为背景，文字 {colors.charcoal}，圆角 {rounded.lg}，内边距 {spacing.xxl}。

card-agent-tile —— 助手卡片。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.xl}，边框 1px solid {colors.hairline}。

card-template —— 模板缩略图卡片。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.lg}，边框 1px solid {colors.hairline}。

card-startup-perk —— 创业计划权益网格项。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.xl}，边框 1px solid {colors.hairline}。

pricing-card —— 标准定价层卡片。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.xxl}，边框 1px solid {colors.hairline}。

pricing-card-featured —— 精选定价层（Plus 或 Business——紫色边框）。

• 背景 {colors.surface}，圆角 {rounded.lg}，内边距 {spacing.xxl}，边框 2px solid {colors.primary}。

输入与表单

text-input —— 标准文本字段。

• 背景 {colors.canvas}，文字 {colors.ink}，边框 1px solid {colors.hairline-strong}，圆角 {rounded.md}，内边距 {spacing.sm} {spacing.md}，高度 44px。

text-input-focused —— 激活态。

• 边框切换为 2px solid {colors.primary}（紫色）。

search-pill —— 搜索栏。

• 背景 {colors.surface}，文字 {colors.steel}，字体 {typography.body-md}，圆角 {rounded.md}，高度 44px，边框 1px solid {colors.hairline}。

标签

pill-tab + pill-tab-active —— 顶层切换的药丸形标签导航。

• 未激活：文字 {colors.steel}，边框 1px solid {colors.hairline}，内边距 {spacing.xs} {spacing.md}，圆角 {rounded.full}。
• 激活：背景 {colors.ink-deep}，文字 {colors.on-dark}。

segmented-tab + segmented-tab-active —— 下划线式标签导航。

• 未激活：文字 {colors.steel}，无边框。激活：文字 {colors.ink}，底部 2px 边框，颜色 {colors.ink}。

徽标与状态

badge-purple —— 紫色状态徽标（与主 CTA 配色一致）。

• 背景 {colors.primary}，文字 {colors.on-primary}，字体 {typography.caption-bold}，圆角 {rounded.full}，内边距 4px 10px。

badge-pink —— 粉色点缀徽标。

• 背景 {colors.brand-pink}，文字 {colors.on-primary}，字体 {typography.caption-bold}，圆角 {rounded.full}，内边距 4px 10px。

badge-orange —— 橙色点缀徽标。

• 背景 {colors.brand-orange}，文字 {colors.on-primary}，字体 {typography.caption-bold}，圆角 {rounded.full}，内边距 4px 10px。

badge-tag-purple —— 柔和紫色功能标签芯片。

• 背景 {colors.card-tint-lavender}，文字 {colors.brand-purple-800}，字体 {typography.caption-bold}，圆角 {rounded.sm}，内边距 2px 8px。

badge-tag-orange —— 柔和橙色功能标签。

• 背景 {colors.card-tint-peach}，文字 {colors.brand-orange-deep}，字体 {typography.caption-bold}，圆角 {rounded.sm}，内边距 2px 8px。

badge-tag-green —— 柔和薄荷色功能标签。

• 背景 {colors.card-tint-mint}，文字 {colors.brand-green}，字体 {typography.caption-bold}，圆角 {rounded.sm}，内边距 2px 8px。

badge-popular —— "Most Popular" 层级指示。

• 背景 {colors.primary}，文字 {colors.on-primary}，字体 {typography.caption-bold}，圆角 {rounded.full}，内边距 4px 10px。

promo-banner —— 顶部导航上方的浅色促销条带。

• 背景 {colors.surface}，文字 {colors.ink}，字体 {typography.body-sm-medium}，内边距 {spacing.sm} {spacing.md}。（"Developers: Get a first look at our new Developer Platform on May 13."）

表格

comparison-table —— 定价功能对比表。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}，圆角 {rounded.md}，边框 1px solid {colors.hairline}。

comparison-row —— 单个功能行。

• 背景 {colors.canvas}，文字 {colors.ink}，内边距 {spacing.md} {spacing.lg}，底部边框 1px solid {colors.hairline-soft}。

文档类组件

workspace-mockup-card —— 嵌入首屏带的 Notion 工作区 UI 模型（"Ramp HQ" 看板）。

• 背景 {colors.canvas}，圆角 {rounded.lg}，边框 1px solid {colors.hairline}，深邃投影 rgba(15, 15, 15, 0.20) 0px 24px 48px -8px。承载真实的 Notion 产品 UI 模型。

testimonial-card —— 客户证言卡片。

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.xxl}，边框 1px solid {colors.hairline}。

logo-wall-item —— 客户 logo 字样单元格。

• 背景透明，文字 {colors.steel}，字体 {typography.body-md-medium}，内边距 {spacing.lg}。

faq-accordion-item —— FAQ 面板。

• 背景 {colors.canvas}，圆角 {rounded.md}，内边距 {spacing.xl}，底部边框 1px solid {colors.hairline}。

stat-row —— 含柱状图可视化的统计条（"More productivity. Fewer tools."）。

• 背景 {colors.surface}，文字 {colors.ink}，圆角 {rounded.lg}，内边距 {spacing.section-sm}。

cta-banner-light —— 浅色 CTA 横幅。

• 背景 {colors.surface}，文字 {colors.ink}，圆角 {rounded.lg}，内边距 {spacing.section}。

导航

顶部导航（营销页） —— 吸顶白色条。

• 背景 {colors.canvas}，高度约 64px，底部边框 1px solid {colors.hairline}。
• 左侧：Notion "N" 标志 + "Product / AI / Solutions / Resources / Enterprise / Pricing / Request a demo" 链接。
• 右侧：紫色 "Get Notion free" 按钮 + "Log in" 链接。

标志性组件

hero-band-dark —— 深邃的藏青首屏带，内嵌工作区模型与装饰圆点/网线。

• 背景 {colors.brand-navy}，文字 {colors.on-dark}，内边距 {spacing.hero}。
• 布局：居中标题 {typography.hero-display}、副标题、按钮行（紫色 button-primary + 描边 button-secondary-on-dark）、下方为 workspace-mockup-card。
• 氛围装饰：首屏内容周围散布彩色便利贴圆点与网状线条插画（不是字面意义上的图案填充——按页面通过 SVG/插画处理）。

footer-region —— 多列浅色页脚。

• 背景 {colors.canvas}，内边距 {spacing.section} {spacing.xxl}，顶部边框 1px solid {colors.hairline}。
• 6 列链接网格（Product / Download / Resources / Notion for / Company / Legal）。

footer-link —— 单个页脚链接。

• 背景透明，文字 {colors.steel}，字体 {typography.body-sm}，内边距 {spacing.xxs} 0。

推荐与避免

推荐

• 在所有表面使用 {colors.primary}（紫色）作为主 CTA——这是品牌可识别的信号
• 将深邃藏青首屏带（{colors.brand-navy}）与紫色按钮 + 装饰便利贴圆点配对
• 慷慨地使用淡彩功能卡片淡彩（桃色、玫瑰、薄荷、薰衣草、天蓝、黄色）
• 在高强调度的 "Ask the assistant" 风格横幅卡片中使用 {colors.card-tint-yellow-bold}
• 在按钮上一致地应用 {rounded.md}（8px）——Notion 使用矩形，不是药丸
• 在所有卡片族上应用 {rounded.lg}（12px）
• 在每一个 UI 表面维持 Notion-Sans
• 在首屏带上使用工作区模型卡片展示真实产品 UI

避免

• 不要将紫色用于正文或大面积背景
• 不要使用药丸形按钮；Notion 的几何是矩形沉稳型
• 不要混用链接蓝（{colors.link-blue}）和主紫（{colors.primary}）——它们扮演不同角色
• 不要在平面文档卡片上施加过重的阴影
• 不要用普通的 Inter 替代 Notion-Sans

响应式行为

断点

触控目标

• 按钮渲染有效高度 40–44px
• 表单输入框渲染高度 44px
• 药丸标签 32px → 44px（移动端）

折叠策略

• 促销横幅保持全宽；在 < 480px 时截断
• 顶部导航在 1024px 以下折叠为汉堡菜单
• 首屏带：工作区模型卡片在移动端移至文字/按钮下方
• 定价层：4 列 → 2 列（平板）→ 1 列（移动）
• 功能卡片：3 列（桌面）→ 2 列（平板）→ 1 列（移动）
• 首屏字体：80px → 56px → 48px → 36px
• 页脚：6 列（桌面）→ 3 列（平板）→ 手风琴（移动）

图像行为

• 工作区模型卡片保持宽高比
• 功能卡片内的淡彩插画按比例缩放
• 客户 logo 墙：字样高度 60–80px 一致

迭代指南

1. 一次只聚焦一个组件
2. 直接引用组件名称与 token
3. 编辑后运行 npx @google/design.md lint DESIGN.md
4. 将新变体作为独立的 components: 条目添加
5. 默认正文使用 {typography.body-md}
6. 保持 {colors.primary}（紫色）作为主 CTA——与行内链接的 {colors.link-blue} 区分开
7. 按钮使用 {rounded.md}（矩形），卡片使用 {rounded.lg}，仅药丸标签/徽标使用 {rounded.full}

已知缺口

• 具体的暗色模式 token 值除首屏带外未被提取
• 动画/过渡时长未被提取；建议 150–200ms ease
• 表单校验成功状态未被显式捕获
• 淡彩映射（哪个功能使用哪个淡彩）基于观察——实际品牌库可能有更多条目