カラーシステムとブランドパレット

1）なぜ色を形式化するか

• ブランド認知度と視覚的一貫性、
• 可読性と可用性（WCAG）、
• スケーリングインターフェイス（テーマ、プラットフォーム、ロケール）、
• 予測可能なA/B実験（コントラスト、CTR、エラー）。

2）システム基盤： モデルとメトリクス

OKLCH（推奨）：知覚的に均一で、シェード'H'を維持しながら軽さ'L'と彩度'C'を制御するのが便利です。
実験室/LCH：また合います；OKLCHはより安定しています。
sRGB：有限の表示スペース；合計は常にsRGBおよびWCAGで検証されます。
コントラスト（WCAG 2。2）：基本テキスト≥ 4。5：1、大きい≥ 3：1；重要な通知-可能な場合はAAA （7：1）を目指します。

3）システムの層： ブランドから意味論まで

1.ブランドコア：1-2ブランドシェード（+サポートアクセント）。
2.インターフェイスセマンティクス：ロール（'primary'、 'secondary'、 'success'、 'warning'、 'danger'、 'info'、 'neutral'）。

3.トーンスケール： 明度ステップ（例：25/50/100...900).

4.「光」/「暗い」（+ハイコントラスト、AMOLED）。
5.状態：'default/hover/active/focus/disabled'。
6.コンテキスト：サーフェス（'bg/base'、 'bg/subtle'、 'bg/elevated'）とテキスト（'fg/primary'、 'fg/secondary'、 'fg/muted'）。
7.データビジュアライゼーション：個別の離散パレットと連続パレット。

4）ブランドの中心： 選択および拘束

［色相］を選択し、明るいテーマと暗いテーマ（多くの場合L≈0でブランドの作業軽量性を定義します。60–0.ライトおよび'L≈0の満ちるボタンのための70'。70–0.80'テキスト/暗闇のアイコン）。
Limit chrome 'C'：高い'C'はバナーでは美しいですが、UIでは読みやすさを壊します。「マーケティング」（リッチ）と「食料品」（より抑制）の2つのバージョンを維持します。
変数main （'brand/primary'）、 alternative （'brand/alt'）、 neutral support （'neutral'）を修正しました。

5）トーンスケール

• OKLCHの場合、'L'ステップを移動します（例：0.98→0.90→0.80→…→0.18）、そして「C」はわずかに暗闇の中で「汚れ」と「濁り」を避けるためにスケールの端に減少します。
• チェックポイントを修正：'50/100/300/500 （key ）/700/900'。
• 各ステップで、ベースバックグラウンドと予想されるテキストカラーとのペアのコントラストを確認します。

ブランド/プライマリスケールの例（OKLCH、おおよその）

brand. primary. 50  = oklch(0. 98 0. 03 230)
brand. primary. 100 = oklch(0. 94 0. 05 230)
brand. primary. 300 = oklch(0. 86 0. 08 230)
brand. primary. 500 = oklch(0. 74 0. 10,230) # keytone brand. primary. 700 = oklch(0. 56 0. 09 230)
brand. primary. 900 = oklch(0. 32 0. 07 230)

6）セマンティックな役割とマッピング

別のブランドと意味：「成功」はブランドグリーンである必要はありません。

role. primary. bg    -> brand. primary. 500 role. primary. text   -> fg. on-primary     # ≥ 4. 5-1 to the role. primary. bg role. success. bg    -> green. 500 role. warning. bg    -> amber. 500 role. danger. bg    -> red. 500 role. info. bg     -> blue. 500 role. neutral. bg    -> gray. 200/700 (light/dark)

'on-'テキストは自動的に計算されます（第10章を参照）。

7）明るい/暗い主題および表面

light:
bg/base   = oklch(0. 98 0. 01 260)
bg/subtle  = oklch(0. 96 0. 01 260)
bg/elevated = oklch(0. 93 0. 01 260)
fg/primary  = oklch(0. 18 0. 03 260) # ≈7:1 к bg/base fg/secondary = oklch(0. 32 0. 03 260) # ≥4. 5:1 border    = oklch(0. 80 0. 02 260)

dark:
bg/base   = oklch(0. 16 0. 01 260)
bg/subtle  = oklch(0. 20 0. 01 260)
bg/elevated = oklch(0. 24 0. 01 260)
fg/primary  = oklch(0. 90 0. 02 260)
fg/secondary = oklch(0. 78 0. 02 260)
border    = oklch(0. 34 0. 02 260)

両方のテーマで対照的な目標を維持する。ピュアブラックの「ブラインド」ホワイトは避けてください-'L'バックグラウンドを~ 0に上げます。16.

8）状態とインタラクティブ

ロールごとに、状態を制御する'Δ L'と'Δ C'に設定します':

button/primary:
default. bg = brand. primary. 500 hover. bg  = brand. primary. 500 with +ΔC(0. 01) -ΔL(0. 02)
active. bg = brand. primary. 700 focus. ring = brand. primary. 300 # ring contrast ≥ 3:1 to the disabled environment. bg= neutral. 200 (light) / neutral. 700 (dark)
text. on  = auto-contrast(default. bg)    # ≥ 4. 5:1

9）責任とWCAG

コントロールの基本的なテキストとアイコンは≥ 4です。5:1.

主なシステム通知（KYC/AML、 18+、支払いエラー）-AAA （7：1）を目指します。
フィールドの状態と境界-少なくとも3：1。
リンクを色（アンダースコア/フォーカススタイル）だけでなく区別します。

10）オートフィットコントラストテキスト（'on-'）

ロジック： コンポーネントの塗りつぶしを選択するとき、'on-color'を計算します':

1.OKLCHによると、predlagを決定します。text 'L_on'で'（L_text vs L_bg） ≥ 4。5:1`.

2.クロムが高い場合、'C_text'を0に下げます。01–0.03.

3.暗いテーマの場合は、'L_on'を別の0に上げます。02–0.04グレアをオフセットします。

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11）データの可視化

カテゴリカルパレット：色の失明に強い8-12色（代替標識なしで赤緑のペアを避けてください）。
連続：'bg/elevated'からシグネチャのコントラスト制御でアクセントに。
色なしで識別可能なパターン/マーカーを追加します。

12）国際文脈（文化協会）

局所的な意味合いを考慮する（例：赤-危険/注意；金-勝利/賞金）。
iGamingの場合：1つの画面でブランドのアクセントとの成功/危険の競合を避けます。図像と署名は「明るさ」よりも重要です。

13）設計システムへの統合

13.1ネーミングトークン

color.{theme}.{role    surface    brand}.{state    step}
color examples. light. brand. primary. 500 color. dark. role. success. bg color. light. surface. bg. base color. light. fg. on-primary

13.2トークン（JSON/スタイル辞書）

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0. 98 0. 01 260)"} },
"brand":  { "primary": { "500": "oklch(0. 74 0. 10 230)" } },
"role":  { "primary": { "bg": "{color. light. brand. primary. 500}" },
"danger": { "bg": "oklch(0. 62 0. 12 25)" } },
"fg": { "primary": "oklch(0. 18 0. 03 260)",
"on-primary": "auto({color. light. role. primary. bg},4. 5)" }
}
}
}

13.3 CSS変数（テーマレイヤー）

css
:root[data-theme="light"] {
--bg-base: oklch(0. 98 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 18 0. 03 260);
--on-primary: color-contrast (var (--brand-primary-500)) ;/auto-fit/
}
[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 90 0. 02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13.4 Figma/ドキュメント

コンポーネントはトークンのみを使用します。ダイレクトHEX/SRGBはリンタによって禁止されています。
ライブラリ-ページ「コントラストマトリックス」：テーブル'fg × bg'実際の係数。

14）品質管理プロセス

デザイン：アートボードのコントラストチェック（両方のモード）、色の失明のための個別のプリセット。
コード内：ユニットヘルパーはコントラストを計算し、違反に陥る。重要なスクリーンのための視覚的なスナップショット。
CI/CD：すべてのトークンと状態のペアをチェックし、コンポーネント、テーマ、実際の値でレポートします。

15） iGamingの詳細

プロモーションとトーナメント：背景のオーバーレイと'C'拘束を使用して、テキストが'沈む'のを防ぎます。
責任ある通知（制限、18+、リスク）-誠実にAAA。
メトリック/テーブル：色だけではなく、図形やコントラストによって数値と変化の兆候を区別します。

16）実装チェックリスト

• ブランドシェードとそのトーンスケール（OKLCH）が定義されています。
• 2つのテーマには役割、状態、およびサーフェスが設定されます。
• ターゲットコントラストを持つ自動生成'on-'。
• 'fg × bg'行列とCIのWCAGテスト。
• datavizの個々のパレット（色覚障害をサポート）。
• Linterスタイルは「raw」色を禁止します。
• ガイドラインの例外と理由のページ。

17）アンチパターン

1つのUX信号で成功/エラーとブランド重視をミックスします。
階層の飽和にのみ依存します。
ライト/ダークを同期しないでください（テーマの1つで「左」コントラスト）。
トークンのないハードHEX→制御されていないインターフェイスドリフト。

概要

上から下へパレットを構築する：ブランドコア→セマンティックロール→トーンスケール→テーマ→状態。OKLCH、ピントークンで作業し、'on-'とWCAGチェックを自動化します。別に、datavizのパレットを入力します。これにより、ブランドの一貫性、可読性、製品の拡張性が向上します。