---
version: "2.13.0"
name: デジタル庁 (Digital Agency Japan)
description: 日本のデジタル庁公式デザインシステム (DADS) — アクセシビリティ優先の政府向けUI言語。Noto Sans JP とブルー主体のトークンパレットで WCAG 2.2 準拠を実現する。
sources:
  - https://www.digital.go.jp/
  - https://design.digital.go.jp/
  - https://design.digital.go.jp/foundations/color/
  - https://design.digital.go.jp/foundations/typography/
  - https://design.digital.go.jp/foundations/spacing/
  - https://design.digital.go.jp/foundations/layout/
  - https://design.digital.go.jp/foundations/elevation/
  - https://design.digital.go.jp/components/button/
  - https://design.digital.go.jp/components/
  - https://raw.githubusercontent.com/digital-go-jp/design-tokens/main/figma/tokens.json
notes:
  - 全カラー値は digital-go-jp/design-tokens リポジトリの figma/tokens.json から直接抽出。直接証拠。
  - セマンティックカラー (primary, link) は Figma で定義されているが CSS 非公開のため、ボタンドキュメントと公式サイト観察から推定。
  - ロゴ色 (#252020) は /themes/custom/gov_theme_da_2023/logo.svg の fill 値から直接抽出。
  - エレベーション (shadow) の具体的な CSS 値は非公開。8段階の構造のみ文書化。
  - ボタンサイズ (px) はコンポーネントドキュメントから直接抽出。
  - WCAG 2.2 / JIS X 8341-3:2016 準拠は設計上の制約として明示されている。
colors:
  # --- ロゴ ---
  logo: "#252020"
  # --- ブルー (13段階) ---
  blue-100: "#e8f1fe"
  blue-200: "#d9e6ff"
  blue-300: "#c5d7fb"
  blue-400: "#9db7f9"
  blue-500: "#7096f8"
  blue-600: "#4979f5"
  blue-700: "#3460fb"
  blue-800: "#264af4"
  blue-900: "#0031d8"
  blue-1000: "#0017c1"
  blue-1100: "#00118f"
  blue-1200: "#000071"
  blue-1300: "#000060"
  # --- ニュートラル ---
  white: "#ffffff"
  black: "#000000"
  gray-50: "#f2f2f2"
  gray-100: "#e6e6e6"
  gray-200: "#cccccc"
  gray-300: "#b3b3b3"
  gray-400: "#999999"
  gray-420: "#949494"
  gray-500: "#7f7f7f"
  gray-536: "#767676"
  gray-600: "#666666"
  gray-700: "#4d4d4d"
  gray-800: "#333333"
  gray-900: "#1a1a1a"
  # --- セマンティック ---
  success: "#259d63"
  success-dark: "#197a4b"
  error: "#ec0000"
  error-dark: "#ce0000"
  warning-yellow: "#b78f00"
  warning-yellow-dark: "#927200"
  warning-orange: "#fb5b01"
  warning-orange-dark: "#c74700"
typography:
  display:
    fontFamily: "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "48px–64px"
    lineHeight: "140%"
    fontWeight: 700
  h1:
    fontFamily: "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "36px"
    lineHeight: "150%"
    fontWeight: 700
  h2:
    fontFamily: "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "32px"
    lineHeight: "150%"
    fontWeight: 700
  body:
    fontFamily: "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "16px"
    lineHeight: "175%"
    fontWeight: 400
  label:
    fontFamily: "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "16px"
    lineHeight: "100%"
    fontWeight: 400
  mono:
    fontFamily: "'Noto Sans Mono', monospace"
    fontSize: "14px–24px"
    lineHeight: "150%"
    fontWeight: 400
rounded:
  sm: "4px"
  md: "6px"
  lg: "8px"
  xl: "12px"
  2xl: "16px"
  3xl: "24px"
  4xl: "32px"
  full: "9999px"
spacing:
  base: "8px"
components:
  button-filled:
    backgroundColor: "{colors.blue-700}"
    color: "{colors.white}"
    borderRadius: "{rounded.lg}"
    minTouchTarget: "44px"
  button-outline:
    backgroundColor: "{colors.white}"
    color: "{colors.blue-700}"
    border: "1px solid {colors.blue-700}"
    borderRadius: "{rounded.lg}"
  button-text:
    backgroundColor: "transparent"
    color: "{colors.blue-700}"
    textDecoration: "underline"
---

## Overview

デジタル庁デザインシステム (DADS) は、日本の政府・公共機関向けウェブサイトおよびアプリケーションのための公式デザイン言語。バージョン 2.13.0 (2024年5月30日 β版公開)。

**ミッション:** 「誰一人取り残されない、人に優しいデジタル化を」

**設計原則:**
- アクセシビリティ最優先 — WCAG 2.2 AA / JIS X 8341-3:2016 準拠
- 装飾より情報階層 — クリーンでミニマルなレイアウト
- カラーのみに依存しない情報伝達（色覚多様性への配慮）
- 日英バイリンガル対応（日本語 + 英語の混在コンテンツ）

**実装スタック:** Tailwind CSS + `@digital-go-jp/tailwind-theme-plugin`、React コンポーネントと素の HTML コンポーネントを両方提供。デザインデータは Figma Community で公開。

---

## Colors

### ロゴカラー

ロゴは単色。背景色への適応のため、黒版・白版の SVG が用意されている。

| Role | Hex | 証拠 |
|---|---|---|
| Logo Black | `#252020` | `logo.svg` / `logo-en.svg` の fill 値から直接抽出 |

### Primary Action Color (推定)

ブルーが主要インタラクション色。ボタンドキュメントの「青背景に白テキスト」から Blue-700 を primary として推定。Figma のセマンティックトークンで正式定義されているが、公開 CSS には含まれない。

| Role | Hex | Notes |
|---|---|---|
| Primary (推定) | `#3460fb` | Blue-700 — 主要ボタン・フォーカスリング |
| Primary Hover (推定) | `#264af4` | Blue-800 |
| Primary Active (推定) | `#0031d8` | Blue-900 |

### ブルー — プリミティブスケール (13段階)

| Token | Hex | 明度 |
|---|---|---|
| Blue-100 | `#e8f1fe` | 最も薄い |
| Blue-200 | `#d9e6ff` | |
| Blue-300 | `#c5d7fb` | |
| Blue-400 | `#9db7f9` | |
| Blue-500 | `#7096f8` | |
| Blue-600 | `#4979f5` | |
| **Blue-700** | **`#3460fb`** | **Primary 推定** |
| Blue-800 | `#264af4` | |
| Blue-900 | `#0031d8` | |
| Blue-1000 | `#0017c1` | |
| Blue-1100 | `#00118f` | |
| Blue-1200 | `#000071` | |
| Blue-1300 | `#000060` | 最も濃い |

その他のプリミティブカラー (各13段階): LightBlue / Cyan / Green / Lime / Yellow / Orange / Red / Magenta / Purple

### ニュートラル — SolidGray (12段階)

アクセシビリティ上の意味を持つキーグレー値。

| Token | Hex | コントラスト比 |
|---|---|---|
| Gray-50 | `#f2f2f2` | ページ背景 |
| Gray-100 | `#e6e6e6` | ボーダー (薄) |
| Gray-200 | `#cccccc` | |
| Gray-300 | `#b3b3b3` | |
| Gray-400 | `#999999` | |
| **Gray-420** | **`#949494`** | **3:1 vs White — 非テキスト最小値** |
| Gray-500 | `#7f7f7f` | |
| **Gray-536** | **`#767676`** | **4.5:1 vs White — テキスト最小値** |
| **Gray-600** | **`#666666`** | **3:1 vs Black** |
| Gray-700 | `#4d4d4d` | |
| Gray-800 | `#333333` | |
| Gray-900 | `#1a1a1a` | 本文テキスト推奨 |

OpacityGray: `rgba(0,0,0, 0.05–0.9)` の12段階 (5/10/20/30/40/42/50/53.6/60/70/80/90%) — SolidGray の各段階に対応。

### セマンティックカラー

figma/tokens.json から直接抽出。

| Role | Hex | Source Token |
|---|---|---|
| Success | `#259d63` | Green-600 |
| Success Dark (hover/active) | `#197a4b` | Green-800 |
| Error | `#ec0000` | Red-800 |
| Error Dark | `#ce0000` | Red-900 |
| Warning Yellow | `#b78f00` | Yellow-700 |
| Warning Yellow Dark | `#927200` | Yellow-900 |
| Warning Orange | `#fb5b01` | Orange-600 |
| Warning Orange Dark | `#c74700` | Orange-800 |
| Link Default (推定) | Blue | Figma で定義、公開値なし |
| Link Visited (推定) | Magenta | 青との混同を避けるため Purple より Magenta を推奨 |

---

## Typography

### フォントファミリー

フォントは Noto Sans JP のみ。日英混在コンテンツに最適化。中間ウェイト (500/600) は使用しない。

```css
--font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Noto Sans Mono', monospace;
```

Noto Sans JP のライセンス: SIL Open Font License 1.1

### フォントウェイト

| Name | Value |
|---|---|
| Normal (N) | `400` |
| Bold (B) | `700` |

### フォントサイズスケール (15段階)

| Token | px |
|---|---|
| xs | 14 |
| sm | 16 |
| sm2 | 17 |
| md | 18 |
| md2 | 20 |
| md3 | 22 |
| lg | 24 |
| lg2 | 26 |
| xl | 28 |
| xl2 | 32 |
| xl3 | 36 |
| xl4 | 45 |
| display-sm | 48 |
| display-md | 57 |
| display-lg | 64 |

### テキストスタイルカテゴリ

| Category | 略称 | Size Range | Line Height | 用途 |
|---|---|---|---|---|
| Display | Dsp | 48–64px | 140% | ヒーロー・大見出し (6スタイル) |
| Standard | Std | 16–45px | 150–175% | 一般本文・見出し (Bold×12 + Normal×12) |
| Dense | Dns | 14–17px | 140–150% | データ集約UI、小テキスト (Bold×6 + Normal×6) |
| Oneline | Oln | 16–28px | **100%** | UIラベル・ボタンテキスト (6スタイル) |
| Mono | — | 14–24px | 150% | コード表示 (6スタイル) |

ボタンには **Oneline スタイル** (line-height: 100%) を使用すること。

---

## Spacing

8px をベースユニットとするモジュラースケール。

| Scale | px | 使用例 |
|---|---|---|
| 1× | 8 | コンポーネント内最小パディング |
| 2× | 16 | 標準的な要素間隔 |
| 3× | 24 | セクション内グループ間隔 |
| 4× | 32 | |
| 5× | 40 | |
| 6× | 48 | セクション間 |
| 8× | 64 | 大セクション区切り |

スペースはコンポーネントに統合して使用する。スタンドアロントークンとして参照する場面は限定的。

---

## Layout

12カラムグリッド、ブレイクポイント1つのシンプルな構造。

| Device | Viewport |
|---|---|
| Mobile & Tablet | < 768px |
| Desktop | ≥ 768px |

### カラム分割パターン

| パターン | カラム比 |
|---|---|
| シングル | 12 |
| メイン + サイドナロー | 9 / 3 |
| サイドナロー + メイン | 3 / 9 |
| コンテンツ + サイドバー | 8 / 4, 4 / 8 |
| ハーフ | 6 / 6 |
| 3カラム均等 | 4 / 4 / 4 |
| 3カラム中央強調 | 3 / 6 / 3 |

**ガター幅:** 本文文字サイズ × 2 以上（例: 16px × 2 = 32px）。  
左ナビゲーション固定幅 + コンテンツエリアの2ペインが標準レイアウト。

---

## Corner Shapes (Border Radius)

| Token | Value | 推奨用途 |
|---|---|---|
| sm | `4px` | チップ、バッジ、タグ |
| md | `6px` | |
| lg | `8px` | **ボタン、テキスト入力** |
| xl | `12px` | **カード** |
| 2xl | `16px` | |
| 3xl | `24px` | パネル、モーダルダイアログ |
| 4xl | `32px` | |
| full | `9999px` | ピル形状、アバター、検索バー |

---

## Elevation

8段階のドロップシャドウスケール。各レベルは二重レイヤー構造（アンビエント + ディレクショナル）。

| Level | 用途 |
|---|---|
| 0 | 平面 (シャドウなし) |
| 1 | カード (通常状態) |
| 2 | カード (ホバー)、ドロップダウン |
| 3–4 | フローティングUI、ツールチップ |
| 5–6 | モーダル、ダイアログ |
| 7–8 | 最上位レイヤー |

モーダル背景のオーバーレイシェード: `rgba(0,0,0, 0.x)` の半透明ダーク。

---

## Components

### Button (ボタン)

**3種類のボタンタイプ:**

| Type | Background | Text Color | Border | 重要度 |
|---|---|---|---|---|
| Filled | `#3460fb` (Blue-700, 推定) | `#ffffff` | なし | 高 |
| Outline | `#ffffff` / 透明 | `#3460fb` | `1px solid` Blue | 中 |
| Text | 透明 | `#3460fb` | なし (下線) | 低 |

**4サイズ (ドキュメントから直接抽出):**

| Size | Min Width | Height |
|---|---|---|
| Large | 136px | 56px |
| Medium | 96px | 48px |
| Small | 80px | 36px |
| X-Small | 72px | 28px |

最小タッチターゲット: **44px**（高さが不足する場合はパディングで補完）。  
幅はラベル長に応じて可変（flex padding モデル）。  
フォント: Oneline スタイル (line-height: 100%)。

**ステート:** Default → Hover (暗色化) → Active (さらに暗色化) → Focus (リング表示) → Disabled

---

### Card (カード)

単一トピックのコンテンツをグルーピングするフレキシブルコンテナ。

- Background: `#ffffff`
- Border-radius: `12px` (xl) ― 推定
- Shadow: Elevation Level 1–2
- 構成要素: サムネイル画像 + 見出し + 本文 + リンク/アクション

---

### Notification Banner (通知バナー)

**カラー × ステータス:**

| Type | Background Color | Icon | Source Token |
|---|---|---|---|
| Success | `#259d63` | ✓ | Green-600 |
| Error | `#ec0000` | × | Red-800 |
| Warning Yellow | `#b78f00` | ! | Yellow-700 |
| Warning Orange | `#fb5b01` | ! | Orange-600 |
| Info 1 | Blue (primary) | ℹ | — |
| Info 2 | `#000000` | ℹ | — |

**2スタイル:**
- **Standard**: 角丸ボーダー
- **Color Chip**: 左側に太いアクセントボーダー (border-left)

Emergency Banner (緊急時バナー) は別コンポーネント。最高優先度で表示。

---

### Text Input (テキスト入力)

状態: Default / Hover / Focus / Error / Disabled  
Focus: ブルーのフォーカスリング  
Error: 赤ボーダー (`#ec0000`) + エラーメッセージテキスト

---

### 47コンポーネント一覧 (カテゴリ別)

**ナビゲーション:** グローバルメニュー、ボトムナビゲーション、ページナビゲーション、パンくずリスト、メガメニュー、メニューリスト、メニューリストボックス、モバイルメニュー、ハンバーガーメニューボタン

**フォームコントロール:** インプットテキスト、テキストエリア、セレクトボックス、チェックボックス、ラジオボタン、コンボボックス、日付ピッカー/カレンダー、ファイルアップロード/ドロップエリア

**コンテンツ:** ボタン、カード、見出し、画像、箇条書きリスト、説明リスト、引用ブロック、テーブル/データテーブル、テーブルコントロール

**インジケーター/フィードバック:** プログレスインジケーター、ノティフィケーションバナー、緊急時バナー、チップラベル、チップタグ

**インタラクティブ:** アコーディオン、タブ、ディスクロージャー、ドロワー、モーダルダイアログ、イメージスライダー、カルーセル

**ユーティリティ:** ディバイダー、ヘッダーコンテナ、スクロールトップボタン、ステップナビゲーション、検索ボックス、ユーティリティリンク、ランゲージセレクター、リソースリスト

---

## Imagery

### イラスト

公式イラストリソースが提供されており、行政手続きを分かりやすくするために設計されています。  
スタイル: フラットなベクターイラスト、親しみやすいキャラクター、インクルーシブな人物表現（多様な職業・年齢・性別）。

### フォトグラフィー

- 現実の人々・職場・サービスシーンを使用
- 医療、教育、ビジネスなど行政サービスのコンテキスト
- インクルーシブな表現を重視

### アイコン

ドキュメント構造内の位置に基づく4種類の仕様。シンプルで認識しやすいUIアイコン。カラーは周囲のテキストまたは意味的な色（success/error/warning）に準じる。

---

## Logo and Usage

- **デザイン:** 「デジタル庁 Digital Agency」横並びワードマーク
- **フォーマット:** SVG (すべてパスで描画、システムフォントに依存しない)
- **日本語版 viewBox:** `0 0 1746.36 320`
- **英語版 viewBox:** `0 0 2429.14 336`
- **標準色:** `#252020` (SVG fill 値から直接抽出) — 濃いチャコールブラック
- **背景:** 白背景を前提とした設計
- **ロゴ使用:** 申請が必要 (公式ガイドラインに従う)

---

## Do's and Don'ts

### Do

- **Noto Sans JP** のみを使用する — 他フォントへの切り替え不可
- ブルーを主要インタラクション色として一貫して使用する
- 本文テキストには `Gray-900` (`#1a1a1a`) を基本にする
- テキストの最低コントラスト比: **4.5:1** (WCAG 2.2 AA)
- 非テキスト要素の最低コントラスト比: **3:1**
- フォーカスインジケーターを必ず視覚的に明示する
- ボタンの最小タッチターゲットを **44px** に保つ
- 8px グリッドでスペースを定義する
- カラーと非カラーの両方の手がかりで情報を伝える
- ボタンはページ内の重要度順に Filled → Outline → Text と使い分ける

### Don't

- `Gray-420` (`#949494`) より薄いグレーをテキストに使用しない
- `Gray-536` (`#767676`) より薄いグレーをテキストコントラストとして使用しない
- プライマリ (Filled) ボタンを複数並べて重要度を希釈しない
- ロゴを変形・再彩色・トリミングしない
- フォントウェイト 500/600 を使用しない (400 と 700 のみ)
- リンクの visited 色 (Magenta/Purple) をナビゲーション要素に転用しない
- カラーのみで情報を伝えない (アイコン・ラベル・パターンを併用する)

---

## Accessibility

| 規格 | 準拠レベル |
|---|---|
| WCAG 2.2 | AA |
| JIS X 8341-3:2016 | 準拠 |

- **テキストコントラスト:** 4.5:1 以上
- **非テキストコントラスト:** 3:1 以上 (ボーダー、アイコン、グラフ)
- **色覚多様性対応:** C型・P型・D型シミュレーション実施済み — カラーのみに依存しない設計
- **visited リンク:** 青との混同リスクがあるため Purple より Magenta を推奨
- **タッチターゲット:** 最小 44px × 44px
- **フォーカス管理:** モーダル・ドロワー開閉時のフォーカストラップ対応コンポーネントを提供

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "digital",
    "name": "デジタル庁 (Digital Agency Japan)",
    "url": "https://www.digital.go.jp/",
    "description": "「誰一人取り残されない、人に優しいデジタル化を」をミッションとする日本のデジタル庁公式デザインシステム (DADS) v2.13.0。WCAG 2.2 AA / JIS X 8341-3:2016 準拠の政府向け UI 言語で、Noto Sans JP 単一フォントスタックと 13 段階のブルースケール (#e8f1fe → #000060) を基盤に、装飾より情報階層を重視したクリーンでミニマルなレイアウトを定義。最小タッチターゲット 44px、テキストコントラスト 4.5:1 以上、色覚多様性 (C/P/D 型) 検証済みなど、アクセシビリティ制約を設計レベルで組み込んでいる。デザインデータは Figma Community で公開、実装は Tailwind CSS プラグイン + React / 素の HTML コンポーネントの両形態で提供。日英バイリンガル対応。",
    "category": "infrastructure",
    "tags": [
      "infrastructure",
      "minimal"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.digital.go.jp/",
    "https://design.digital.go.jp/",
    "https://design.digital.go.jp/foundations/color/",
    "https://design.digital.go.jp/foundations/typography/",
    "https://design.digital.go.jp/foundations/spacing/",
    "https://design.digital.go.jp/foundations/layout/",
    "https://design.digital.go.jp/foundations/elevation/",
    "https://design.digital.go.jp/components/button/",
    "https://design.digital.go.jp/components/",
    "https://raw.githubusercontent.com/digital-go-jp/design-tokens/main/figma/tokens.json"
  ],
  "extractedAt": "2026-05-18",
  "notes": [
    "直接証拠: 全カラー値は digital-go-jp/design-tokens リポジトリの figma/tokens.json から直接抽出。",
    "直接証拠: ロゴ色 (#252020) は /themes/custom/gov_theme_da_2023/logo.svg の fill 値から直接抽出。",
    "直接証拠: ボタンサイズ (Large 136x56 / Medium 96x48 / Small 80x36 / X-Small 72x28) はコンポーネントドキュメントから直接抽出。",
    "推論: セマンティックカラー (primary, link) は Figma で定義されているが CSS 非公開のため、ボタンドキュメントと公式サイト観察から Blue-700 を primary と推定。",
    "推論: エレベーション (shadow) の具体的な CSS 値は非公開、8 段階の構造のみ文書化。",
    "重要: フォントウェイトは 400 (Normal) と 700 (Bold) のみ、500 / 600 を使用しない設計判断。",
    "重要: ボタンには Oneline スタイル (line-height: 100%) を使用、本文 (Standard) とは別系統。",
    "重要: テキストには Gray-536 (#767676) より薄いグレーを使用しない (4.5:1 vs White の最小値)。",
    "重要: 非テキスト要素には Gray-420 (#949494) より薄いグレーを使用しない (3:1 vs White の最小値)。",
    "重要: visited リンク色は青との混同回避のため Purple より Magenta を推奨。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Primary Action (推定)",
        "tokens": [
          {
            "name": "Primary",
            "value": "#3460fb",
            "token": "--color-primary",
            "role": "主要ボタン背景・フォーカスリング・リンク (Blue-700)。Figma セマンティックトークンで定義、CSS 非公開のため推定"
          },
          {
            "name": "Primary Hover",
            "value": "#264af4",
            "token": "--color-primary-hover",
            "role": "プライマリ要素のホバー (Blue-800)"
          },
          {
            "name": "Primary Active",
            "value": "#0031d8",
            "token": "--color-primary-active",
            "role": "プライマリ要素のアクティブ (Blue-900)"
          }
        ]
      },
      {
        "label": "Blue Scale (13 Levels)",
        "tokens": [
          {
            "name": "Blue-100",
            "value": "#e8f1fe",
            "token": "--color-blue-100",
            "role": "最薄ブルー (背景・薄帯)"
          },
          {
            "name": "Blue-200",
            "value": "#d9e6ff",
            "token": "--color-blue-200",
            "role": "ライトブルー (情報バナー背景候補)"
          },
          {
            "name": "Blue-300",
            "value": "#c5d7fb",
            "token": "--color-blue-300",
            "role": "ライトブルー"
          },
          {
            "name": "Blue-400",
            "value": "#9db7f9",
            "token": "--color-blue-400",
            "role": "ミッドブルー (淡)"
          },
          {
            "name": "Blue-500",
            "value": "#7096f8",
            "token": "--color-blue-500",
            "role": "ミッドブルー"
          },
          {
            "name": "Blue-600",
            "value": "#4979f5",
            "token": "--color-blue-600",
            "role": "ミッドブルー (濃)"
          },
          {
            "name": "Blue-700",
            "value": "#3460fb",
            "token": "--color-blue-700",
            "role": "Primary 推定・主要インタラクション色"
          },
          {
            "name": "Blue-800",
            "value": "#264af4",
            "token": "--color-blue-800",
            "role": "ホバー状態"
          },
          {
            "name": "Blue-900",
            "value": "#0031d8",
            "token": "--color-blue-900",
            "role": "アクティブ状態"
          },
          {
            "name": "Blue-1000",
            "value": "#0017c1",
            "token": "--color-blue-1000",
            "role": "ダークブルー"
          },
          {
            "name": "Blue-1100",
            "value": "#00118f",
            "token": "--color-blue-1100",
            "role": "ダークブルー (深)"
          },
          {
            "name": "Blue-1200",
            "value": "#000071",
            "token": "--color-blue-1200",
            "role": "ダークブルー (最深手前)"
          },
          {
            "name": "Blue-1300",
            "value": "#000060",
            "token": "--color-blue-1300",
            "role": "最深ブルー"
          }
        ]
      },
      {
        "label": "Neutrals (SolidGray 12 Levels)",
        "tokens": [
          {
            "name": "White",
            "value": "#ffffff",
            "token": "--color-white",
            "role": "メイン背景・カード背景"
          },
          {
            "name": "Black",
            "value": "#000000",
            "token": "--color-black",
            "role": "純黒 (Info Banner 等の限定使用)"
          },
          {
            "name": "Gray-50",
            "value": "#f2f2f2",
            "token": "--color-gray-50",
            "role": "ページ背景・薄サーフェス"
          },
          {
            "name": "Gray-100",
            "value": "#e6e6e6",
            "token": "--color-gray-100",
            "role": "薄ボーダー・区切り線"
          },
          {
            "name": "Gray-200",
            "value": "#cccccc",
            "token": "--color-gray-200",
            "role": "標準ボーダー"
          },
          {
            "name": "Gray-300",
            "value": "#b3b3b3",
            "token": "--color-gray-300",
            "role": "中ボーダー"
          },
          {
            "name": "Gray-400",
            "value": "#999999",
            "token": "--color-gray-400",
            "role": "ミュート要素"
          },
          {
            "name": "Gray-420",
            "value": "#949494",
            "token": "--color-gray-420",
            "role": "非テキスト最小値 (3:1 vs White)"
          },
          {
            "name": "Gray-500",
            "value": "#7f7f7f",
            "token": "--color-gray-500",
            "role": "ミッドグレー"
          },
          {
            "name": "Gray-536",
            "value": "#767676",
            "token": "--color-gray-536",
            "role": "テキスト最小値 (4.5:1 vs White) — これより薄いグレーをテキストに使わない"
          },
          {
            "name": "Gray-600",
            "value": "#666666",
            "token": "--color-gray-600",
            "role": "セカンダリテキスト (3:1 vs Black)"
          },
          {
            "name": "Gray-700",
            "value": "#4d4d4d",
            "token": "--color-gray-700",
            "role": "強テキスト"
          },
          {
            "name": "Gray-800",
            "value": "#333333",
            "token": "--color-gray-800",
            "role": "ダークテキスト"
          },
          {
            "name": "Gray-900",
            "value": "#1a1a1a",
            "token": "--color-gray-900",
            "role": "本文テキスト推奨色 (最濃)"
          }
        ]
      },
      {
        "label": "Semantic Status",
        "tokens": [
          {
            "name": "Success",
            "value": "#259d63",
            "token": "--color-success",
            "role": "成功状態 (Green-600)・通知バナー"
          },
          {
            "name": "Success Dark",
            "value": "#197a4b",
            "token": "--color-success-dark",
            "role": "成功要素のホバー/アクティブ (Green-800)"
          },
          {
            "name": "Error",
            "value": "#ec0000",
            "token": "--color-error",
            "role": "エラー状態 (Red-800)・通知バナー・入力エラー"
          },
          {
            "name": "Error Dark",
            "value": "#ce0000",
            "token": "--color-error-dark",
            "role": "エラー要素のホバー (Red-900)"
          },
          {
            "name": "Warning Yellow",
            "value": "#b78f00",
            "token": "--color-warning-yellow",
            "role": "警告 (Yellow-700)・通知バナー"
          },
          {
            "name": "Warning Yellow Dark",
            "value": "#927200",
            "token": "--color-warning-yellow-dark",
            "role": "警告イエローのホバー (Yellow-900)"
          },
          {
            "name": "Warning Orange",
            "value": "#fb5b01",
            "token": "--color-warning-orange",
            "role": "警告 (Orange-600)・通知バナー (より強い警告)"
          },
          {
            "name": "Warning Orange Dark",
            "value": "#c74700",
            "token": "--color-warning-orange-dark",
            "role": "警告オレンジのホバー (Orange-800)"
          }
        ]
      },
      {
        "label": "Logo",
        "tokens": [
          {
            "name": "Logo Black",
            "value": "#252020",
            "token": "--color-logo",
            "role": "ロゴ標準色 (logo.svg の fill 値から直接抽出) — チャコールブラック"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "primary",
        "notes": "本文・見出し・UI 全般。SIL Open Font License 1.1。日英混在コンテンツに最適化、中間ウェイト (500/600) は使用しない設計判断"
      },
      {
        "family": "Noto Sans Mono",
        "stack": "'Noto Sans Mono', monospace",
        "weights": [
          400
        ],
        "role": "mono",
        "notes": "コードブロック・等幅表示用 (14px〜24px の 6 スタイル)"
      }
    ],
    "scale": [
      {
        "role": "display (Hero)",
        "size": "48px-64px",
        "weight": 700,
        "lineHeight": 1.4,
        "note": "ヒーロー・大見出し (Display-sm 48 / Display-md 57 / Display-lg 64 の 6 スタイル)"
      },
      {
        "role": "h1",
        "size": "36px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "ページタイトル (Standard カテゴリ・xl3 トークン)"
      },
      {
        "role": "h2",
        "size": "32px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "メジャーセクション見出し (xl2 トークン)"
      },
      {
        "role": "h3",
        "size": "24px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "セクション見出し (lg トークン)"
      },
      {
        "role": "body-large",
        "size": "18px",
        "weight": 400,
        "lineHeight": 1.75,
        "note": "強調本文・リード文 (md トークン)"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.75,
        "note": "本文ベースライン (sm トークン)。line-height 175% は日本語可読性のため広め"
      },
      {
        "role": "body-small (Dense)",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "データ集約 UI・補助テキスト (xs トークン)"
      },
      {
        "role": "label (Oneline)",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1,
        "note": "UI ラベル・ボタンテキスト専用 (line-height: 100% が特徴)"
      },
      {
        "role": "mono",
        "size": "14px-24px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "コード表示 (Noto Sans Mono)"
      }
    ],
    "japanese": {
      "fontStack": "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif",
      "lineHeight": 1.75,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "Noto Sans JP の単一スタック (他フォントへの切り替えは Don't 違反)",
        "ウェイトは 400 / 700 のみ運用、500 / 600 は使用しない",
        "本文 line-height は 1.75 (175%) を採用、日本語の可読性を優先",
        "ボタン・UI ラベルには Oneline (line-height: 1.0) を使う"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "1x",
        "value": "8px",
        "role": "コンポーネント内最小パディング"
      },
      {
        "name": "2x",
        "value": "16px",
        "role": "標準的な要素間隔"
      },
      {
        "name": "3x",
        "value": "24px",
        "role": "セクション内グループ間隔"
      },
      {
        "name": "4x",
        "value": "32px",
        "role": "中間スペース・ガター幅 (本文 16px × 2)"
      },
      {
        "name": "5x",
        "value": "40px",
        "role": "中余白"
      },
      {
        "name": "6x",
        "value": "48px",
        "role": "セクション間"
      },
      {
        "name": "8x",
        "value": "64px",
        "role": "大セクション区切り"
      }
    ]
  },
  "breakpoints": {
    "mobileTablet": {
      "value": "< 768px",
      "role": "モバイル・タブレット (12 カラムグリッドのコンパクト版)"
    },
    "desktop": {
      "value": "≥ 768px",
      "role": "デスクトップ (12 カラムグリッド、左ナビ固定幅 + メインの 2 ペインが標準)"
    }
  },
  "radius": {
    "sm": "4px",
    "md": "6px",
    "lg": "8px",
    "xl": "12px",
    "2xl": "16px",
    "3xl": "24px",
    "4xl": "32px",
    "full": "9999px"
  },
  "components": [
    {
      "type": "button",
      "name": "Filled Button (Primary)",
      "description": "プライマリブルー背景のメイン CTA。重要度高。最小タッチターゲット 44px、ボタンテキストは Oneline スタイル (line-height: 100%)",
      "variants": [
        {
          "label": "Large",
          "props": {
            "background": "#3460fb",
            "color": "#ffffff",
            "borderRadius": "8px",
            "minWidth": "136px",
            "height": "56px",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.0"
          }
        },
        {
          "label": "Medium",
          "props": {
            "background": "#3460fb",
            "color": "#ffffff",
            "borderRadius": "8px",
            "minWidth": "96px",
            "height": "48px",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.0"
          }
        },
        {
          "label": "Small",
          "props": {
            "background": "#3460fb",
            "color": "#ffffff",
            "borderRadius": "8px",
            "minWidth": "80px",
            "height": "44px",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.0",
            "note": "高さ 36px だが 44px タッチターゲット確保のためパディングで補完"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#264af4",
            "color": "#ffffff",
            "borderRadius": "8px"
          }
        },
        {
          "label": "Active",
          "props": {
            "background": "#0031d8",
            "color": "#ffffff",
            "borderRadius": "8px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Outline Button (Secondary)",
      "description": "白背景 + ブルー 1px 枠のセカンダリボタン。重要度中",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#3460fb",
            "border": "1px solid #3460fb",
            "borderRadius": "8px",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.0"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#e8f1fe",
            "color": "#264af4",
            "border": "1px solid #264af4",
            "borderRadius": "8px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Text Button (Tertiary)",
      "description": "透明背景 + 下線のテキストボタン。重要度低",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#3460fb",
            "textDecoration": "underline",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.0"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "transparent",
            "color": "#264af4",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "description": "単一トピックをグルーピングする白背景コンテナ。サムネイル + 見出し + 本文 + リンク/アクションで構成",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#1a1a1a",
            "borderRadius": "12px",
            "elevation": "Level 1",
            "padding": "24px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#ffffff",
            "color": "#1a1a1a",
            "borderRadius": "12px",
            "elevation": "Level 2"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Text Input",
      "description": "標準テキスト入力。フォーカスでブルーリング、エラーで赤ボーダー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#1a1a1a",
            "border": "1px solid #cccccc",
            "borderRadius": "8px",
            "padding": "12px 16px",
            "fontSize": "16px"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#ffffff",
            "border": "2px solid #3460fb",
            "borderRadius": "8px",
            "outline": "none"
          }
        },
        {
          "label": "Error",
          "props": {
            "background": "#ffffff",
            "border": "1px solid #ec0000",
            "borderRadius": "8px",
            "errorTextColor": "#ec0000"
          }
        },
        {
          "label": "Disabled",
          "props": {
            "background": "#f2f2f2",
            "color": "#949494",
            "border": "1px solid #cccccc",
            "borderRadius": "8px"
          }
        }
      ]
    },
    {
      "type": "banner",
      "name": "Notification Banner",
      "description": "ステータス通知バナー。Standard (角丸全体) / Color Chip (左側に太いアクセントボーダー) の 2 スタイル。アイコン + テキストで色覚多様性に配慮",
      "variants": [
        {
          "label": "Success",
          "props": {
            "background": "#259d63",
            "color": "#ffffff",
            "borderRadius": "8px",
            "icon": "✓"
          }
        },
        {
          "label": "Error",
          "props": {
            "background": "#ec0000",
            "color": "#ffffff",
            "borderRadius": "8px",
            "icon": "×"
          }
        },
        {
          "label": "Warning Yellow",
          "props": {
            "background": "#b78f00",
            "color": "#ffffff",
            "borderRadius": "8px",
            "icon": "!"
          }
        },
        {
          "label": "Warning Orange",
          "props": {
            "background": "#fb5b01",
            "color": "#ffffff",
            "borderRadius": "8px",
            "icon": "!"
          }
        },
        {
          "label": "Info Blue",
          "props": {
            "background": "#3460fb",
            "color": "#ffffff",
            "borderRadius": "8px",
            "icon": "ℹ"
          }
        },
        {
          "label": "Info Black",
          "props": {
            "background": "#000000",
            "color": "#ffffff",
            "borderRadius": "8px",
            "icon": "ℹ"
          }
        }
      ]
    },
    {
      "type": "chip",
      "name": "Chip / Tag",
      "description": "ピル形状のラベル要素。状態表示・カテゴリ分類用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#e8f1fe",
            "color": "#3460fb",
            "borderRadius": "9999px",
            "padding": "4px 12px",
            "fontSize": "14px",
            "fontWeight": "400"
          }
        }
      ]
    },
    {
      "type": "focus",
      "name": "Focus Ring",
      "description": "フォーカス状態の視覚インジケーター。すべてのインタラクティブ要素に必須",
      "variants": [
        {
          "label": "Default",
          "props": {
            "outline": "2px solid #3460fb",
            "outlineOffset": "2px"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "Noto Sans JP のみを使用する — 他フォントへの切り替えは不可",
      "ブルーを主要インタラクション色として一貫して使用する (Blue-700: #3460fb)",
      "本文テキストには Gray-900 (#1a1a1a) を基本にする",
      "テキストの最低コントラスト比 4.5:1 を維持する (WCAG 2.2 AA)",
      "非テキスト要素の最低コントラスト比 3:1 を維持する",
      "フォーカスインジケーターを必ず視覚的に明示する",
      "ボタンの最小タッチターゲットを 44px × 44px に保つ",
      "8px グリッドでスペースを定義する",
      "カラーとアイコン/ラベル/パターンの両方で情報を伝える (色覚多様性対応)",
      "ボタンはページ内の重要度順に Filled → Outline → Text と使い分ける",
      "ボタンには Oneline スタイル (line-height: 100%) を使う"
    ],
    "dont": [
      "Gray-420 (#949494) より薄いグレーをテキストに使用しない",
      "Gray-536 (#767676) より薄いグレーをテキストコントラストとして使用しない",
      "プライマリ (Filled) ボタンを複数並べて重要度を希釈しない",
      "ロゴを変形・再彩色・トリミングしない (#252020 の単色のみ)",
      "フォントウェイト 500 / 600 を使用しない (400 と 700 のみ)",
      "リンクの visited 色 (Magenta/Purple) をナビゲーション要素に転用しない",
      "カラーのみで情報を伝えない (アイコン・ラベル・パターンを併用する)",
      "プライマリ青をテキストの大段落色として使わない (リンクとの識別不可)"
    ]
  }
}