Pokemon Card Battle Style Guide
Minimal Pro × shadcn/ui パターンの基盤デザインシステム。CSS variables で ライト/将来のダーク両対応を見据えた semantic tokens を定義し、Tailwind 経由で 全コンポーネントから参照する。
Typography
見出し: Inter、本文: Noto Sans JP
Display 48 / Inter Semibold
Heading 36 / Inter Semibold
Heading 24 / Inter Semibold
Heading 20 / Inter Medium
本文 16px / Noto Sans JP Regular — クイックブラウンフォックスがレイジードッグを飛び越えた。
補足 14px / Noto Sans JP Regular — secondary text for captions and metadata.
ラベル 12px / Noto Sans JP Medium — labels, badges
Surfaces & Borders
canvas → surface → elevated の 3 段階階層
--color-canvas--color-surface--color-elevated--color-border--color-border-strongAccent (Brand)
単一の TCG Blue を CTA / リンク / 選択状態に
--color-accent--color-accent-hover--color-accent-active--color-accent-softStatus
success / warning / danger / info、それぞれ *-fg を WCAG AA 検証済み
--color-success--color-success-soft--color-warning--color-warning-soft--color-danger--color-danger-soft--color-info--color-info-softGame-state tokens
自/敵/アクティブ/ニュートラル + KO・勝利の演出色。fg は AA 検証済み
--game-self--game-self-soft--game-opponent--game-opponent-soft--game-active--game-active-soft--game-neutral--game-neutral-soft--drama-ko--drama-winShadow & Radius
shadow-xsshadow-smshadow-mdshadow-lgshadow-xlrounded-xsrounded-smrounded-mdrounded-lgrounded-xlrounded-pillButton
variant: brand / secondary / success / danger / outline / ghost / link。size: small / medium / large / icon / icon-sm
Badge
status / solid / type の全カテゴリ
Card
elevation: flat / sm / md、padding: none / small / medium / large
カードタイトル
説明テキストがここに入ります。
Elevated Card
シャドウ強めの elevation=md。
Input
label / errorText / description / aria 完備
パスワードは 8 文字以上で入力してください
ゲーム中に他プレイヤーに表示されます
Dialog
Radix Dialog をベースに focus trap / Esc / overlay click 対応
Sheet
サイドからスライドイン (left / right / top / bottom)
Tooltip & Popover
Tabs
data-state=active で surface 強調
ポケモンカード一覧をここに表示。
DropdownMenu
Switch & Separator
Skeleton
読み込み中のレイアウト維持
Avatar
Toast
重要度に応じた variant、Radix Toast で aria-live 自動
Loading
読み込み中...