管理画面の見た目のばらつきは、一度の大きな変更ではなく、散在する色値・余白・その場限りのコンポーネントから生まれます。同じ「成功」が三つのページで三種類の緑になり、テーマを変えるには何十ものファイルを触ることになります。

admin-design は Token とシェルを先に決め、そのうえでページを考えます。

色は用途を書き、色値は書かない

色は意味を持つユーティリティクラス経由のみで指定します：bg-card、text-muted-foreground、text-success、border-destructive。テーマを変えるときは Token を変え、業務コードは触りません。

配色は二層です。六つのプリセット（teal、blue、forest、violet、amber、graphite、カスタム）が全体の印象を決め、ベースカラー（neutral、stone、zinc など）とテーマカラー（十八色相）で微調整します。明暗モードは別々に保存されます。

アクセシビリティは後付けではありません。文字サイズ、太さ、高コントラスト、色覚サポート、動きの抑制、リンク下線を設定に置き、設定はブラウザに保存して業務データには入れません。

グラフはすべて自前の SVG

折れ線、棒、ドーナツ、ミニ棒、横棒、ヒートマップ、レーダー、ファネル、ガント。外部のグラフライブラリは使いません。同じ意味の色を使い、明暗モードに追随し、装飾的な図には role="img" と aria-label を付けて「この図が何を語っているか」を伝えます。

依存を持たない代わりに座標と比率は自前で保ちます。その見返りは、バンドルサイズ、監査、テーマの一貫性を自分で制御できることです。グラフ用にもう一つの配色体系を維持する必要はありません。

コンポーネント一覧が受け入れ面

九種類のコンポーネントを九つのページに分け、どのコントロールにも実際の配置先があります。コンポーネントを変えるときは、まず一覧の例を更新します。新しい機能は「一覧の例 + 実際の配置 + テスト」の三点セットで提出します。資料と実装が乖離せず、レビューの比較先も一つに定まります。