Notion is the connected workspace that folds docs, wikis, and projects into one place. Its warm minimalism shows in yellow-brown grays (#f6f5f4), 95%-black body text, and 1px hairlines with faint shadow stacks for a paper-light feel. A fit for content-first productivity products.
SaaSMinimal
Prompt Template
Base Template
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.
Variant Prompts
📱 Mobile
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.
📊 Dashboard
Design a dashboard with Notion design language. Use Notion color identity with #0075de accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Notion visual identity. Use Notion color identity with #0075de accents. Compelling, conversion-focused.
Usage Examples
Notion App
WebBuild a web app with Notion design language and #0075de color system.
Notion Dashboard
DashboardCreate a dashboard using Notion style with data visualization and NotionInter typography.
✅ Best For
- SaaS
- Notes and knowledge base products
- Doc collaboration and PM interfaces
❌ Avoid For
- Motion-heavy gamified entertainment
- Neon dark tech interfaces
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.