Notion 是把文档、知识库与项目管理收进同一处的工作空间。其视觉以暖调极简见长：灰阶带有黄棕底色（#f6f5f4 暖白），正文用 95% 黑而非纯黑，1px 浅描边与不足 0.05 透明度的多层阴影让界面像纸一样轻。适合内容驱动、强调可读性与秩序感的效率类产品。
效率与 SaaS现代极简
提示词模板
基础模板
Design a Notion-inspired interface. - NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px); - Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark); - Near-black text via rgba(0,0,0,0.95) -- not pure black, creating micro-warmth; - Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division; - Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth. Colors: #000000f2, #ffffff, #0075de, #213183 with #0075de accent. Typography: NotionInter.
变体提示词
📱 移动端
Design a mobile app with Notion aesthetics. Use Notion color identity with #0075de accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Notion style. Use Notion color identity with #0075de accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Notion design language. Use Notion color identity with #0075de accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Notion visual identity. Use Notion color identity with #0075de accents. Compelling, conversion-focused.
使用示例
Notion 应用
Web 端Build a web app with Notion design language and #0075de color system.
Notion 仪表板
仪表板Create a dashboard using Notion style with data visualization and NotionInter typography.
✅ 适合场景
- SaaS 产品
- 笔记与知识库类产品
- 文档协作与项目管理界面
❌ 不适合场景
- 重动效的游戏化娱乐
- 霓虹暗黑的科技界面
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。