White-on-white navigation that stays legible through type alone: quiet gray items that turn brand-purple when active — no pills, no fills, just a confident color flip and perfect alignment.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Stripe-style white dashboard sidebar.
1. Container: 220px, pure white, NO right border — it shares the white canvas and relies on spacing for separation.
2. Items: 32px tall, 14px medium text in #0F172ABF with 16px icons in #64748B, 8px gap.
3. Hover: text darkens to #0F172A; no background wash.
4. Active: text and icon flip to #4F46E5. No pill, no background, no indicator bar — the color change is the entire active state.
5. Sub-items: appear under an expanded parent, indented to align with the parent's label (not its icon), 13px.
6. Groups separated by 20px gaps rather than headers where possible; when a header is needed: 12px semibold #64748B.White-on-white navigation that stays legible through type alone: quiet gray items that turn brand-purple when active — no pills, no fills, just a confident color flip and perfect alignment.
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.