Notion Sidebar
Notion's sidebar is a 240px-wide rail in cream #F7F6F3 showing a tree of nested pages. Each page row is 28px tall with a 14px chevron (collapsed/expanded), 18px emoji/icon, and 14px text in #37352F.…
$ prime install @community/example-notion-sidebar Projection
Always in _index.xml · the agent never has to ask for this.
NotionSidebar [example] v1.0.0
Notion's sidebar is a 240px-wide rail in cream #F7F6F3 showing a tree of nested pages. Each page row is 28px tall with a 14px chevron (collapsed/expanded), 18px emoji/icon, and 14px text in #37352F. Indentation is exactly 18px per nesting level. Hover reveals an 'Add subpage' (+) icon and a '...' menu on the right.
Loaded when retrieval picks the atom as adjacent / supporting.
NotionSidebar [example] v1.0.0
Notion's sidebar is a 240px-wide rail in cream #F7F6F3 showing a tree of nested pages. Each page row is 28px tall with a 14px chevron (collapsed/expanded), 18px emoji/icon, and 14px text in #37352F. Indentation is exactly 18px per nesting level. Hover reveals an 'Add subpage' (+) icon and a '...' menu on the right.
Label
Notion — Nested Pages Sidebar
Url
Observed
2026-Q1
Brand
notion
Pattern Applied
@community/pattern-sidebar-collapsible
Aesthetic Notes
- Sidebar background: #F7F6F3 (warm cream, NOT pure gray); main content #FFFFFF — the contrast is intentional.
- Row height: 28px (denser than typical 36px sidebars to support deep nesting).
- Indentation: 18px per level (~equal to icon width), with no visible guide lines.
- Chevron: 14px, color #9B9A97, rotates 90° on expand with 100ms ease-out.
- Hover state: rgba(55,53,47,0.05) row, '+' and '...' icons fade in at right.
- Active page: rgba(55,53,47,0.08) row + bold 14px/600 weight on title.
What To Copy
- Use a warm off-white (#F7F6F3) for sidebar instead of #FFFFFF or gray — it disambiguates from main content while staying calm.
- 18px indentation per level is the sweet spot — 16px feels cramped, 24px wastes horizontal space at deep nesting.
- Reveal action icons on hover only — always-visible '...' menus add visual noise to long lists.
- Active state via background tint + font-weight bump (not color change) reads as 'selected' without being loud.
What To Skip
- Deep nesting (>5 levels) becomes unreadable; consider breadcrumb badges at level 4+.
- The drag-to-reorder is finicky on touch devices — provide a long-press alternative.
Screenshot Hint
scout query: notion sidebar nested pages cream background emoji icons chevrons
Demonstrates
- Off-white sidebar backgrounds (cream, not gray) feel warmer than typical productivity tools.
- Density is power-user-friendly when nesting goes deep (28px rows over 36px).
- Hover-revealed actions reduce visual noise at rest while preserving discoverability.
Loaded when retrieval picks the atom as a focal / direct hit.
NotionSidebar [example] v1.0.0
Notion's sidebar is a 240px-wide rail in cream #F7F6F3 showing a tree of nested pages. Each page row is 28px tall with a 14px chevron (collapsed/expanded), 18px emoji/icon, and 14px text in #37352F. Indentation is exactly 18px per nesting level. Hover reveals an 'Add subpage' (+) icon and a '...' menu on the right.
Label
Notion — Nested Pages Sidebar
Url
Observed
2026-Q1
Brand
notion
Pattern Applied
@community/pattern-sidebar-collapsible
Aesthetic Notes
- Sidebar background: #F7F6F3 (warm cream, NOT pure gray); main content #FFFFFF — the contrast is intentional.
- Row height: 28px (denser than typical 36px sidebars to support deep nesting).
- Indentation: 18px per level (~equal to icon width), with no visible guide lines.
- Chevron: 14px, color #9B9A97, rotates 90° on expand with 100ms ease-out.
- Hover state: rgba(55,53,47,0.05) row, '+' and '...' icons fade in at right.
- Active page: rgba(55,53,47,0.08) row + bold 14px/600 weight on title.
What To Copy
- Use a warm off-white (#F7F6F3) for sidebar instead of #FFFFFF or gray — it disambiguates from main content while staying calm.
- 18px indentation per level is the sweet spot — 16px feels cramped, 24px wastes horizontal space at deep nesting.
- Reveal action icons on hover only — always-visible '...' menus add visual noise to long lists.
- Active state via background tint + font-weight bump (not color change) reads as 'selected' without being loud.
What To Skip
- Deep nesting (>5 levels) becomes unreadable; consider breadcrumb badges at level 4+.
- The drag-to-reorder is finicky on touch devices — provide a long-press alternative.
Screenshot Hint
scout query: notion sidebar nested pages cream background emoji icons chevrons
Demonstrates
- Off-white sidebar backgrounds (cream, not gray) feel warmer than typical productivity tools.
- Density is power-user-friendly when nesting goes deep (28px rows over 36px).
- Hover-revealed actions reduce visual noise at rest while preserving discoverability.
Label
Notion — Nested Pages Sidebar
Url
Observed
2026-Q1
Brand
notion
Pattern Applied
@community/pattern-sidebar-collapsible
Aesthetic Notes
- Sidebar background: #F7F6F3 (warm cream, NOT pure gray); main content #FFFFFF — the contrast is intentional.
- Row height: 28px (denser than typical 36px sidebars to support deep nesting).
- Indentation: 18px per level (~equal to icon width), with no visible guide lines.
- Chevron: 14px, color #9B9A97, rotates 90° on expand with 100ms ease-out.
- Hover state: rgba(55,53,47,0.05) row, '+' and '...' icons fade in at right.
- Active page: rgba(55,53,47,0.08) row + bold 14px/600 weight on title.
What To Copy
- Use a warm off-white (#F7F6F3) for sidebar instead of #FFFFFF or gray — it disambiguates from main content while staying calm.
- 18px indentation per level is the sweet spot — 16px feels cramped, 24px wastes horizontal space at deep nesting.
- Reveal action icons on hover only — always-visible '...' menus add visual noise to long lists.
- Active state via background tint + font-weight bump (not color change) reads as 'selected' without being loud.
What To Skip
- Deep nesting (>5 levels) becomes unreadable; consider breadcrumb badges at level 4+.
- The drag-to-reorder is finicky on touch devices — provide a long-press alternative.
Screenshot Hint
scout query: notion sidebar nested pages cream background emoji icons chevrons
Demonstrates
- Off-white sidebar backgrounds (cream, not gray) feel warmer than typical productivity tools.
- Density is power-user-friendly when nesting goes deep (28px rows over 36px).
- Hover-revealed actions reduce visual noise at rest while preserving discoverability.
Source
prime-system/examples/frontend-design/primes/compiled/@community/example-notion-sidebar/atom.yaml