デジタル庁デザインシステム（DADS）
このプレビューは、デジタル庁が公式公開している digital-go-jp/design-system-example-components-html リポジトリ（MIT ライセンス）の実装トークンに基づいて作成されています。実サイト digital.go.jp はこのデザインシステムのサブセットを採用しています。
プリミティブカラー（11 色相 × 13 段階）
DADS は 11 色相 × 13 段階 = 143 個のプリミティブカラーを定義しています。50 が最も明るく、1200 が最も暗い。下記は blue / red / green の 3 色相を抜粋。
全 11 色相: blue / light-blue / cyan / green / lime / yellow / orange / red / magenta / purple
主要使用ポイント: blue-1000 #00118f = リンク・focus、blue-900 #0017c1 = ボタン default、yellow-300 #ffd43d = focus ring
ニュートラル（12 段階の Solid Gray）
420 と 536 という非規則的な番号は WCAG コントラスト比閾値（AAA 4.5:1 / AA 3:1）に対応する公式トークン。
主要: solid-gray-800 #333 = body text、solid-gray-700 #4d4d4d = sub text、solid-gray-536 #767676 = placeholder（AA 4.5:1）、solid-gray-600 #666 = input border
セマンティックカラー
各セマンティックは -1（明）と -2（濃）の 2 段階を持ち、icon と text で使い分けます。
Success
= green-600 #259d63
--color-semantic-success-2
= green-800 #197a4b
Error
= red-800 #ec0000
--color-semantic-error-2
= red-900 #ce0000
Warning Yellow
= yellow-700 #b78f00
--color-semantic-warning-yellow-2
= yellow-900 #927200
Warning Orange
= orange-600 #fb5b01
--color-semantic-warning-orange-2
= orange-800 #c74700
5 カテゴリの Typography Utility
命名規則: dads-u-{prefix}-{size}{weight}-{lineHeight}
例: dads-u-std-17N-170 = Standard / 17px / Normal / line-height 1.70
| Prefix | カテゴリ | Sizes (px) | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| dsp | Display | 64, 57, 48 | 1.40 | 0 | 大型見出し |
| std | Standard | 45 | 1.40 | 0 | H1 |
| 36 | 1.40 | 0.01em | H1 大 | ||
| 32, 28 | 1.50 | 0.01em | H2 / H3 | ||
| 26, 24, 22, 20 | 1.50 | 0.02em | 中見出し | ||
| 18 | 1.60 | 0.02em | sub-heading | ||
| 17, 16 | 1.70 | 0.02em | 本文 base | ||
| dns | Dense | 17, 16, 14 | 1.20, 1.30 | 0 | 密な行間 (table 等) |
| oln | One Line | 17, 16, 14 | 1.00 | 0.02em | 1 行 UI |
| mono | Monospace | 17, 16, 14 | 1.50 | 0 | コード・数値 ( --font-family-mono) |
letter-spacing は 3 段階（0 / 0.01em / 0.02em）でサイズに反比例します。「全要素 0.02em」は誤りで、45px 以上は 0、36〜28px は 0.01em、26px 以下が 0.02em です。
10 サイズの Heading Scale
見出し 64
見出し 57
見出し 45 (H1 ページタイトル)
見出し 36
見出し 32 (H2)
見出し 28 (H3)
見出し 24 (H4)
見出し 20
見出し 18
見出し 16
Heading Variants（chip / rule）
data-chip = 左に青い縦バー（width: 1em/3）
重点的な見出し
data-rule="4" = 下線（width: 4px）
章立ての見出し
Button (4 サイズ × 3 タイプ)
Solid Fill
Outline
Text
Focus Indicator (WCAG 2.2 公式仕様)
フォーカス時は 4px 黒 outline + 2px yellow-300 リングを必ず表示
box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
Input Text (3 サイズ × 各種状態)
ヘルプテキスト: solid-gray-700 で補助情報を表示します
半角数字でご入力ください
Notification Banner (5 タイプ)
blue-900 を border に使った標準的な情報通知バナーです。
申請が正常に受け付けられました。受付番号は IDP-2026-04-30-001234 です。
マイナンバーカードの有効期限が近づいています。更新手続きをご検討ください。
システムメンテナンスのため、現在ご利用いただけません。
solid-gray-536 を border に使った控えめな通知バナーです。
8 段階の Elevation
DADS は 8 段階のシャドウトークンを持ちます。各 elevation は「広いソフト + 細かい強」の 2 つの shadow を重ねた構成。
実サイト digital.go.jp トップは完全フラットですが、Drawer / Modal / Card 等のコンポーネントレベルでは利用されます。
Link の 5 状態 State Machine
公式が明示する 5 状態。visited は magenta、active は orange、focus は黒枠 + 黄色背景全体。Hover で 文字サイズ・ウェイトは変えない（領域がたつき防止）。
必須ルール: 色だけでリンクを判別させない（必ず下線などの非色情報を併用）。色覚多様性配慮。
外部リンク: 末尾に Tail Icon を配置。
アイコンの 4 位置タイプ（公式独自モデル）
公式は視覚サイズや機能ではなく テキストフロー上の位置でアイコンを 4 種類に分類しています。
FRONT ICON
ブロックレベルボックスの先頭。見出し前等。
LEAD ICON
行ボックスの先頭。ボタン内のアイコン等。
アクセシビリティ: アイコンは必ずラベルと併用（単独使用禁止）。コントラスト 4.5:1 以上。インタラクティブアイコンは 44×44 CSS px のターゲットサイズ。ラベル併記時は alt=""（aria-label 不要）。
レイアウト・余白・角の形状
Breakpoint は 768px 1 点のみ
@media (min-width: 48rem) { /* ≥ 768px */ }
「ブレークポイントを 1 つ設定する想定」と公式に明示。XS/SM/MD/LG/XL は使わない極めてミニマルな設計判断。グリッドは 12 カラム、ガターは本文文字サイズの 2 倍（body 16px なら 32px）。
Spacing は 3〜5 値の Modular Scale
8px
(1×)
24px
(3×)
64px
(8×)
公式が示す例: 1× / 3× / 8× の 3 値。
推奨運用: 3〜5 個に絞った modular scale。中間値（16/32/48 等）の追加は否定されないが、限定的に。
Corner Shapes 5 段階
None
0
Small
8px
Medium
16px (12 矩形)
Large
32px (16 矩形)
Full
50%
矩形（幅 ≫ 高さ）は radius を縮小: Medium 16→12px、Large 32→16px。同じ値でもサイズで見え方が変わるため、視覚的な統一感を維持する調整が必須。
公式コンポーネント一覧（37 種）
公式リポジトリ digital-go-jp/design-system-example-components-html が提供する 37 種のコンポーネント。新規 UI を作る前にまずこの一覧を確認すべきです。
公式の単位ルール
rem ベース・border のみ px
font-size: calc(16 / 16 * 1rem);
padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
border: 1px solid; ← px は border のみ例外
border-radius: calc(8 / 16 * 1rem);
設計時の N px をユーザーの font-size 設定（基準 16px）に応じてスケールさせる公式パターンです。