Back

Design system modernization of a B2B SaaS platform

We helped our client achieve a governed, rebrand-ready UI through design system modernization.

Country

USA

Client

Marketing data solutions company

Service

Design system modernization

CLIENT'S CONTEXT

A growing React codebase had no shared language for visual decisions

Our client runs a B2B SaaS platform focused on marketing data hygiene. Over time, the React-based front end had grown into a brownfield codebase. Visual rules were distributed across numerous SCSS files and components, with no consistent or enforceable abstraction layer.

CHALLENGE

The planned rebrand exposed a structural problem

With colors, spacing, and typography hardcoded across components and SCSS files, applying a new visual identity would have required manual changes across hundreds of files—with no reliable way to enforce consistency or verify the result.

MUI (Material UI) constructs had also spread beyond the presentation layer into broader application code. This increased coupling between UI implementation and business logic, making the front end harder to maintain and raising the risk of regressions during major updates.

The client needed a governed design architecture that could support the rebrand and future UI changes without a disruptive front-end rewrite.

SOLUTION

We modernized the existing codebase incrementally instead of replacing it

The team at EffectiveSoft avoided a front-end rewrite because it would have introduced parallel maintenance, delayed delivery, and risked duplicating the same structural issues in a new codebase. Instead, EffectiveSoft established an incremental modernization strategy, introducing a structured design architecture into the existing codebase and progressively implementing it through automated refactoring.

To execute this strategy, we set up a controlled, agent-assisted refactoring workflow around Claude Code. This approach supported repository analysis and context-aware transformations across hundreds of files with mixed styling patterns, while preserving the existing application architecture.

PHASE 1

Defining a design contract

EffectiveSoft audited the codebase and extracted the visual primitives scattered across SCSS and component files.

We consolidated colors, spacing, typography, elevation, border radii, and layout rules into a semantic design contract. This replaced duplicated implementation-level values with a consistent system of reusable design tokens.

PHASE 2

Automated migration

Claude Code transformed hardcoded styling values into references to the new token system across hundreds of files.

This required more than mechanical search and replacement. The workflow had to account for mixed SCSS structures, legacy MUI theme usage, and conditional styling logic in which identical values could serve different purposes.

Changes were applied incrementally through reviewable diffs. Styling logic was consolidated around the token system, while framework-specific MUI usage was restricted to designated UI layers.

PHASE 3

Architectural enforcement

Defining a design contract

To ensure the system remained stable after migration, EffectiveSoft introduced enforcement at the build level. CI rules restricted MUI usage outside designated UI layers, while linting prevented the reintroduction of raw styling values, such as hardcoded colors or spacing.

This shifted consistency from developer discipline to automated enforcement within the build process.

EffectiveSoft audited the codebase and extracted the visual primitives scattered across SCSS and component files.

From an early-stage product to a global trading platform

PHASE 4

Visual regression validation

Defining a design contract

Because changes touched hundreds of files, EffectiveSoft introduced an automated visual regression layer to validate correctness.

UI states were captured before and after transformation and compared to detect unintended layout or styling changes. This allowed the team to safely execute large-scale automated refactoring while keeping functional and visual behavior intact.

EffectiveSoft audited the codebase and extracted the visual primitives scattered across SCSS and component files.

IMPACT

The platform gained a governed design layer enforced directly in the development workflow

Centralized design tokens replaced scattered styling conventions, while CI and linting rules made the new architecture enforceable. Legacy palette dependencies were removed, duplicate components were consolidated, and remaining one-off values were reviewed and documented rather than left as unexplained technical debt.

Automated visual regression testing identified layout shifts throughout the migration, preventing unintended visual changes from reaching production.

0+ tokens

governing the entire UI

0+ files

refactored in one migration

CI-detected MUI leaks

BUSINESS VALUE

The platform is now ready for a controlled rebrand

Instead of manually updating styles across hundreds of components, the team can change a focused set of values in the design contract and propagate the new visual identity consistently throughout the application.

The governed architecture also lowers long-term maintenance and modernization risk. Clear separation between presentation and application code makes future front-end changes more predictable, while automated validation reduces the amount of manual QA required after each update.

From an early-stage product to a global trading platform

What could AI unlock for your product?

Talk to our AI experts