Notion
正午阳光下，一本温暖的纸质笔记本映入眼帘
Notion 的界面宛如一本在阳光下熠熠生辉的纸质笔记本：温暖柔和的画布（#f6f5f4）触感细腻而非冷冰冰，宽大的无衬线字体赋予产品文案以编辑般的厚重感，色彩则被巧妙地用作点缀——桃色的“药丸”状元素突出动词，单一的蓝色点缀着主要操作，而一系列轮换的强调色（珊瑚色、琥珀色、天蓝色、午夜蓝）则如同贴纸般点缀着卡片背景。卡片排列在带有纤细边框和边角的画布上——没有阴影，也没有镀铬效果——如同 Moleskine 笔记本的横格部分。动画效果活泼灵动，200 毫秒的平滑过渡和富有弹性的角色动画为界面注入了活力，却又不显得华而不实。
页面居中，最大宽度限制在约 1440 像素。主要元素是一个居中的堆叠结构：一行符号 → 一个带有嵌入式彩色药丸的大型双行标题 → 一个副标题 → 一行包含两个行动号召按钮 → 一个大型产品 UI 模型。在主要元素下方，各个部分交替使用白色卡片网格和全彩装饰面板。Logo 墙是一个居中的单行网格，由灰度合作伙伴 Logo 组成。功能模块采用双列布局（左侧为文本，右侧为彩色面板），各部分从左到右交替排列。“随时咨询您的助手”部分使用 2x2 卡片网格，其中顶部卡片占据整个宽度，底部一行被分成两个等宽的列。各部分之间的间距较大（约 80 像素），营造出一种平和的垂直节奏感。导航栏是一个固定高度为 64 像素的顶部栏，导航元素居中，操作按钮右对齐。
插图至关重要，不使用任何照片。视觉语言由扁平化的插画符号（2像素的彩色圆角圆圈）、抽象的装饰元素（手绘曲线、闪光、箭头、花朵形状）以及产品用户界面模型构成。这些符号在主窗口中以七个头像的水平排列形式出现，并散布在页面各处，如同趣味十足的标点符号。产品截图是唯一“真实”的视觉元素：它们展示了Notion的实际界面（看板、文档视图、AI代理面板），包含所有元素和真实数据。主窗口中的产品模型尺寸较大，居中显示，并投射出单一的阴影将其与画布分隔开来。没有生活方式照片、没有素材图片、也没有抽象的3D渲染图。
调色板
品牌
- Notion Blue
#0075de— 行动号召 (CTA) 按钮的主要填充元素，是活动导航中的重点，填充的操作按钮是近乎单色系统中唯一饱和度足以被感知为开关的配色方案。
中性的
- Paper Warmth
#f6f5f4— 页面画布、主窗口背景和部分背景均为温暖的浅米色，使系统具有触感和模拟感。 - Pure White
#ffffff— 卡片表面、凸起面板、标志背景、深色卡片上的对比文字。 - Ink Black
#000000— 主要文本、导航链接、标题 - 使用不同的透明度（100%、95%、90%、60%、40%、20%）来构建层次结构，而无需添加新的颜色。 - Charcoal
#111111— 为那些纯黑色看起来过于刺眼的用户界面区域提供深色文本选项。 - Stone
#757575— 辅助导航文本、静音辅助文本、禁用按钮标签 - 60% 墨水透明度 - Graphite
#615d59— 正文采用暖色调——棕灰色，与暖色调的背景相协调。
排版
从 12 像素到 96 像素 · 10 步
- NotionInter — 替代品： Inter · 轮廓 400, 500, 600, 700 · 主要的无衬线字体是一种几何人文主义字体，带有微妙的细微差别，正文字号为 400，导航/用户界面为 500，标题为 600-700。字体缩放比例在大字号时采用了较大的负间距（96px 时为 -4.6px，72px 时为 -2px），这使得标题看起来更加紧凑有力，而非轻盈飘逸。
- Lyon Text — 替代品： Source Serif Pro · 轮廓 400 · 编辑衬线字体专用于正文的各个章节和章节引言，使用频率不高（仅四次），旨在赋予字体文学分量，类似于杂志排版中的引语。它的作用在于起到系统性的强调作用，而非构建平行的层级关系。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 8px |
| 按钮半径 | 8px |
| 卡片半径 | 12px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 80px |
| 页面宽度 | 1440px |
AI 将按照Notion风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- ElevenLabs — 一组以温暖奶油色调为主、标题简洁的摄影作品。一本包豪斯风格的笔记本——蛋壳色纸张，黑色墨水，仅以一抹紫色和橙色点缀，用于产品展示。
- Awesomic — 编辑用的锌网布，上面点缀着橙色的标点符号，让人联想起五彩纸屑。
- Monad — 关于温暖羊皮纸的编辑技术期刊
- Dub — Link的哑光宣纸控制面板
- Seline Analytics — 温暖的纸张上摆放着一张安静的分析表格。
- Anthropic — 一本印在温暖羊皮纸上的科学野外考察日志——平静的象牙色表面，衬线字体的编辑标题，以及一个仅在需要行动时才会出现的粘土色点缀。
- Calendly — 冷大理石纹上印有深蓝色墨水。
- Augen Pro — 苹果的白色展示柜以单色调空间为背景，仅以清冷、轻盈的电光蓝作为点缀。
- Antimetal — 一篇印在米色纸上的社论——科学期刊一个宁静的早晨，克制传达着自信，衬线字体则承担着重要的作用。
- Perk — 温暖的羊皮纸上的电光石灰
- Ditto — 阳光洒满工作室，人们正在制作野花样本。温暖的奶油色底色，鲜艳的黄色底色，深邃的藏蓝色墨水，以及作品背后绽放的自然色彩。
- Officevibe — 一本印在暖米色纸张上的杂志。想象一下，一篇关于人力资源管理的精辟文章，以产品的形式呈现——流畅的衬线字体在现代蓝色的界面中低语。