ブランドカラーシステム — プライマリ、セカンダリ、アクセント

ブランドカラーシステムの構造化

適切に構造化されたブランドカラーシステムは通常、3つのカラーファミリーで構成されます：プライマリ（メインブランドアイデンティティ）、セカンダリ（サポートコントラスト）、アクセント（CTA用ハイライト）。各ファミリーにはフルシェードスケールがあります。

ファミリーの定義

:root {
  /* Primary — ブランドブルー */
  --primary-50:  #eff6ff;
  --primary-500: #3b82f6;
  --primary-900: #1e3a5f;

  /* Secondary — ウォームグレー */
  --secondary-50:  #fafaf9;
  --secondary-500: #78716c;
  --secondary-900: #1c1917;

  /* Accent — ビビッドオレンジ */
  --accent-50:  #fff7ed;
  --accent-500: #f97316;
  --accent-900: #7c2d12;
}

使用ガイドライン

カラーファミリー	用途
Primary	ナビゲーション、ヘッダー、リンク、プライマリボタン
Secondary	本文テキスト、背景、ボーダー、ニュートラルサーフェス
Accent	CTA、通知、バッジ、ハイライト

60-30-10ルール

インテリアデザイナーはカラーバランスにこの比率を使用します：**60%**ドミナント（セカンダリ/ニュートラル）、**30%**セカンダリ（プライマリブランド）、**10%**アクセント。Webデザインでは：

• 60% — ページ背景、カードサーフェス、本文テキスト（セカンダリパレット）
• 30% — ナビゲーション、ヘッダー、セクションハイライト（プライマリパレット）
• 10% — ボタン、リンク、バッジ（アクセントパレット）

ステータスカラーの拡張

ブランドカラー以外に、機能的なステータスカラーを追加します：

:root {
  --success: #22c55e;
  --warning: #eab308;
  --error:   #ef4444;
  --info:    #3b82f6;
}

これらはブランドアイデンティティの一部であるべきではありません — 製品間で標準的で認識しやすいものにしてください。

調和の確保

プライマリとアクセントカラーは、調和のためにカラーホイール上で約30度離れた位置（類似色）、またはコントラストのために150〜180度離れた位置（補色）を選択します。ニュートラルなセカンダリはプライマリのアンダートーンを共有すべきです。