# Serendie Design System

> A comprehensive design system documentation for building consistent and accessible user interfaces. Created with support from Takram Japan Inc. and protected as intellectual property of Mitsubishi Electric Corporation.

## About

- [About](/about): About this design system

## Get Started

- [Get Started](/get-started): Getting started guide
- [デザイン](/get-started/design): UIデザインのなかでSerendie UI Kitを活用する方法を紹介します。
- [開発](/get-started/dev): Webフロントエンド開発において、Serendie UI Kitをベースにした画面デザインを、Reactで実装していくシーンを想定して活用方法を紹介します。

## Foundations

- [Foundations](/foundations): 
- [リファレンストークン](/foundations/design-tokens/reference-tokens): リファレンストークンは、カラーコードなど生の値を参照するトークンであり、このトークンをプロダクトのUI内で使用することは例外的です。
- [システムトークン](/foundations/design-tokens/system-tokens): システムトークンは、リファレンストークンを参照するトークンです。UIをとりまくコンテキストが変化した際には、その参照先を切り替えることで対応します。
- [デザイントークン](/foundations/design-tokens): デザイントークンはデザインシステムを構成する最小単位です。デザインと開発でデザイントークンを共有することで、Single Source of Truthを実現します。
- [カラー](/foundations/color): Serendieらしさを視覚的に表現するための基礎となるカラーパレットです。このパレットに基づくことでプロダクト間の一貫性を強化できます。カラーパレットはリファレンストークンとして定義されています。
- [カラーロール](/foundations/color/role): カラーパレットから色を選び、デジタルプロダクトのなかでの意味や役割を持たせたものがカラーロールです。カラーロールはシステムトークンとして定義されています。
- [カラーロール](/foundations/data-visualization-role): データ可視化用のカラーパレットは、データの性質に合わせてデザイントークンの使い分けが必要です。またアクセシビリティ上の配慮も重要です。
- [データビジュアライゼーション](/foundations/data-visualization): 基本カラーパレットを拡張する形で、データ可視化用のカラーパレットをシステムトークンとして提供しています。凡例や目盛りなどチャートに関連するシステムトークンも合わせて定義しています。
- [テーミング](/foundations/theming): アクセシビリティ基準を満たしたカラーテーマを5つ提供しています。FigmaとReactコンポーネントそれぞれテーマ切り替えに対応しています。
- [タイポグラフィ](/foundations/typography): デジタルプロダクトは文字を中心に構成されるため、適切にタイポグラフィを扱うことは重要です。フォントやフォントサイズなどをリファレンストークンとし、UI上の役割に合わせてグループ化したシステムトークンを定義しています。
- [寸法](/foundations/dimension): スペーシングやボーダー幅、角丸など、寸法(Dimension)に関するデザイントークンです。レスポンシブデザインにおけるBreakpointも取り扱います。
- [階層](/foundations/elevation): オブジェクトに落とすシャドウはその強弱によって、オブジェクト間の高低差を表現し、UIに階層(Elevation)を作り出します。またCSSにおいて階層を指定するz-indexについても取り扱います。
- [アイコン](/foundations/icon): Serendie Symbolsは、デジタルプロダクトのなかで汎用性高く使える、Serendieらしいアイコン集です。
- [アイコン](/foundations/icon-list): Serendie Symbolsは、デジタルプロダクトのなかで汎用性高く使える、Serendieらしいアイコン集です。
- [イラストレーション](/foundations/illustration): Serendie Design System運用チーム向けに、Figma上で簡易的なイラストシステムを提供しています。ドキュメントのアイキャッチや、コンポーネント内のプレースホルダーとして使えるイラストを、バリアントプロパティを切り替えることで作成できます。

## Components

- [Accordion](/components/accordion): 関連するコンテンツを列挙し、ユーザーが展開・折りたたむことができるコンポーネントです。表示スペースを節約しながら、ユーザーが詳細な情報を得る手段を提供します。
- [Avatar](/components/avatar): ユーザーについて視覚的に表現するコンポーネントです。
- [Badge](/components/badge): ステータス、カテゴリなどを表すコンポーネントです。情報を簡潔に表示し、ユーザーの注意を引きつけます。
- [Banner](/components/banner): エラーや警告など重要なメッセージを目立つように表示し、ユーザーの注意を喚起するコンポーネントです。
- [Bottom Navigation](/components/bottom-navigation): 画面下部に配置するモバイルやタブレット向けのグローバルなタブナビゲーションです。
- [Button](/components/button): アクションをトリガーするためのクリック可能なコンポーネントです。
- [Chart](/components/chart): データビジュアライゼーションのためのチャートコンポーネントです。円グラフ、棒グラフ、折れ線グラフなどをサポートし、データの視覚化を容易にします。
- [Check Box](/components/check-box): ChoiceBoxにラベルを付けたコンポーネントです。複数の選択肢から、1つ以上を選択する際に使用します。
- [Choice Box](/components/choice-box): CheckBoxとRadioButtonからラベルを除いたコンポーネントです。カードやリストと併用して使用できます。
- [Dashboard Widget](/components/dashboard-widget): ダッシュボード画面で使うことを想定したコンポーネントです。データをサマライズして表示する際に使用します。
- [Data Table](/components/data-table): 構造化されたデータを表形式で表示・操作するコンポーネントです。ソート、選択、カスタムレンダリングの機能も提供します。
- [Date Picker](/components/date-picker): 日付を選択するためのコンポーネントです。カレンダー形式で日付を選択できます。
- [Divider](/components/divider): 視覚的に区切るためのコンポーネントです。コンテナ内でコンテンツをグループ化する際にも使用します。
- [Drawer](/components/drawer): メニューやナビゲーションを格納するコンポーネントです。主に表示領域が限られるモバイルやタブレットにおいて使用されます。
- [Dropdown Menu](/components/dropdown-menu): 複数のアクションを格納するためのコンポーネントです。メニュー内のアクションは、クリック時にイベントをトリガーします。アクションではなく、選択肢を表示する場合は、Selectを使用してください。
- [Icon Button](/components/icon-button): アクションをトリガーするためのクリック可能なコンポーネントです。アイコンを使用してアクションの内容を視覚的に伝えます。
- [List](/components/list): 関連する項目を縦に並べて、メニューや一覧を構成するためのコンポーネントです。
- [Modal Dialog](/components/modal-dialog): アプリケーションを覆うレイヤー上にダイアログを表示するコンポーネントです。Modal Dialogが表示されている間は、ユーザーはその他の操作ができなくなることに注意が必要です。
- [Notification Badge](/components/notification-badge): 未読の通知や新着情報をユーザーに知らせるためのコンポーネントです。
- [Pagination](/components/pagination): 複数ページにまたがるデータやコンテンツのページ切り替えを行うためのコンポーネントです。
- [Progress Indicator](/components/progress-indicator): ユーザーにアプリケーションの待機状態を視覚的に示すためのコンポーネントです。
- [Radio Button](/components/radio-button): ChoiceBoxにラベルを付けたコンポーネントです。複数の選択肢から、一つを排他的に選択する際に使用します。
- [Search](/components/search): 検索用途に特化した入力コンポーネントです。検索キーワードを入力した際に候補をサジェストする機能も持ちます。
- [Select](/components/select): 複数の選択肢を格納し、ユーザーは1つの選択肢を選ぶコンポーネントです。選択肢ではなくアクションを表示する場合は、DropdownMenuを使用してください。
- [Steps](/components/steps): プロセスの手順や進行状況を段階的に示すコンポーネントです。
- [Switch](/components/switch): オン/オフの2つの状態を切り替えるためのコンポーネントです。設定画面などでその状態を視覚的に伝えることができます。
- [Tabs](/components/tabs): 複数のビューを切り替えるためのコンポーネントです。TopAppBarやBottomNavigationはグローバルなナビゲーションとして使用しますが、Tabsはローカルなナビゲーションであることに注意してください。
- [Text Area](/components/text-area): 複数行のテキストを入力するためのコンポーネントです。Buttonなどと合わせてフォームを構成します。
- [Text Field](/components/text-field): 1行のテキストを入力するためのコンポーネントです。Buttonなどと合わせてフォームを構成します。複数行にはTextAreaを使用してください。
- [Toast](/components/toast): 画面上に一時的に表示される短い通知メッセージです。アクションの結果やエラーメッセージなどをユーザーに伝えるために使用します。
- [Tooltip](/components/tooltip): ホバーやフォーカス時に追加情報を表示する小さなポップアップです。要素の説明や補足情報を提供するために使用します。
- [Top App Bar](/components/top-app-bar): 画面上部に配置するモバイルやタブレット向けのグローバルなナビゲーションです。

## Terms

- [利用規約](/terms): Terms of use and licensing information

## Full Documentation

For complete documentation content including all details, visit: /llms-full.txt