A dark sidebar that stays out of the way: 13px items at 60% white, a violet-washed active state, and section headers so quiet you feel them more than read them. Navigation as ambient information.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Linear-style dark sidebar.
1. Container: 240px wide, background #16131E (one step lighter than the #0A0A0F canvas), 1px right border #F5F3FF12.
2. Items: 28px tall, 13px medium text at #F5F3FF99, 16px icons at the same opacity, 6px radius, 8px horizontal padding.
3. Hover: background #F5F3FF0D, text to 90% white — transition 100ms.
4. Active: background #8B5CF624, text and icon #8B5CF6. No left-edge indicator bars.
5. Section headers: 11px semibold uppercase at #F5F3FF59, 16px top margin, with collapse chevrons that appear only on hover.
6. Footer: user avatar row pinned to the bottom, separated by the same hairline border.A dark sidebar that stays out of the way: 13px items at 60% white, a violet-washed active state, and section headers so quiet you feel them more than read them. Navigation as ambient information.
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.