Web Code Editor UI Overhaul

I have a custom web-based code editor that works well under the hood but the visuals are lagging behind. I want to refresh the entire interface so it feels modern, intuitive, and unmistakably on-brand.

What needs attention
The current colour scheme feels dated, the layout no longer makes the best use of space, and the font choices don’t match the rest of my product suite. I’d like all three elements—colours, layout, and typograph re-worked together so the editor looks cohesive at first glance.

Key focus areas
• Toolbar: Redesign the icon set, spacing, and interaction states so actions are faster to recognize and easier to reach.
• Code editor window: Re-style the gutter, syntax-highlight colours, cursor/selection visuals, and overall spacing so the writing area feels clean yet feature-rich.

Goals for the new design
• A clearly modern aesthetic with smooth edges, subtle depth, and up-to-date colour contrasts.
• Usability first: common actions should take fewer clicks and be obvious at every breakpoint.
• Visual consistency with my existing brand palette and typography guidelines.