Color
Spice Factory Design System
配色の単一情報源。ブランド 3 色（Mustard Yellow / Pepper Black / White）に、Mustard Yellow スケールと Gray スケール、用途定義の Semantic 層を重ねる。「Mustard Yellow 一系列で割り切る」が基本方針。WCAG コントラスト 4.5:1 を超える本文 accent は yellow.800、大文字 accent は yellow.700 を用い、原色の yellow.500 は本文色には使わない。
ブランド色 3 色 + 2 スケール（Mustard Yellow / Gray）+ Semantic 層。
Mustard Yellow 一系列で割り切る。yellow.500 はブランド色、yellow.700 は大文字 accent (AA Large)、yellow.800 は本文 accent (AA)。
ブランド 3 色（LOCKED）
Mustard Yellow
Pepper Black
White
Mustard Yellow Scale（H=51°）
500 = ブランド色、700 = 大文字 accent (AA Large 3.30:1)、800 = 本文 accent (AA 5.52:1)。
| Token | HEX | Preview | 用途 |
|---|---|---|---|
| yellow.50 | #FFFCE5 | 極淡背景 | |
| yellow.100 | #FFF7B8 | 淡背景 | |
| yellow.200 | #FFF080 | アクセント弱 | |
| yellow.300 | #FFE852 | アクセント | |
| yellow.400 | #FFE12A | アクセント強 | |
| yellow.500 | #FFDA00 | ブランド色（変更不可） | |
| yellow.600 | #D9B900 | 暗めアクセント | |
| yellow.700 | #A68C00 | 大文字 accent (AA Large) | |
| yellow.800 | #7A6600 | 本文 accent (AA) | |
| yellow.900 | #4D4000 | 最暗 |
Gray Scale
| Token | HEX | Preview | 用途 |
|---|---|---|---|
| gray.50 | #FAFAFA | 極淡背景 / surface.subtle | |
| gray.100 | #F5F5F5 | 淡背景 / surface.muted | |
| gray.200 | #E5E5E5 | 区切り線 / border.default | |
| gray.300 | #D4D4D4 | border 弱 | |
| gray.400 | #A3A3A3 | placeholder / border.strong / text.disabled | |
| gray.500 | #737373 | text.tertiary | |
| gray.600 | #525252 | サブ文字 | |
| gray.700 | #404040 | text.secondary | |
| gray.800 | #262626 | 強文字 | |
| gray.900 | #000000 | Pepper Black / text.primary |
Semantic
| Token | Preview | 用途 |
|---|---|---|
| ds.color.text.primary | 本文 | |
| ds.color.text.secondary | 副次的文字 | |
| ds.color.text.tertiary | 補助文字 | |
| ds.color.text.disabled | 無効状態 | |
| ds.color.text.inverse | 暗背景上の文字 | |
| ds.color.text.accent | アクセント本文（白背景・リンク） | |
| ds.color.text.accentLarge | 大見出し・大ボタンラベル accent | |
| ds.color.surface.default | 標準背景（ページ・カード） | |
| ds.color.surface.subtle | 弱背景（セクション区切り・サイドバー） | |
| ds.color.surface.muted | より弱（row hover・disabled） | |
| ds.color.surface.sunken | 凹み（フォーム背景・コードブロック） | |
| ds.color.surface.raised | 白上の白カード（border で区別） | |
| ds.color.surface.overlay | モーダル背後の暗幕 | |
| ds.color.surface.inverse | 暗背景 | |
| ds.color.surface.brand | ブランドアクセント背景 | |
| ds.color.border.subtle | 罫線（table row・list 区切り） | |
| ds.color.border.default | 標準区切り（カード境界・入力枠） | |
| ds.color.border.strong | 強調（選択中） | |
| ds.color.border.focus | フォーカスリング | |
| ds.color.border.inverse | 暗背景上のボーダー |
WCAG コントラスト検証（実測）
右端「見え方」列は実際のフォント・サイズで描画。本文用は 15px、Large 用は 24px。各サンプルは 合格していない場合は注意マークを付ける。
| 組み合わせ | 比率 | AA Large (3:1) | AA (4.5:1) | AAA (7:1) | 見え方 |
|---|---|---|---|---|---|
| text.primary on white | 21.0 : 1 | ✓ | ✓ | ✓ | あア亜 Aa 本文サンプル |
| text.secondary on white | 10.4 : 1 | ✓ | ✓ | ✓ | あア亜 Aa 本文サンプル |
| text.tertiary on white | 4.83 : 1 | ✓ | ✓ | — | あア亜 Aa 本文サンプル |
| text.disabled on white | 2.83 : 1 | — | — | — | あア亜 Aa 本文サンプル本文 NG |
| text.accent (yellow.800) on white | 5.52 : 1 | ✓ | ✓ | — | あア亜 Aa 本文サンプル |
| text.accentLarge (yellow.700) on white | 3.30 : 1 | ✓ | — | — | Display 大見出しLarge のみ可 |
| text.inverse on surface.inverse | 21.0 : 1 | ✓ | ✓ | ✓ | あア亜 Aa 本文サンプル |
| text.primary on surface.brand (yellow.500) | 14.8 : 1 | ✓ | ✓ | ✓ | あア亜 Aa 本文サンプル |
| yellow.500 on white（参考・本文 NG） | 1.37 : 1 | — | — | — | あア亜 Aa 本文サンプル文字色 NG |
既知の落とし穴
- yellow.500 を文字色に使わない（1.37:1）。背景・装飾アクセントのみ
- yellow.700 は大文字 accent のみ（3.30:1、AA Large）。18pt 以上または 14pt 以上 bold で使用。本文には不可
- 本文 accent は yellow.800（5.52:1、AA）を使う
- ロゴ misuse 規定の「指定以外の色を使用しない」はロゴ自体への規定であり、UI コンポーネントには適用しない