How Design Systems Transform Product Development and Reduce Design Debt

Design systems have become a hot topic in recent years, with many companies worldwide adopting them—examples include Material Design, Fluent Design, and Ant Design. Their ultimate goal is to strengthen the connection between design and technology, enabling engineering‑driven design that serves more products.

58 Tongcheng, a leading classified information platform in China, uses a design system to improve user experience and adapt to emerging technologies such as AI, big data, blockchain, and IoT.

Historically, Douglas McIlroy introduced component‑based development in 1968 to address the software crisis, promoting reusable code and faster programming. Today, the rapid evolution of mobile internet presents similar challenges, with customized designs stretching product boundaries while market growth slows.

Design debt—excessive, non‑reusable, inconsistent styles—creates maintenance burdens. Nathan Curtis illustrates the cost of a button: 100 USD per hour × 300 hours = 20,000 USD; 50 buttons × 20,000 USD = 1,000,000 USD. Complex components incur even higher costs, leading to fragmented design languages and duplicated effort.

Managing Debt – Design debt consists of hard‑to‑reuse, inconsistent styles; a design system reduces design and engineering overhead, saving budget while remaining scalable.

Common misconceptions include believing design systems are too restrictive, stifle creativity, or are a one‑time effort. In reality, they evolve with brand upgrades, user needs, and market trends, turning designers from followers into creators.

58 Tongcheng built a unified "Information Management Design System" for its 9.0 project, creating a clear design language that supports dark mode and integrates visual‑coding.

Dark mode adoption across major platforms (Apple, Google, Microsoft, Huawei) prompted the need for a visual‑coding system. By abstracting colors into tokens, developers write a single line of code instead of separate light and dark definitions:

view.backgroundColor = [WBCommonStyleSym colorWithType:"Primary_1"];

This approach simplifies maintenance, reduces asset duplication, and enables consistent theming across multiple products.

Screen technologies (LCD/LED vs. OLED/AMOLED) affect color rendering; proper contrast improves readability, especially in dark mode where 40‑90% opacity is recommended for optimal clarity.

Version control follows semantic versioning (major.minor.patch) to track design system updates, ensuring developers can quickly adopt new components without breaking existing implementations.

Collaboration is facilitated through cloud‑synced design tools, online documentation, and dynamic records, allowing designers, developers, and product managers to stay aligned and reduce redundant work.

Future directions involve integrating AI to further automate design decisions, allowing designers to guide machine learning models and expand the system’s capabilities across devices and scenarios.