Redesigning a Legacy Enterprise Application
Our team faced a unique constraint: we were locked into AngularJS v1, which meant we couldn't leverage modern component libraries like shadcn or CSS frameworks like Tailwind CSS. The application's UI had grown inconsistent over time, with styles scattered throughout the codebase and no unified design language. We needed a modern, cohesive look while working within significant technical limitations.
Overview
I led a comprehensive redesign of an enterprise application, modernizing its visual design and establishing a scalable design system—all within the constraints of a legacy AngularJS v1 codebase.
The Challenge
Our team faced a unique constraint: we were locked into AngularJS v1, which meant we couldn't leverage modern component libraries like shadcn or CSS frameworks like Tailwind CSS. The application's UI had grown inconsistent over time, with styles scattered throughout the codebase and no unified design language. We needed a modern, cohesive look while working within significant technical limitations.
My Approach
1. Building the Foundation
I started by creating a design system from scratch using CSS custom properties (variables). I defined:
Color palettes for all UI states
Spacing scale for consistent layouts
Typography system (font sizes, weights, line heights)
Border radius values
Other design tokens
I then conducted training sessions with the development team to explain the system and why consistency matters for both user experience and maintainability.
2. Proving the Concept
Rather than attempting to restyle everything at once, I strategically chose two pages to demonstrate the new approach:
A brand new page that showcased our new design system in action
A complex legacy page that used the outdated angular-ui-grid library—proving we could modernize even the most challenging parts of the application
3. Systematizing Component Styles
With the foundation in place, I audited the application to identify reusable UI patterns. I created standardized component classes for buttons, form inputs, cards, modals, and other recurring elements. This ensured visual consistency and made future development faster.
The Device Onboarding screen before the redesign
The Device Onboarding screen post-redesign
4. Scaling with AI Assistance
To accelerate the rollout, I leveraged Opencode with AI models like Claude Sonnet + Opus 4.6 to apply the new component classes across existing pages and dialogs. However, AI was just a tool—I manually reviewed every change, adjusting layouts, fixing alignment issues, and resolving UI bugs that had been lurking in the codebase.
5. Implementing Dark Mode
As a final touch, I implemented a dark mode toggle using vanilla JavaScript and CSS. During development, I constantly switched between light and dark modes to identify any remaining hard-coded color values or "magic numbers." This process ensured our CSS variables were truly comprehensive and the application looked great in both modes.
Results
Successfully modernized the entire application without a framework migration
Established a maintainable design system that will benefit future development
Improved visual consistency across 100+ pages and dialogs
Implemented dark mode support throughout the application
Created documentation and patterns that empowered the team to maintain design standards
Technical Highlights
CSS custom properties for a flexible design token system
Component-driven CSS architecture in a legacy framework
Strategic use of AI tooling to accelerate implementation
Pure CSS/JS dark mode implementation without dependencies