Serendie Design System

AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

Theming

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

Last updated 7/28/2025

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