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.
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 base
- Writing and project tools
- Internal documentation
- Products organized around editable blocks
When NOT to use it
- Copy slash commands into a product that does not need blocks
- Use gray text with insufficient contrast
- Hide important actions until an exact hover target is found
- Make every page look like a document when tasks need richer controls
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 lies on the gray table like a piece of manuscript paper, with vague 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
Project document
Team wiki
Content editor