Serendie Design System

AboutGet StartedAIFoundationsComponents
© Mitsubishi Electric Corporation

テーミング

アクセシビリティ基準を満たしたカラーテーマを5つ提供しています。FigmaとReactコンポーネントそれぞれテーマ切り替えに対応しています。

更新 2026/3/31

カラーテーマ

事業領域に応じたトンマナに対応するため、現在5つのカラーテーマを提供しています。各テーマはSerendieブランドに用いられる日本の伝統色をベースに設計しています。今後ニーズに合わせてテーマの追加・更新をしていく予定です。

KONJO

紺青色をベースにしたテーマです。紺青色は三菱電機Serendie St. Yokohamaの拠点カラーでもあり、デフォルトのカラーテーマとしています。

konjo theme

ASAGI

浅葱色をベースにしたテーマです。

asagi theme

SUMIRE

すみれ色をベースにしたテーマです。

sumire theme

KURIKAWA

栗皮色をベースにしたテーマです。

kurikawa theme

TSUTSUJI

つつじ色をベースにしたテーマです。

tsutsuji theme

Figma上でのテーマ変更

各テーマは、FigmaのなかでVariableモードとして扱われます。Variableモードは、Figma Variablesに定義されたモード (テーマ) を、ページやセクション、フレームなどに割り当てる機能です。

theme selector

例えば、ページに「ASAGI」を割り当てることで、そのページ内の全てのSerendie UIをASAGIテーマに切り替えることができます。

theme switcher

カスタムテーマ (三菱電機向け)

事業ブランド(サブブランド)ごとにVisual Identity (VI) が定義されているなど、Serendieブランドのカラーやタイポグラフィが適さない場合があります。その場合はカスタムテーマを定義し、そのテーマによってSerendie UIを上書きする仕組みを用意しています。これを使うことで、Serendie UIの導入メリットはそのままに、各事業のVIを採用することができます。

詳しくはGitHubリポジトリを参照してください。この内容は三菱電機社内での利用を想定しており、利用時にはSerendie Design System運用チームのサポートを受けてください。

serendie/subbrands-template - GitHub