色

考え方

色は Primitive（11スケール × 10段の生の色）→ Semantic（用途に結び付いた役割）→ Component（部品固有の役割）の3層で管理します。コンポーネントの CSS は Primitive を直接参照せず、必ず Semantic または Component を参照します（トークン参照）。

現行実装の Semantic は text / bg / bgFeedback / border / state / icon / surface の7グループです。トークンで定義した Carbon 寄りの11グループ（page / layer / field などを分離した形）は今後の実装（Issue #66 の後続タスク）で移行する仕様で、現時点のコードとは1対1に対応しません。下記の一覧は現行コード（DefaultTheme.ts）の値です。

ダークモードは Primitive パレットをライトと共有し、Semantic だけを暗背景向けに再導出します（buildDarkSemanticColors）。ニュートラル（gray）を反転しつつ、text グループの primary〜info（disabled/inverseを除く）は両モードともWCAG AA（4.5:1）を満たすステップに調整済みです（実装コード中のコメントに理由が残っています）。border / icon は用途によって基準を満たさないものが混在します（下記コントラスト比を参照）。inverse は暗い面での使用を前提にしているため bg.primary（明るい面）との比較では低く出ます。disabled や装飾目的の値は、無効化された要素・純粋装飾要素としてWCAG 1.4.11の対象外のため、低いコントラストのままで問題ありません。

一覧

値は DefaultTheme.ts / DarkTheme.ts をビルドした結果から自動生成しています（手書きコピーはありません）。コントラスト比は WCAG 2.x の相対輝度式で都度計算しています。

Primitive（全11スケール × 10段）

ライト/ダーク共通のパレットです（colors.<name>）。値を変えたい場合は createTheme({ colors: { ... } }) で上書きします。

プライマリ（ブランド） (colors.primary)

step	色	hex
50		`#EFF6FF`
100		`#DBEAFE`
200		`#BFDBFE`
300		`#93C5FD`
400		`#60A5FA`
500		`#2563EB`
600		`#1D4ED8`
700		`#1E40AF`
800		`#1E3A8A`
900		`#172554`

アンバー（アクセント） (colors.amber)

step	色	hex
50		`#FFFBEB`
100		`#FEF3C7`
200		`#FDE68A`
300		`#FCD34D`
400		`#FBBF24`
500		`#F59E0B`
600		`#D97706`
700		`#B45309`
800		`#92400E`
900		`#78350F`

ブルー（分類用） (colors.blue)

step	色	hex
50		`#E3F2FD`
100		`#BBDEFB`
200		`#90CAF9`
300		`#64B5F6`
400		`#42A5F5`
500		`#2196F3`
600		`#1E88E5`
700		`#1976D2`
800		`#1565C0`
900		`#0D47A1`

グレー (colors.gray)

step	色	hex
50		`#FAFAFA`
100		`#F5F5F5`
200		`#E5E5E5`
300		`#D4D4D4`
400		`#A3A3A3`
500		`#737373`
600		`#525252`
700		`#404040`
800		`#262626`
900		`#171717`

レッド（エラー・危険） (colors.red)

step	色	hex
50		`#FFEBEE`
100		`#FFCDD2`
200		`#EF9A9A`
300		`#E57373`
400		`#EF5350`
500		`#F44336`
600		`#E53935`
700		`#D32F2F`
800		`#C62828`
900		`#B71C1C`

イエロー（警告） (colors.yellow)

step	色	hex
50		`#FFF8E1`
100		`#FFECB3`
200		`#FFE082`
300		`#FFD54F`
400		`#FFC107`
500		`#FFAB00`
600		`#FF8F00`
700		`#FF6F00`
800		`#E65100`
900		`#BF360C`

グリーン（成功） (colors.green)

step	色	hex
50		`#E8F5E9`
100		`#C8E6C9`
200		`#A5D6A7`
300		`#81C784`
400		`#66BB6A`
500		`#4CAF50`
600		`#43A047`
700		`#388E3C`
800		`#2E7D32`
900		`#1B5E20`

パープル（分類用） (colors.purple)

step	色	hex
50		`#F3E5F5`
100		`#E1BEE7`
200		`#CE93D8`
300		`#BA68C8`
400		`#AB47BC`
500		`#9C27B0`
600		`#8E24AA`
700		`#7B1FA2`
800		`#6A1B9A`
900		`#4A148C`

ティール（情報・リンク） (colors.teal)

step	色	hex
50		`#E0F2F1`
100		`#B2DFDB`
200		`#80CBC4`
300		`#4DB6AC`
400		`#26A69A`
500		`#009688`
600		`#00897B`
700		`#00796B`
800		`#00695C`
900		`#004D40`

ピンク（分類用） (colors.pink)

step	色	hex
50		`#FCE4EC`
100		`#F8BBD9`
200		`#F48FB1`
300		`#F06292`
400		`#EC407A`
500		`#E91E63`
600		`#D81B60`
700		`#C2185B`
800		`#AD1457`
900		`#880E4F`

ブラウン（分類用） (colors.brown)

step	色	hex
50		`#EFEBE9`
100		`#D7CCC8`
200		`#BCAAA4`
300		`#A1887F`
400		`#8D6E63`
500		`#795548`
600		`#6D4C41`
700		`#5D4037`
800		`#4E342E`
900		`#3E2723`

白・無効色: colors.white = #FFFFFF、colors.disabled = #E4E4E7

Semantic（7グループ、ライト/ダーク対比）

semantic.<group>.<role> です。text / border / icon は bg.primary との組み合わせでWCAGコントラスト比を併記します（4.5:1がAA本文テキストの基準、3:1がUI部品・大文字テキストの基準）。この比較は目安です。inverse 系は逆の背景（暗い面）で使う前提のため bg.primary（明るい面）との比較では低く出ます。disabled や装飾目的のborderはWCAG 1.4.11の対象外（無効化された要素・純粋に装飾的な要素は基準を満たす必要がない）のため、低くても契約違反ではありません。

text

role	ライト	ダーク	コントラスト比（対 bg.primary）
`primary`	`#171717`	`#FAFAFA`	ライト 17.93:1 / ダーク 17.18:1
`secondary`	`#404040`	`#D4D4D4`	ライト 10.37:1 / ダーク 12.09:1
`tertiary`	`#737373`	`#A3A3A3`	ライト 4.74:1 / ダーク 7.11:1
`inverse`	`#FAFAFA`	`#171717`	ライト 1.04:1 / ダーク 1.00:1
`disabled`	`#A3A3A3`	`#525252`	ライト 2.52:1 / ダーク 2.29:1
`link`	`#00796B`	`#4DB6AC`	ライト 5.32:1 / ダーク 7.34:1
`brand`	`#2563EB`	`#93C5FD`	ライト 5.17:1 / ダーク 9.94:1
`accent`	`#B45309`	`#FCD34D`	ライト 5.02:1 / ダーク 12.43:1
`error`	`#C62828`	`#FFCDD2`	ライト 5.62:1 / ダーク 12.73:1
`success`	`#2E7D32`	`#C8E6C9`	ライト 5.13:1 / ダーク 13.33:1
`warning`	`#BF360C`	`#FFECB3`	ライト 5.60:1 / ダーク 15.28:1
`info`	`#00796B`	`#B2DFDB`	ライト 5.32:1 / ダーク 12.35:1

role	ライト	ダーク
`primary`	`#FFFFFF`	`#171717`
`secondary`	`#FAFAFA`	`#262626`
`tertiary`	`#F5F5F5`	`#404040`
`inverse`	`#171717`	`#FFFFFF`
`brand`	`#2563EB`	`#2563EB`
`brandSubtle`	`#EFF6FF`	`#172554`
`accent`	`#F59E0B`	`#F59E0B`
`accentSubtle`	`#FFFBEB`	`#78350F`
`disabled`	`#F5F5F5`	`#262626`
`overlay`	`#171717`	`#171717`
`skeletonBase`	`#E5E5E5`	`#404040`
`skeletonHighlight`	`#F5F5F5`	`#525252`
`danger`	`#F44336`	`#F44336`

bgFeedback

role	ライト	ダーク
`success`	`#E8F5E9`	`#1B5E20`
`error`	`#FFEBEE`	`#B71C1C`
`warning`	`#FFF8E1`	`#BF360C`
`info`	`#E0F2F1`	`#004D40`

border

role	ライト	ダーク	コントラスト比（対 bg.primary）
`primary`	`#D4D4D4`	`#737373`	ライト 1.48:1 / ダーク 3.78:1
`secondary`	`#E5E5E5`	`#A3A3A3`	ライト 1.26:1 / ダーク 7.11:1
`strong`	`#737373`	`#A3A3A3`	ライト 4.74:1 / ダーク 7.11:1
`disabled`	`#E5E5E5`	`#262626`	ライト 1.26:1 / ダーク 1.18:1
`focus`	`#2563EB`	`#60A5FA`	ライト 5.17:1 / ダーク 7.05:1
`brand`	`#2563EB`	`#60A5FA`	ライト 5.17:1 / ダーク 7.05:1
`accent`	`#F59E0B`	`#FBBF24`	ライト 2.15:1 / ダーク 10.74:1
`error`	`#D32F2F`	`#EF9A9A`	ライト 4.98:1 / ダーク 8.33:1
`success`	`#388E3C`	`#A5D6A7`	ライト 4.12:1 / ダーク 10.91:1
`warning`	`#E65100`	`#FFE082`	ライト 3.79:1 / ダーク 13.86:1
`info`	`#00796B`	`#80CBC4`	ライト 5.32:1 / ダーク 9.61:1

state

role	ライト	ダーク
`hoverPrimary`	`#60A5FA`	`#60A5FA`
`hoverSecondary`	`#D4D4D4`	`#525252`
`hoverDanger`	`#EF5350`	`#EF5350`
`pressedPrimary`	`#93C5FD`	`#93C5FD`
`pressedSecondary`	`#F5F5F5`	`#404040`
`pressedDanger`	`#E57373`	`#E57373`
`selected`	`#EFF6FF`	`#172554`
`focusRing`	`#2563EB`	`#60A5FA`

icon

role	ライト	ダーク	コントラスト比（対 bg.primary）
`primary`	`#404040`	`#D4D4D4`	ライト 10.37:1 / ダーク 12.09:1
`secondary`	`#737373`	`#737373`	ライト 4.74:1 / ダーク 3.78:1
`inverse`	`#FAFAFA`	`#171717`	ライト 1.04:1 / ダーク 1.00:1
`disabled`	`#A3A3A3`	`#525252`	ライト 2.52:1 / ダーク 2.29:1
`brand`	`#2563EB`	`#60A5FA`	ライト 5.17:1 / ダーク 7.05:1
`accent`	`#F59E0B`	`#FBBF24`	ライト 2.15:1 / ダーク 10.74:1
`success`	`#4CAF50`	`#66BB6A`	ライト 2.78:1 / ダーク 7.58:1
`error`	`#F44336`	`#EF5350`	ライト 3.68:1 / ダーク 5.14:1
`warning`	`#FFAB00`	`#FFC107`	ライト 1.90:1 / ダーク 11.00:1
`info`	`#009688`	`#26A69A`	ライト 3.67:1 / ダーク 5.98:1

surface

role	ライト	ダーク
`default`	`#FFFFFF`	`#262626`
`raised`	`#FFFFFF`	`#404040`
`sunken`	`#F5F5F5`	`#171717`

使い分け

Primitive はコンポーネントの実装からは直接使いません。Semantic/Component を定義するときの材料です。
Semantic の text / border / icon はコントラスト確保のため、同じ色相でも役割によって参照する段（step）が異なります（例: text.warning は yellow[900]、icon.warning は yellow[500]。背景の有無で必要なコントラストが違うため）。
bg.brandSubtle / bgFeedback.* は塗りつぶしではなく「控えめな背景」用です。選択行・Badge・Notification など、ブランド/フィードバック色を面で使いたいが強すぎない場面で使います。
ダーク対応が必要なコンポーネントは useTheme() から取得した値を使う限り自動的に追従します。colorScheme で切り替わるのは ThemeProvider 配下だけです。

やってはいけないこと

色の実値を直接書かない（background: #ED7A16 のようなハードコード禁止。.claude/rules/coding-rules.md のルール）。
useTheme() の値をインラインスタイル（style={{ color: theme.semantic.text.primary }}）に渡さない。styled-components の transient props（$color 等）で渡し、静的スタイルに焼き込まない。
コンポーネントの CSS から Primitive（colors.gray[500] 等）を直接参照しない。ブランド変更時に個別修正が必要になります。
state.hoverPrimary のような「対象が名前から分からない」トークンを新設しない。今後の11グループ移行では対象と状態を一体の名前にします（bg.brandHover 等）。