# デザイントークン

組織共通のデザイントークン仕様。UI 実装および AI によるデザイン再現の単一の情報源。
機械可読な値は [`design-tokens.json`](/design-tokens.json) と同一。

---

## カラー

### ブランド

| トークン | 値 | 用途 |
| --- | --- | --- |
| `color.brand.primary` | `#2563eb` | 主要アクション・ブランドカラー |
| `color.brand.primaryHover` | `#1d4ed8` | primary のホバー時 |
| `color.brand.primaryActive` | `#1e40af` | primary の押下時 |

### セマンティック

| トークン | 値 | 用途 |
| --- | --- | --- |
| `color.semantic.danger` | `#dc2626` | 破壊的操作・エラー |
| `color.semantic.dangerHover` | `#b91c1c` | danger のホバー時 |
| `color.semantic.success` | `#16a34a` | 成功・完了 |
| `color.semantic.warning` | `#d97706` | 警告・注意 |

### ニュートラル

| トークン | 値 |
| --- | --- |
| `color.neutral.50` | `#f9fafb` |
| `color.neutral.100` | `#f3f4f6` |
| `color.neutral.200` | `#e5e7eb` |
| `color.neutral.300` | `#d1d5db` |
| `color.neutral.400` | `#9ca3af` |
| `color.neutral.500` | `#6b7280` |
| `color.neutral.700` | `#374151` |
| `color.neutral.900` | `#111827` |

### テキスト / サーフェス

| トークン | 値 | 用途 |
| --- | --- | --- |
| `color.text.default` | `#111827` | 本文テキスト |
| `color.text.muted` | `#6b7280` | 補助テキスト |
| `color.text.onBrand` | `#ffffff` | ブランド色背景上のテキスト |
| `color.surface.background` | `#ffffff` | ページ背景 |
| `color.surface.raised` | `#f9fafb` | カード・パネル背景 |
| `color.surface.border` | `#d1d5db` | 境界線 |

---

## タイポグラフィ

| トークン | 値 |
| --- | --- |
| `typography.fontFamily.base` | `system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` |
| `typography.fontFamily.mono` | `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace` |
| `typography.fontSize.xs` | `12px` |
| `typography.fontSize.sm` | `14px` |
| `typography.fontSize.base` | `16px` |
| `typography.fontSize.lg` | `18px` |
| `typography.fontSize.xl` | `20px` |
| `typography.fontSize.2xl` | `24px` |
| `typography.fontWeight.regular` | `400` |
| `typography.fontWeight.medium` | `500` |
| `typography.fontWeight.semibold` | `600` |
| `typography.fontWeight.bold` | `700` |
| `typography.lineHeight.tight` | `1.25` |
| `typography.lineHeight.normal` | `1.5` |
| `typography.lineHeight.relaxed` | `1.75` |

---

## スペーシング（4px 基準）

| トークン | 値 |
| --- | --- |
| `spacing.0` | `0px` |
| `spacing.1` | `4px` |
| `spacing.2` | `8px` |
| `spacing.3` | `12px` |
| `spacing.4` | `16px` |
| `spacing.5` | `20px` |
| `spacing.6` | `24px` |
| `spacing.8` | `32px` |

---

## 角丸

| トークン | 値 |
| --- | --- |
| `radius.sm` | `4px` |
| `radius.md` | `6px` |
| `radius.lg` | `8px` |
| `radius.full` | `9999px` |

---

## 影

| トークン | 値 |
| --- | --- |
| `shadow.sm` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
| `shadow.md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)` |

---

このトークンを使ったコンポーネント仕様は [`components.md`](/components.md) を参照。