デザインシステム

デザインの一次資料は2つに分かれています。

DESIGN.md（リポジトリルート）— voice / inspiration anchor / Do-Don't（定性的な方針）
.claude/skills/delightful-frontend/references/astar-design-system.md — トークンの具体値（定量的な正）

迷ったら「トークンの値」は astar-design-system.md、「言葉遣いやどのブランドを参照するか」は DESIGN.md を見てください。このページはその要点だけをまとめたものです。

ブランド

Product: "Claude Code for legal clerks" — 非技術な法律事務員が、転記とリスト化作業から解放されるための業務アプリ
Font: BIZTER（Inter + BIZ UD Gothic の合成フォント）。Notion 系の "NotionInter" ではありません
Primary color: Navy #001f42
Accent: Sky Blue #0084ff。AI 機能のみ紫 #7c3aed（design-purple）を補助的に使用
Radius: 0.625rem（10px）を --radius とし、sm=6 / md=8 / lg=10 / xl=14
Logo gold: #E7C41A → #E8AF07 → #A6610E のグラデーション。ロゴマーク内でのみ使用し、UIチェックには使いません
Type scale: 日本語の情報密度に合わせた圧縮スケール（text-sm = 12px, text-base = 13px）。Notion/Linear の標準よりさらに高密度です

Emotional register は「信頼感 × 落ち着き × 萎縮させない温かさ」。テック臭・ゲーム感・装飾過多は禁止です。

デザイントークン — raw palette は使わない

色は --design-* 系のセマンティックトークン、または surface-* ユーティリティクラスを経由します。

<!-- Do: セマンティックトークン -->
<div class="bg-design-accent/10 text-design-accent border-design-accent/30">

<!-- Do: surface-* ユーティリティ -->
<div class="surface-success-soft">高信頼度</div>

<!-- Don't: raw tailwind palette -->
<div class="bg-emerald-50 text-blue-500">  <!-- ❌ -->

Token	用途
`--design-primary`	Navy ブランドカラー
`--design-accent`	インタラクティブな青
`--design-danger` / `--design-success` / `--design-warning`	状態色
`--design-purple`	AI 機能専用。AI が生成/推測したコンテンツの透明性マーカー
`--design-hover`	ホバー背景

surface-*（surface-accent-soft, surface-success-soft, surface-ai など）はバッジ・バナー・ステータスピル向けに main.css の @layer components で定義済みで、テーマ切替やダークモードをまたいで安全です。

bg-emerald-50 のような raw tailwind palette クラスや、bracket 記法の任意値（duration-[600ms] など）は ESLint の design-token/no-raw-palette-class エラー で弾かれます。

トークン違反の正本チェックは bun run lint の実行結果そのもの です。「grep でトークン名を検索して監査する」方法は既にズレています（トークン一覧はリファクタで変わり続けるため）。トークン準拠を確認したいときは grep 監査を書くのではなく、実際に lint を走らせてください。

IconButton 規約

アイコンだけのボタンは、素の <Button size="icon"> ではなく必ず <IconButton>（app/foundation/components/common/IconButton.vue）を使います。

<!-- Do -->
<IconButton icon="lucide:trash-2" :label="t('foundation.actions.basic.delete')" @click="handleDelete" />

<!-- Don't -->
<Button size="icon"><Icon name="lucide:trash-2" /></Button>  <!-- ❌ lint error -->

label（i18n化された文字列）が aria-label とツールチップの 唯一の情報源 です。両方を別々に書きません。
Popover / DropdownMenu の as-child トリガーの内側で使うときは tooltip-mode="native" を指定します。as-child を持つコンポーネントの中にさらにネストした as-child Tooltip トリガーを置くと、一部の webview でトリガーが反応しなくなるためです。
素の <Button size="icon"> は icon-button/no-bare-icon-button の lint エラーになります。

このほか、右クリック/長押しのアクションメニューは ResponsiveActionMenu、ホバーで現れるコントロールは .hover-reveal ユーティリティ（opacity-0 group-hover:opacity-100 ではなく）を使います。これらはタッチデバイスでの操作可能性を担保するための規約で、素の shadcn ContextMenu にはタッチ経路がありません。

インスピレーション規約 — 構造だけ借りる、色とフォントは借りない

UI の「空間文法」の参照先として3つのブランドを優先順位付きで anchor にしています。

優先度	ブランド	借りるもの
★★★ Primary	Notion	Warm minimalism、極薄 whisper border（1px）、多層 low-opacity shadow、余白の効いた「静かな階層」表現
★★ Secondary	Linear	データ密度、精密なグリッド、Excel互換のセル移動（Tab/Enter/矢印キー）、compact row height
★ Tertiary	Stripe	フォーム品質、バリデーション表現、空状態、エラー表現

使い分け: 文書中心の画面（Document Editor, Organize）は Notion 寄り。データ中心の画面（Table, Record List, Dashboard）は Linear 寄り。フォーム・設定画面は Stripe 寄り。

借りてよいのは 構造・空間文法だけ です。Notion / Linear / Stripe の色やフォントをそのまま流用することは Don't に明記されています。 Astar のブランドは Navy × Sky Blue（+ AI機能のみ Purple）で固定です。「Linear っぽいデータ密度にしたいから Linear の配色も真似る」は規約違反です。

Table の密度については1点だけ例外があります。Linear の既定（dense, 28-32px 行高）は業務データ（号証一覧・財産一覧・時系列など文字量の多い画面）で「窮屈で読めない」と現場評価されたため、Table のデータ面は既定を comfortable（行高44px / 本文14px）とし、密度トグルで compact(32px) に落とせるようにしています。密度値の SSoT は useTableDensity.ts で、ハードコードは禁止です。

AI UI Quality Bar（新しいボタン/常設コントロールを足す前に）

新しいボタン・タブ・メニュー項目・常設コントロールを追加する前に、既存導線調査と6項目ゲート（.claude/skills/delightful-frontend/references/element-placement-gate.md）に答える必要があります。要点だけ挙げると:

1画面 = 1主目的 + 1主作業領域。同じ強さの panel/card/toolbar を並べて mosaic 化しない
Primary action は1つまで、secondary は原則2つまで
未実装/TODO/no-op のコントロールは禁止。機能がないなら非表示にする
破壊的操作は「対象名 + 結果 + 復帰可否」を confirm で明示する
AI の推測・自動分類・自動上書きは「AI」ラベル付きの secondary とし、何が自動で行われたかを説明する

Do / Don't（抜粋）

✅ whisper border（1px solid var(--border)）を基本、影は控えめ
✅ 情報階層は font-weight + size + color で表現する（飾り罫やカラーブロックに頼らない）
✅ AI 出力には必ず design-purple アクセントか「AI」ラベルを付ける
❌ ダーク基調のネオン・グラデーション・glow
❌ Navy × Gold 以外の暖色系ブランドカラーの追加
❌ 絵文字による情報伝達（「✅ 完了」ではなく lucide:check + ラベル）
❌ text-xs を日本語本文に使う（text-sm が最小可読サイズ）

次の一歩

モジュール内部構造 — component をどこに置くか
i18n — UI 文言の規約