The warm gray drawer that holds your whole workspace: emoji-first page rows, infinitely nestable with 12px indents, and controls that only materialize under your cursor. Feels like a filing cabinet, not a menu.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Notion-style workspace tree sidebar.
1. Container: 240px, background #F6F1EC (warm gray, not blue-gray), no border — the tone shift separates it from the white canvas.
2. Rows: 28px tall, 14px text at #2F2E2BA6, 4px radius. Each page row leads with a toggle chevron, then an emoji or page icon, then the title.
3. Nesting: each level indents 12px. Chevrons rotate 90° when expanded, transition 150ms.
4. Hover: background #2F2E2B0F; a "+" and "⋯" appear on the right, invisible otherwise.
5. Active page: background #2F2E2B14, text darkens to #2F2E2B at 500 weight.
6. Top: workspace switcher row with the workspace icon and name; quick actions (Search, Updates, Settings) above the page tree.The warm gray drawer that holds your whole workspace: emoji-first page rows, infinitely nestable with 12px indents, and controls that only materialize under your cursor. Feels like a filing cabinet, not a menu.
Click items to switch the active state, hover to preview it, and collapse to the icon rail.
Click items to switch the active state, hover to preview it, and collapse to the icon rail.