Serendie Design System

AboutGet StartedAIFoundationsComponents
design system
AboutGet StartedAIFoundationsComponents
© Mitsubishi Electric Corporation

Theming

We provide five color themes that meet accessibility standards. Both Figma and React components support switching themes.

Last updated 3/31/2026

Color themes

To match tones and manners across business domains, we currently provide five color themes. Each theme is designed based on the traditional Japanese colors used by the Serendie brand. We plan to add and update themes according to future needs.

KONJO

A theme based on indigo blue. Indigo is also the base color of Mitsubishi Electric Serendie St. Yokohama, so this is the default theme.

konjo theme

ASAGI

A theme based on pale blue-green.

asagi theme

SUMIRE

A theme based on violet.

sumire theme

KURIKAWA

A theme based on chestnut brown.

kurikawa theme

TSUTSUJI

A theme based on azalea pink.

tsutsuji theme

Switching themes in Figma

Each theme is treated as a Variable mode in Figma. Variable modes let you assign modes (themes) defined in Figma Variables to pages, sections, frames, and more.

theme selector

For example, assigning “ASAGI” to a page switches all Serendie UI within that page to the ASAGI theme.

theme switcher

Custom themes (internal)

In some cases, such as when a Visual Identity (VI) is defined for each business brand (sub-brand), the Serendie brand colors and typography may not be suitable. For such cases, we provide a mechanism to define a custom theme and override Serendie UI with it. This allows you to adopt each business’s VI while retaining the benefits of Serendie UI.

For details, see the GitHub repository. This is intended for internal use within Mitsubishi Electric, and please contact the Serendie Design System operations team for support.

serendie/subbrands-template - GitHub