ResolutionFlow — 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.

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.

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.

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.

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.