Webflow — Navigation Panel Redesign Concept

I've been using Webflow for a while now and love it. I especially love the recent rebrand and UI refresh. Lots of improvements all around.

As I use the Navigator quite frequently, I think there's room to potentially improve the communication of hierarchy and scannability of nested elements. I was motivated to take a stab at how this might look in practice. Certainly a lot of edge cases to consider as well as several key challenges:

• What kind of visual tools might we use to communicate depth and hierarchy effectively?

• How might we avoid obstructing the user's flow state and primary jobs to be done with any new patterns we introduce?

• How might we ensure any new patterns introduced are accessible?

There's much more to consider, but to get the conversation going, I thought it would be fun to take a pass at this using degrees of neutral grays to communicate depth, subtle indentation and some key color to communicate hierarchy and layer types (there's a lot more to explore here especially).

As a bonus, I included a distinct "Add Layer" button to the Navigator panel which is intended to add a simple div block to the end of the list. If this concept hits, I'd love to explore a way to maybe configure this button to add a specific layer type depending on the type of content you're designing for.

What do you think of this concept? Is this an improvement or does this make things more confusing?