color-system

カラーシステム

このコードベース向けに、コントラストを検証済みのカラートークンファイルを作成します — ランプ、セマンティックレイヤー、ダークモード — カラー理論の講義ではなく、計算過程を示します。基本原則: 色はリストではなくシステムです: すべての色相は完全な明度ランプとして提供され、コンポーネントはセマンティックトークンのみを消費し、テキスト/背景のペアは計算されたコントラスト比なしには出荷されません。

使用すべき場面 / 引き継ぎ

• パレット、ランプ、ダークモード、コントラスト修正、ステータス/インタラクティブカラー、テーマ設定に使用します。
• トークン基盤が存在しない → まず skills/frontend-design/design-foundation を実行するか、その開始点としてカラースライスを作成します。
• 「すべてが灰色で平坦 / 何が重要かわからない」は通常、パレットではなく階層の問題です → skills/frontend-design/visual-hierarchy-refactoring。
• 色を超えた完全な WCAG 監査 → skills/frontend-design/accessibility-excellence。

ステップ 1 — コードベースを調査する

1. パレットを収集します。 ソース + 設定全体で #[0-9a-fA-F]{3,8}\b、rgba?\(、hsla?\(、oklch\( を grep します。重複を排除し、出現頻度を数えます。ほぼ同一の値（ΔL < ~5）をクラスタリングします — 各クラスターは、ずれが生じた 1 つの意図された色です。
2. 既存のトークンを読み取ります。 Tailwind の theme.colors / @theme 変数 / CSS カスタムプロパティを確認します。ランプが存在するのか、単一の hex だけなのかを判断します。
3. 事実上のブランドカラーを特定します — 最も使用されている彩度の高い色相です。
4. ダークモードの状態を確認します: dark: クラス、prefers-color-scheme、.dark ブロック。
5. コントラストをスポットチェックします — コード内で見つかった最も一般的な 3〜5 のテキスト/背景ペアについて、WCAG 比を計算します。不合格はそのまま根拠に含めます。

ステップ 2 — ヒアリング

不足しているものだけを 1 回にまとめて質問します: 保持するブランドカラー、または新規に選ぶ（選ぶ場合はその性格: 信頼感/エネルギッシュ/プレミアム/親しみやすい）、そして ダークモード: 今、後で、または never。残りは推測します。止まらないでください: 明確な事実上のブランドカラーがあれば、それを保持し、前提を明示して進めます。

ステップ 3 — システムを構築する

1. ブランドランプ。 ブランドカラーを 11 段階の明度ランプ（50〜950）に展開し、色相はほぼ一定に保ち、両端では彩度を下げます。白いテキストに使用できるベースは、ほとんどの色相でステップ 600 付近になります。
2. ニュートラルランプ — 色味を帯びた、決して真のグレーではないもの。 ブランドの色相を大幅に脱彩度化し（おおよそ 5〜15% の彩度）、そこから gray-50…950 を構築します。#808080 と純粋な #000 は禁止です。これらはどんなブランドカラーの隣でも異物のように見えます。
3. アクセント/セカンダリ（製品がそれを必要とする場合のみ）。 調和ルールで選びます: まとまりがあり落ち着いた製品には類似色（±30〜60°）; 控えめに使う高エネルギーの CTA アクセントには補色（~180°）; UI が 3 つ以上のカテゴリを色分けする必要がある場合は三色配色。役割のない色相を追加しないでください。
4. ステータスカラー。 成功 ≈ 緑、警告 ≈ アンバー、エラー ≈ 赤、情報 ≈ シアン/青 — ブランドの温度感に寄せ、それぞれに少なくとも 100/600/700 のミニランプ（背景の淡色、ベース、淡色上のテキスト）を持たせます。
5. セマンティックレイヤー。 bg-primary/secondary/tertiary、text-primary/secondary/tertiary/disabled/inverse、border-primary/focus、interactive-primary/hover/active/disabled — ランプからマッピングします。コンポーネントはランプの値を直接参照しません。
6. ダークモード（スコープ内の場合）。 セマンティックトークンのみを再マッピングします: 背景は gray-900/950（決して #000 ではない）、テキストは gray-50/300、ブランドは 1 段階明るくシフト（ライトモードの 600 → ダークの 500）、振動する場合は少し脱彩度化します。すべてのペアを再検証します — ライトモードの比はそのまま移行できません。
7. 出荷するすべてのペアリングでコントラストを検証します。 WCAG 相対輝度比を計算します: 通常テキスト ≥4.5:1、大きなテキスト（≥24px、または ≥18.7px の太字）と UI コンポーネント/フォーカスリング ≥3:1。これが合否ゲートです。ペアが WCAG を通過しても弱く見える場合（彩度の高い中間色上の明るいテキストなど）、APCA（本文で Lc ≈ 60+）を助言的なタイブレーカーとして扱い、1 段階暗くします。
8. 色覚多様性への配慮。 ステータスカラーが唯一のシグナルであってはなりません — アイコン/ラベルと組み合わせます（赤/緑だけでは男性ユーザーの約 8% が判別できません）。赤対緑を唯一のカテゴリ区別として避けます; 青/オレンジが最も安全なコントラストペアです。

標準的な形（CSS 変数。検出されたスタックに合わせて調整）

:root {
  --brand-600: #2563EB;  --brand-700: #1D4ED8;   /* full 50–950 ramp in the real file */
  --gray-600: #475569;   --gray-900: #0F172A;    /* brand-tinted neutrals, full ramp */
  --red-600: #DC2626;    --red-100: #FEE2E2;     /* status mini-ramps: green/amber/red/cyan */

  --color-bg-primary: #FFFFFF;
  --color-text-primary: var(--gray-900);      /* on bg-primary: 17.8:1 ✓ */
  --color-text-secondary: var(--gray-600);    /* on bg-primary: 7.6:1 ✓ */
  --color-interactive-primary: var(--brand-600); /* white on it: 5.2:1 ✓ */
}
.dark {
  --color-bg-primary: var(--gray-950);
  --color-text-primary: var(--gray-50);
  --color-interactive-primary: var(--brand-500);
}

調和理論、色彩心理学、ランプ構築の技法、色覚多様性に対応したパレット:references/color-theory.md。

ステップ 4 — 組み込みと移行

検出されたエントリポイントにトークンを書き込みます（フォークせず拡張します）。ステップ 1 で特定した上位のドリフトクラスターを、トラフィックの多い 1〜3 ファイルで移行し、残りはマッピングします。

必須の出力形式

コードとあわせて、次のサマリーを提出します:

## Color tokens
[file path + full code]

## Palette decisions
- Brand: [hex] — [kept from code / chosen for [personality]]
- Neutrals: tinted toward [hue]
- Harmony: [mono/analogous/complementary/triadic] because [job it does]
- Dark mode: [shipped/deferred] — strategy: [.dark class / media query]

## Contrast verification
| Pair | Ratio | Standard | Pass |
| text-primary on bg-primary (light) | 17.8:1 | 4.5:1 | ✓ |
| white on interactive-primary | 5.2:1 | 4.5:1 | ✓ |
| text-secondary on bg-primary (dark) | ... | ... | ... |
[every shipped text and UI pairing, both modes]

## Migration map
| Found (cluster) | Count | Replace with |
| #3B82F6 / #3b82f7 / #3a80f0 | 23 | var(--color-interactive-primary) |
| ... |

## Migrated now
[files edited]

品質基準（提出前に確認）

• 出荷するすべてのテキスト／背景のペアに、表内で計算済みのコントラスト比がある。すべて ≥4.5:1（通常テキスト）／≥3:1（大きなテキスト + UI）、両モードとも
• ニュートラルはブランドで色味を付与。#808080 は使わない、純粋な #000 の背景も使わない
• すべての色相が単独の hex ではなくランプとして存在する。各色相には明示された役割がある
• コンポーネント／例が参照するのはセマンティックトークンのみ
• ステータスの意味を色だけで伝えていない（アイコン／ラベルを併用）
• ダークモード:背景はダークグレー、ブランドは一段明るくし、すべてのペアを再検証
• フォーカスインジケーターの色は、隣接する色に対して ≥3:1
• 移行マップが、ステップ 1 で見つかったすべてのドリフトクラスターを網羅している

統合

• 消費するもの:skills/frontend-design/design-foundation のトークンスケルトン、skills/frontend-design/typography-system のテキストサイズ（大きなテキストのコントラスト閾値用）。
• 生成するもの:skills/frontend-design/visual-hierarchy-refactoring（明度ベースのコントラスト階層）、skills/frontend-design/component-architecture（コンポーネントの色バインディング）が消費するカラートークン。また、skills/frontend-design/accessibility-excellence による監査対象。

参照

• references/color-theory.md — 例を交えた調和の技法、色相ごとの色彩心理学、ランプを手作業で構築する方法、色覚多様性に安全なパレット、ダークモードの落とし穴を詳しく解説。パレットをゼロから選ぶときや、おかしく見えるランプをデバッグするときに読んでください。