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.

ASAGI
A theme based on pale blue-green.

SUMIRE
A theme based on violet.

KURIKAWA
A theme based on chestnut brown.

TSUTSUJI
A theme based on azalea pink.

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.

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