The two-tier IDE pattern: a 48px icon-only rail for switching contexts, backed by a wider explorer panel for the tree. The active icon gets a crisp 2px edge line — utilitarian and unmistakable.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a VS Code-style two-tier sidebar (activity rail + panel).
1. Activity rail: 48px wide, background #23233A, a vertical stack of 24px icons at #EEEEF28C, each in a 48px square hit area.
2. Active rail icon: full white with a 2px white left edge line (border-left). Hover: icon to 100% white, no background.
3. Panel: 240-300px, background #12121E, opens next to the rail; header row with the section name at 11px uppercase #EEEEF299.
4. Tree rows: 22px tall (IDE density), 13px text, indent guides as 1px #EEEEF214 vertical lines.
5. Selection: #EEEEF214 background; keyboard focus adds a 1px #18FFDC outline.
6. The rail persists; the panel can collapse entirely. Rail badge dots (e.g. update counts) in #18FFDC.The two-tier IDE pattern: a 48px icon-only rail for switching contexts, backed by a wider explorer panel for the tree. The active icon gets a crisp 2px edge line — utilitarian and unmistakable.
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.