From dacefed44b0d57a592dab876c8d373bf720078a0 Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Sun, 15 Mar 2026 04:03:38 -0400 Subject: [PATCH] docs: add 5 sidebar icon color concepts for UX review Co-Authored-By: Claude Opus 4.6 (1M context) --- .../plans/Frontend/sidebar-icon-concepts.html | 803 ++++++++++++++++++ 1 file changed, 803 insertions(+) create mode 100644 docs/plans/Frontend/sidebar-icon-concepts.html diff --git a/docs/plans/Frontend/sidebar-icon-concepts.html b/docs/plans/Frontend/sidebar-icon-concepts.html new file mode 100644 index 00000000..d087c2ad --- /dev/null +++ b/docs/plans/Frontend/sidebar-icon-concepts.html @@ -0,0 +1,803 @@ + + + + + +ResolutionFlow — Sidebar Icon Concepts + + + + + +

Sidebar Icon Concepts

+

+ 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.
    • +
+
+ + + + +