NotionBlocks [example] v1.0.0

When a Notion page is empty, the editor shows a single placeholder line ('Type / for commands') in #9B9A97 italic. Triggering '/' reveals a command menu of block types (Text, Heading 1-3, Bulleted list, To-do, Toggle, Quote, Divider, Callout) — each with a 32px icon thumbnail and a 13px description below.

Label

Notion — Empty Page with Block Suggestions

Url

https://notion.so

Observed

2026-Q1

Brand

notion

Pattern Applied

@community/pattern-empty-state

Aesthetic Notes

• Placeholder text: 16px #9B9A97 italic — same line-height as body text so cursor sits where it will type.
• Command menu: 320px wide popover, anchored at cursor, max-height 360px with scroll.
• Block thumbnail: 32px monochrome icon in #37352F on a 40px rgba(55,53,47,0.05) tile.
• Block name: 14px/500, description below in 12px #9B9A97 — 2-line vertical stack.
• Selected row: rgba(35,131,226,0.1) with no border (Notion's blue accent #2383E2 reserved for selection).
• Section headers ('Basic blocks', 'Media') in 11px/500 uppercase #9B9A97 letter-spacing 0.05em.

What To Copy

• Empty state should be a single line of placeholder, not a full-blown 'no content' graphic — invites action immediately.
• Slash-command menu should anchor at cursor position, not a fixed corner — reduces eye travel.
• Each block type needs a thumbnail/icon AND a 1-line description — names alone (e.g., 'Toggle') are ambiguous.
• Reserve a single accent color (#2383E2) for selection/focus across the entire app.

What To Skip

• The fuzzy match for '/h1' vs '/heading 1' is inconsistent — pick one and document it.

Screenshot Hint

scout query: notion slash command menu block types icons descriptions empty page

Demonstrates

• Empty states work best when they teach the next action, not apologize for the void.
• Cursor-anchored popovers feel native; corner-anchored popovers feel like 'panels'.
• Icon + name + description is the minimum viable command-menu row at scale.

NotionBlocks [example] v1.0.0

When a Notion page is empty, the editor shows a single placeholder line ('Type / for commands') in #9B9A97 italic. Triggering '/' reveals a command menu of block types (Text, Heading 1-3, Bulleted list, To-do, Toggle, Quote, Divider, Callout) — each with a 32px icon thumbnail and a 13px description below.

Label

Notion — Empty Page with Block Suggestions

Url

https://notion.so

Observed

2026-Q1

Brand

notion

Pattern Applied

@community/pattern-empty-state

Aesthetic Notes

• Placeholder text: 16px #9B9A97 italic — same line-height as body text so cursor sits where it will type.
• Command menu: 320px wide popover, anchored at cursor, max-height 360px with scroll.
• Block thumbnail: 32px monochrome icon in #37352F on a 40px rgba(55,53,47,0.05) tile.
• Block name: 14px/500, description below in 12px #9B9A97 — 2-line vertical stack.
• Selected row: rgba(35,131,226,0.1) with no border (Notion's blue accent #2383E2 reserved for selection).
• Section headers ('Basic blocks', 'Media') in 11px/500 uppercase #9B9A97 letter-spacing 0.05em.

What To Copy

• Empty state should be a single line of placeholder, not a full-blown 'no content' graphic — invites action immediately.
• Slash-command menu should anchor at cursor position, not a fixed corner — reduces eye travel.
• Each block type needs a thumbnail/icon AND a 1-line description — names alone (e.g., 'Toggle') are ambiguous.
• Reserve a single accent color (#2383E2) for selection/focus across the entire app.

What To Skip

• The fuzzy match for '/h1' vs '/heading 1' is inconsistent — pick one and document it.

Screenshot Hint

scout query: notion slash command menu block types icons descriptions empty page

Demonstrates

• Empty states work best when they teach the next action, not apologize for the void.
• Cursor-anchored popovers feel native; corner-anchored popovers feel like 'panels'.
• Icon + name + description is the minimum viable command-menu row at scale.

Label

Notion — Empty Page with Block Suggestions

Url

https://notion.so

Observed

2026-Q1

Brand

notion

Pattern Applied

@community/pattern-empty-state

Aesthetic Notes

• Placeholder text: 16px #9B9A97 italic — same line-height as body text so cursor sits where it will type.
• Command menu: 320px wide popover, anchored at cursor, max-height 360px with scroll.
• Block thumbnail: 32px monochrome icon in #37352F on a 40px rgba(55,53,47,0.05) tile.
• Block name: 14px/500, description below in 12px #9B9A97 — 2-line vertical stack.
• Selected row: rgba(35,131,226,0.1) with no border (Notion's blue accent #2383E2 reserved for selection).
• Section headers ('Basic blocks', 'Media') in 11px/500 uppercase #9B9A97 letter-spacing 0.05em.

What To Copy

• Empty state should be a single line of placeholder, not a full-blown 'no content' graphic — invites action immediately.
• Slash-command menu should anchor at cursor position, not a fixed corner — reduces eye travel.
• Each block type needs a thumbnail/icon AND a 1-line description — names alone (e.g., 'Toggle') are ambiguous.
• Reserve a single accent color (#2383E2) for selection/focus across the entire app.

What To Skip

• The fuzzy match for '/h1' vs '/heading 1' is inconsistent — pick one and document it.

Screenshot Hint

scout query: notion slash command menu block types icons descriptions empty page

Demonstrates

• Empty states work best when they teach the next action, not apologize for the void.
• Cursor-anchored popovers feel native; corner-anchored popovers feel like 'panels'.
• Icon + name + description is the minimum viable command-menu row at scale.