Design

Notion Style

You might say

Make it feel like Notion—clean, text-first, and inviting to write in.

Use document-like structure, quiet surfaces, and practical controlsNotion-style interfaces feel close to an editable document: clear text hierarchy, compact icons, neutral colors, and blocks that can be arranged. It works well for knowledge and productivity tools, but copying the appearance without the underlying content model produces a plain page with weak interaction.
WorkstreamOwnerStatus
WebsiteLinReady
CampaignUmaIn progress
Press kitSamNot started
Design Principles
  • Treat content blocks as the main structure
  • Keep typography compact and readable
  • Use neutral surfaces with small, meaningful accents
  • Reveal controls near the content they affect
  • Support scanning through indentation, icons, and consistent spacing

When to use it

  • Knowledge base
    Team Manual
  • Writing and project tools
    3 people are editing
  • Internal documentation
    My homepage Weekly Plan Goals Inspiration
  • Products organized around editable blocks
    TableKanbanCalendar

When NOT to use it

  • Copy slash commands into a product that does not need blocks
    New-product campaign page (document style)Marketing pages usually need clearer brand and product expression.
  • Use gray text with insufficient contrast
    Product details: white background, thin rules, small gray textAn e-commerce page also needs to show product features and purchase information.
  • Hide important actions until an exact hover target is found
    Touchscreens cannot rely on persistent hover.
  • Make every page look like a document when tasks need richer controls
    Brand campaign page (gray-and-white palette)When a strong brand color is needed, add visual elements that support it.
Anatomy
Light gray background #F7F7F5 White content area emoji icon Gray black text #37352F 1px thin dividing line ⠿ ＋ ⋯hover operation button
Example uses a warm gray canvas; specific color will be determined in conjunction with subject matter and text contrast
The document sits on the gray table like a sheet of manuscript paper, with faint borders.
Can be used for page decoration and lightweight classification; key functions should still have stable, recognizable names
Create a hierarchy with multiple levels of text colors, each level remaining readable against the corresponding background
Example segmented with 1px thin lines; border strength adjusted according to content complexity
It appears when the mouse is hovering or the keyboard is focused, and a clear click entry is provided on the touch screen.
AI Prompt

Document-style productivity interface, light gray canvas with a white page, emoji icons, muted text hierarchy, 1px dividers, compact spacing, contextual actions revealed on hover

Typical use cases
Knowledge base

Scroll sideways to explore the full example

Product Team Handbook
8 members · Updated 2 hours ago
This manual answers three things: who we are, how we make decisions, and where to find information.
This week’s highlights
✓v2.0 release review
New employee onboarding document update
• Design review every Wednesday afternoon
• Write "why" first in the requirements document
Project document

Scroll sideways to explore the full example

Little LiXiaoli’s workspace ⌄
Search
Inbox 3
Collection
New product release plan
Product Team Manual
Private
Weekly Plan
↳ Fitness check-in
↳ Travel list
Private recipes
Trash
New product release plan
⠿ Hover any content block and an operation button will appear on the left
Team wiki

Scroll sideways to explore the full example

Launch task board Board ⌄
Not started · 2
Launch presentation
Design
Media outreach list
Operations
In progress · 2
Build website landing page
Front-end
Finalize pricing plans
Product
Done · 1
Confirm launch date
✓ Done
Content editor

Scroll sideways to explore the full example

Xiaoli’s knowledge base
Today is also an organized day.
Latest updates
New product release plan2 hours ago
Yesterday
3 days ago
Travel ListLast week