The Navigator panel shows vertical lines indicating the "scope" of each component (i.e., what's nested inside). These guides are great because they help identify component nesting at a glance.
However, the relatively dark color of these lines makes them seem more visually important than needed. This distracts from the components themselves and makes the structure tree look "busy."
Suggestion: Lightening the color (or decreasing the opacity) of those vertical lines would shift the visual focus in the panel to the components. As a result, the Navigator would appear less "busy."
This approach is similar to designing tables to focus on the data by lightening the cell borders.
How does the VS Code extension handle color accessibility? Probably just restricts to specific colors... but that could get quite complex. Maybe colored sections would make a good Webstudio plugin.
Seemingly unrelated: A Focus Mode might help understand nesting better and could clean up the Navigator for the task at hand. One might have a look how Penpot does this.
Screen 1: Overlapping items and nesting going on. Screen 2: One Group picked in Navigator or on Canvas and Key F (Focus) pressed
This zooms to the selected items on screen and temporarily removes other items from the page-hierarchy. Pressing F again ends Focus Mode.
