The Serendie Design System is provided by Mitsubishi Electric Corporation’s DX Innovation Center.
A design system aims to streamline design and development, ensure accessible and consistent product quality, accumulate knowledge and spread best practices, and facilitate communication. To achieve this, it provides definitions of brand and visual identity; design tokens that define visual elements such as color and typography; reusable UI components; and visual assets like icons and illustrations. These are representative examples—the exact components of a design system vary by organization and context.
While honoring Mitsubishi Electric’s monozukuri culture, the Serendie Design System aims to be a foundation for rapidly creating experimental, new services. Therefore, the assets we provide focus on items with immediate impact for digital product development. Rather than pursuing only perfection and robustness, it is a design system for enabling lightweight and flexible product development.
Principles
Design systems take various forms depending on the organization, but they share core principles. One of these is striving for a Single Source of Truth (SSOT) to avoid situations like “we don’t know where the latest design files are” or “we didn’t know there was a reusable icon set.”
The same holds true for the Serendie Design System. In light of Mitsubishi Electric’s culture and aspirations, we place emphasis on the following three principles.
Adaptive
We aim to adapt to Mitsubishi Electric’s diverse business domains—from home to space—and to every business phase from value validation to productization. The Serendie Design System provides basic assets that value versatility and universality, and uses them as a foundation to flexibly express each product’s uniqueness and identity by domain.
Borderless
The Serendie Design System is a shared asset for everyone involved with Mitsubishi Electric. We aim to create an environment where anyone can freely use it without permission or approval, whether inside or outside the company. Serendie connects digital product creators and acts as a catalyst for collaboration that transcends organizational boundaries.
Circulative
The Serendie Design System is never “finished.” By continuously analyzing usage and iterating improvements, we respond flexibly to required changes. This activity is not confined to a single team; it is nurtured collaboratively across the organization. We expand the Serendie-centered ecosystem to create positive synergies across the organization.
Adapting to diverse business domains
One of our core concepts is to adapt the Serendie Design System to Mitsubishi Electric’s many brands and products. In such an environment, each domain defines its own visual identity, often needs domain-specific UI components, and may require different accessibility standards and quality bars. If each domain builds a completely independent design system, silos will form and the principles of Borderless and Circulative will be undermined.
This is why a themable, “skin-change” architecture is important. The design tokens and Serendie UI provided by the Serendie Design System include mechanisms to change the surface appearance—what we call theming. By default, we provide five themes that follow the Serendie brand, and you can add domain-specific custom themes to override Serendie UI.
In this way, the Serendie Design System serves as the backbone for each domain design system. Domain-specific UI components are intentionally kept within their respective domain design systems rather than incorporated into Serendie UI, reducing cross-departmental coordination overhead and making governance easier.
In addition to theming, other mechanisms provided by the Serendie Design System—such as synchronizing design tokens between code and Figma—can be leveraged by each domain design system. While this workflow is for internal use at Mitsubishi Electric, we publish concrete workflows on GitHub.
