FUSOUFUSOU Design System
DESIGN.MD 準拠 UI コンポーネント＆トークン カタログ
01 / Color Palette & Tokens
ダーク基調のテクニカルキャンバスと、状態伝達のための明確なセマンティックカラー群。
Brand Accents & Feedback
Accent Green
#3ecf8e
Primary action & branding
Data Info Blue
#4ea8ff
Information & metrics
Alert Amber
#f7b955
Warnings & attention
Critical Red
#f25f5c
Destructive & errors
Neutral Surface Scale (Dark Theme Reference)
Near Black
#0f0f0f
Dark (Page BG)
#171717
Dark Border
#242424
Border Dark
#2e2e2e
Mid Border
#363636
Off White
#fafafa
DaisyUI CSS Variables (Live Active Theme)
base-100
Card surface
base-200
Canvas BG
base-300
Border / divider
base-content
Primary text
P
primary
Main CTA
S
secondary
Secondary action
I
info
Informational
✓
success
Confirmed / Pass
!
warning
Caution / Alert
✕
error
Error / Danger
A
accent-border
Highlight line
color-link
No underline by default
Live Specimen: <EmptyState />
データ取得件数がゼロの場合の共通フォールバック。
戦闘データがありません
期間や海域フィルターを変更してお試しください
Live Specimen: <LoadingState />
非同期データ取得中の標準スピナーと進行メッセージ。
マスターデータを読込中...
02 / Typography Hierarchy
数値・表データの判読性を最優先にしたフォントスケール。過剰な拡大を抑制。
Display Hero (56px / weight 500 / line-height 1.05)トップページ等のヒーロー専用
FUSOU Naval Analytics
Page Title (30px / weight 700 / tracking -0.025em).fusou-page-title (通常ページ見出し標準)
戦闘一覧・分析ダッシュボード
直近の出撃ログおよび海域ごとの戦績データを表示・解析します
Compact Page Title (24px / weight 700 / tracking -0.025em).fusou-page-title-compact (フォーム・設定・補助画面用)
お問い合わせ・削除申請
Contact & Takedown Request
Section Heading (28px / weight 600 / line-height 1.20)セクション大見出し
海域別勝率推移サマリー
Card Title (20px / weight 600) & Sub-heading (16px / weight 600)カード内見出し・サブ見出し
第一艦隊：機動部隊本隊
空母機動部隊 編成パラメータ
Body (14px / weight 400 / line-height 1.55) & Small (11px / weight 400)標準本文テキストおよび補足注記
FUSOU はプロキシサーバーを通じて艦これの通信データを抽出し、戦闘結果の即時集計、編成シミュレーション、パラメータ推移グラフを提供する次世代解析基盤です。
※本データはユーザーのクライアント環境でリアルタイム抽出された最新の通信パケットに基づいています。
Hyphen List (.fusou-hyphen-list)箇条書き統一仕様（DESIGN.MD Section 09）
- ディスク型（丸中黒 •）ではなくハイフンマーカー（-）を使用
- インラインスタイルでの直書きを排除し共通クラスで一括制御
- 説明文や案内リストにおいて統一感のあるタイポグラフィを提供
04 / Cards & Surfaces
ドロップシャドウを排除し、境界線（ボーダー）のコントラストで階層を表現するカード設計。
Level 0
Standard Card
データパネルや通常のコンテンツグループ用。クラス `.fusou-card` を使用。
border: 1px solid base-300/60
radius: 12px / shadow: none
radius: 12px / shadow: none
Level 1
Prominent Card
ワークフローや重要なグループを強調したい場合に使用。より明確な境界線コントラスト。
border: #363636 (dark) / high contrast
radius: 12px / shadow: none
radius: 12px / shadow: none
Level 3 (Accent)
Accent Card
チュートリアル、オンボーディング、特別なステータスコールアウト専用。
border: rgba(62, 207, 142, 0.28)
radius: 12px / accent highlight
radius: 12px / accent highlight
Interactive
Interactive Card
クリック可能なカード項目（ドロップ一覧の艦船カード、選択グリッド等）。
.fusou-card-interactive
hover: border-primary/50 shadow-sm
hover: border-primary/50 shadow-sm
05 / Form Elements & Single Focus Ring
フォーカス時の二重線（outline + ring）を排除したシャープな入力部品群。ツールバー内での高さ統一。
タップ・フォーカスで単一枠線が点灯
ツールバー内で input と高さを統一
エラー時は枠線色＋説明文を必ず併記
Toggles & Checkboxes
06 / Tabs & Segmented Navigation
ページ内タブの統一パターン。ダッシュボード型（Boxed）とシミュレータ型（Bordered）。
Pattern A: Boxed Segment Tabs (Recommended for Data Views)
戦闘データやクエスト等のデータ切り替えに使用するセグメント型タブ。
Pattern B: Standard FUSOU Tabs (.fusou-tabs & FusouTabs.tsx)
WAI-ARIA (role="tablist" / role="tab") に準拠した共通下線型タブ。Solid では `<FusouTabs />` を使用。
Classes: .fusou-tabs / .fusou-tab (.fusou-tab-active | .fusou-tab-inactive)
Pattern C: Integrated Tab & Search/Filter Toolbar
タブの右側に統合検索・フィルターボタン（件数バッジ付き）を配置し、直下に適用中フィルタータグ（ActiveFilterChips）を展開する安定レイアウト。
適用中:海域:4-5✕勝敗:S勝利✕条件をすべてクリア
07 / Status Alerts & Badges
共通コンポーネント AlertBox.astro による統一アラート通知と DaisyUI ステータスバッジ。
情報通知 (Info Alert)
プロキシ経由で新しいマスターデータ（Version 2026.09）を受信しました。最新の艦娘・装備スペックが反映されています。
完了通知 (Success Alert)
編成シミュレーション計算が正常に完了しました。制空値: 412 (優勢確定 / 確率 99.4%)
注意喚起 (Warning Alert)
第2艦隊 3番艦「夕立改二」の疲労度（Cond値: 28）が低下しています。出撃前に休養を推奨します。
エラー通知 (Error Alert)
APIサーバーとの通信がタイムアウトしました。ローカルプロキシの接続状態を確認してください。
Status Badges
PrimarySecondaryInfoS勝利中破大破進撃不可OutlineGhost
Victory Rank Badges (<VictoryRankBadge />)
SABCDE
Active Filter Chips (<ActiveFilterChips />)
適用中のフィルター条件の視認化、個別解除（✕）および全クリアアクションを提供する共通チップコンポーネント。
適用中:海域:7-1 (ブルネイ泊地沖)勝敗:S勝利
08 / Reusable Layout Primitives
画面全体の余白・コンテナ幅・フッター注記を統一するための基盤コンポーネント。
Layout Primitives Specifications
| コンポーネント / クラス | 役割 | 標準設定 / 値 |
|---|---|---|
| PageShell.astro | ページ外枠（上部余白 pt-16、背景 bg-base-200、一元管理コンテナ） | container="compact" (max-w-lg) | "narrow" (max-w-2xl) | "default" (1440px) | "wide" (1500px) |
| DocsLayout.astro | ドキュメント 3 カラム統合レイアウト（LeftMenu / Main / RightMenu） | Layout.astro 基底、SEO・アナリティクス・Mermaid・KaTeX 統合 |
| ErrorView.astro | 404 / 500 / システムエラー共通表示フレーム | PageShell センタリング、fusou-card、fusou-btn-primary、text-error |
| ShipTypeBadge.tsx | 艦種・速力バッジ（stype / speed 一元表示） | stype, short, size="xs"|"sm", variant="outline"|"neutral" |
| MapAreaGrid.tsx | 海域選択用 5 列レスポンシブグリッド | エリア別見出し、マップキー/名称、ドロップ件数バッジ、選択状態ハイライト |
| PageHeader.astro | Astro ページ用タイトル・サブタイトル・アクションスロット | compact= (30px/w700), compact=true (24px/w700) |
| FusouPageHeader.tsx | Solid SPA ダッシュボード用共通ヘッダー | title, subtitle, actions, compact |
| FusouTabs.tsx | WAI-ARIA 準拠の共通タブナビゲーション | tabs, activeTab, onChange, role="tablist" |
| FusouModal.tsx | 標準モーダルダイアログ（角丸・バックドロップ・フッター内蔵） | maxWidth="sm"|"md"|"lg"|"xl"|"2xl", title, actions |
| ActiveFilterChips.tsx | 適用中フィルターの視認化・個別解除(✕)・一括クリア | items: FilterChipItem[], onClearAll?: () => void |
| BattleSearchFilterBar.tsx | タブ右側に配置する検索・フィルター統合ツールバー | activeFilterItems, onClearAll, onOpenFilterModal |
| EmptyState.tsx | データなし・一覧空状態の標準コンテナ | size="compact"|"standard"|"large", message, hint |
| LoadingState.tsx | スピナー＋ローディングメッセージ標準コンテナ | size="xs"|"sm"|"md"|"lg", message, minHeight |
| ShipBanner.tsx | 艦船バナー画像の安全描画（プレースホルダー・フェードイン） | src, alt, class="h-6 w-24" |
| .fusou-footer-note | ページ最下部の標準注記・補足クレジット枠 | border-t border-base-300/60 mt-8 py-4 px-4 text-center |
標準フッター注記の実物サンプル: