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.
Scroll sideways to explore the full example
Launch plan
Everything the team needs for 12 September.
OverviewTasksNotes
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 baseTeam Manual
- Writing and project tools3 people are editing
- Internal documentationMy homepage Weekly Plan Goals Inspiration
- Products organized around editable blocksTableKanbanCalendar
When NOT to use it
- Copy slash commands into a product that does not need blocksNew-product campaign page (document style)Marketing pages usually need clearer brand and product expression.
- Use gray text with insufficient contrastProduct 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 foundTouchscreens cannot rely on persistent hover.
- Make every page look like a document when tasks need richer controlsBrand 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
Project document
Scroll sideways to explore the full example
Team wiki
Scroll sideways to explore the full example
Content editor
Scroll sideways to explore the full example
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗