Notion 是把文件、知識庫與專案管理收進同一處的工作空間。其視覺以暖調極簡見長：灰階帶有黃棕底色（#f6f5f4 暖白），內文用 95% 黑而非純黑，1px 淺描邊與不足 0.05 透明度的多層陰影讓介面像紙一樣輕。適合內容驅動、強調可讀性與秩序感的效率類產品。
Notion效率與 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 程式設計工具使用。