基礎

デザインシステムの基礎は、コンポーネントが参照する共通の契約です。色、文字、余白、角丸、影、レイヤー、レスポンシブ境界を同じ規則で管理することで、個別のコンポーネントが増えても見た目と操作感を保てます。

このページの読み方

まず トークン で3層モデルと命名規則を確認してください。トークンページは ThemeType.ts を実装できる粒度で契約を定め、各ページではカテゴリごとの値と使用例を説明します。

基礎ページに値を重複して定義しないのは、仕様と実装のずれを防ぐためです。値の正本はテーマ定義とし、ドキュメントでは「どの意味のトークンを、どの場面で使うか」を扱います。

設計原則

• 意味から参照する: コンポーネントはPrimitiveではなくSemanticまたはComponentを参照します。
• 状態を役割に含める: hoverやdisabledを独立グループにせず、fieldやlayerなどの役割の中で表します。
• テーマで差し替える: ブランドやダークモードの変更は、コンポーネントのコードを変えずに行います。
• 境界を検証する: 色のコントラスト、フォーカス表示、レスポンシブ境界はトークンの契約として確認します。

カテゴリ

• トークン — Primitive・Semantic・Component、命名、状態、上書き契約
• カラー — 色のスケールとコントラスト
• タイポグラフィ — フォント、サイズ、行の高さ
• スペーシング — 余白と寸法のスケール
• 角丸 — radiusのサイズと使い分け
• エレベーション — 影と重なりの表現
• レイヤー — 面の階層と状態
• レスポンシブ — ブレークポイントとメディアクエリ
• アイコン — アイコンのサイズ、色、アクセシビリティ

実装への接続

テーマを追加するときは、まず全Primitiveを揃え、SemanticでUI上の意味へ割り当てます。コンポーネントのCSSはSemanticまたはComponentだけを参照し、個別のpropsで調整する値はインスタンス変数として閉じ込めます。

この順序を守ると、テーマの型が不足を検出し、コンポーネントがブランド固有の値へ結び付くことを防げます。実装例は各コンポーネントページと、テーマのページを参照してください。