+ 5 distinct approaches to make the ResolutionFlow sidebar navigation feel alive with color.
+ Each concept adds visual personality while maintaining the Slate & Ice design system.
+ Hover and active states are interactive — try them out.
+
+
+
+
+
+
+
+
Concept 01
+
Semantic Color Icons
+
Every icon gets a permanent, meaningful color. Dashboard = cyan, Sessions = emerald, AI = fuchsia. Always-on color creates instant visual landmarks.
+
+
+
Navigation
+
+
+ Dashboard
+
+
+
+ All Flows
+ 12
+
+
+
+ Flow Editor
+
+
+
+ Sessions
+ 3
+
+
+
+ Exports
+
+
+
+ AI Assistant
+
+
+
+ Step Library
+
+
+
+ Script Library
+
+
+
+ KB Accelerator
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
Concept 02
+
Tinted Pill Backgrounds
+
Each icon sits inside a rounded-square with a soft tinted background matching its color. Creates visual weight and makes icons feel like objects, not just strokes.
+
+
+
Navigation
+
+
+ Dashboard
+
+
+
+ All Flows
+ 12
+
+
+
+ Flow Editor
+
+
+
+ Sessions
+ 3
+
+
+
+ Exports
+
+
+
+ AI Assistant
+
+
+
+ Step Library
+
+
+
+ Script Library
+
+
+
+ KB Accelerator
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
Concept 03
+
Reveal on Active
+
Icons stay monochrome (subtle, professional) until active — then they bloom into their signature color with a matching tinted row background and accent bar. Quiet→loud transition.
+
+
+
Navigation
+
+
+ Dashboard
+
+
+
+ All Flows
+ 12
+
+
+
+ Flow Editor
+
+
+
+ Sessions
+ 3
+
+
+
+ Exports
+
+
+
+ AI Assistant
+
+
+
+ Step Library
+
+
+
+ Script Library
+
+
+
+ KB Accelerator
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
Concept 04
+
Color Dot Markers
+
Clean monochrome icons paired with a small colored dot to the left. Minimal but adds color variety without overwhelming the sidebar. Active dots pulse gently.
+
+
+
Navigation
+
+
+
+ Dashboard
+
+
+
+
+ All Flows
+ 12
+
+
+
+
+ Flow Editor
+
+
+
+
+ Sessions
+ 3
+
+
+
+
+ Exports
+
+
+
+
+ AI Assistant
+
+
+
+
+ Step Library
+
+
+
+
+ Script Library
+
+
+
+
+ KB Accelerator
+
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
Concept 05
+
Vivid + Micro-bounce
+
Always-colored icons at reduced opacity. On hover they bounce up slightly and go full vivid. Active items get a glowing underline beneath the icon. Playful but controlled energy.
+
+
+
Navigation
+
+
+ Dashboard
+
+
+
+ All Flows
+ 12
+
+
+
+ Flow Editor
+
+
+
+ Sessions
+ 3
+
+
+
+ Exports
+
+
+
+ AI Assistant
+
+
+
+ Step Library
+
+
+
+ Script Library
+
+
+
+ KB Accelerator
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
Implementation Notes
+
+
Concept 1 (Semantic Colors) — Simplest to implement. Just add a color class per NavItem. Lowest risk, highest impact. The always-on color creates wayfinding landmarks engineers use subconsciously.
+
Concept 2 (Tinted Pills) — More visual weight. The pill backgrounds make icons feel substantial, like app icons. Creates a premium "dock" feeling. Slightly more complex (28px wrapper with bg).
+
Concept 3 (Reveal on Active) — Most restrained. Keeps the sidebar quiet until you interact. The color "reward" on active creates a satisfying click moment. The tinted row bg per-color is the key differentiator from current.
+
Concept 4 (Dot Markers) — Minimal color addition. The dots add variety without changing icon rendering. The pulsing active dot adds a subtle "alive" feeling. Easiest to A/B test since it's purely additive.
+
Concept 5 (Vivid + Micro-bounce) — Most playful. The bounce micro-interaction adds personality. The glowing underline on active is a unique touch. Best for making the app feel "alive" and responsive to the engineer.