The startup aimed to enter a highly competitive market as a professional-grade website builder, positioned as a faster, more intuitive alternative to giants like Webflow. The primary challenge was to architect a comprehensive visual interface that provides granular, surgical control over CSS/HTML logic while maintaining workflow speed. As the sole designer, I had to translate complex technical concepts (Flexbox, CSS Grid, State management) into a clean, professional dark-mode workspace from a blank canvas.

I approached the project by building a "System of Systems." First, I established the foundation of a rock-solid Atomic Design System for the SaaS itself. Second, I designed a high-density, modular workspace where the user’s focus remains on the "Live Canvas." My solution involved engineering logical, adaptative property panels (the "Contextual Styles") that show only relevant settings based on the selection, eliminating clutter and maximizing efficiency.

A standout discovery during user testing was the "Surgical Accents" system. I designed a high-contrast visual indication for all active properties. Now, users instantly see which styles are applied to an element without scrolling through endless property lists. This dramatically accelerates the debugging process and makes managing complex CSS parameters visually effortless.