# デザインスタイルガイド

## カラー
- **プライマリカラー**: ダークグリーン（#3ECF8E または類似色）ロゴやプライマリボタンに使用
- **背景色**:
  - ダークモードインターフェースで非常に暗いグレー/ブラック（#121212 または類似色）をメイン背景として使用
  - やや明るいダークグレー（#1E1E1E または類似色）をセカンダリパネルやカードに使用
  - ダークブルーグレーのコードエディタ背景（#0F1214 または類似色）
- **テキストカラー**:
  - ホワイト（#FFFFFF）をプライマリテキストに使用
  - ライトグレー（#A0A0A0 または類似色）をセカンダリテキストに使用
  - コード内のシンタックスハイライトカラーには、ライトブルー、グリーン、ホワイトなどを使用
- **ステータスカラー**:
  - 「完了」ステータスにはグリーン
  - 「進行中」ステータスにはアンバー/イエロー
  - 「未開始」ステータスにはグレー

## タイポグラフィ
- **フォントファミリー**: サンセリフシステムフォントスタック（おそらくInter、SF Pro、または類似のモダンなサンセリフ）
- **フォントサイズ**:
  - 小さめ（12-13px）をコードや詳細なインターフェース要素に使用
  - 中間（14-15px）をメインインターフェーステキストやナビゲーションに使用
  - 大きめ（16-18px）を見出しや重要なセクションに使用

## レイアウト
- **グリッドシステム**: 複数のカラムレイアウトを使用し、コンテンツを整理
- **サイドバー**: 左側に固定されたナビゲーションサイドバー
- **コンテンツエリア**: メインコンテンツが中央の広いエリアに配置
- **カード**: 機能や情報を区切るためのカードベースのレイアウト
- **分割パネル**: コードエディタと出力結果を表示するための分割パネル

## 余白
- **内部余白（パディング）**:
  - カード内: 中程度（16-24px）
  - ボタン: 水平方向に広め（12-16px）、垂直方向にやや狭め（8-10px）
  - テーブルセル: コンパクト（8-12px）
- **要素間の余白（マージン）**:
  - セクション間: 広め（32-48px）
  - 関連アイテム間: 中程度（16-24px）
  - テキスト行間: コンパクト（1.4-1.5倍の行の高さ）

## 角の形状
- **ボタン**: わずかに丸みを帯びた角（4-6px）
- **カード/パネル**: 中程度の丸み（8-10px）
- **入力フィールド**: 軽い丸み（4px）
- **全体的な印象**: ソフトで現代的な角の処理、完全な四角形は避けている

## エレベーション
- **レイヤー階層**:
  - サイドバー: 最前面レイヤー、わずかなドロップシャドウ
  - メインコンテンツカード: 中間レイヤー
  - 背景: 最背面レイヤー
- **シャドウ**: 
  - 控えめでソフトなドロップシャドウを使用
  - カードやモーダルにはより明確なシャドウを使用してZ軸の位置を示す

## インタラクション
- **ホバー効果**: 要素上にカーソルを置くと微妙な明るさの変化
- **アクティブ状態**: クリック時に軽い押し込み効果
- **トランジション**: スムーズで自然なアニメーション（150-250ms）
- **フォーカス状態**: フォーカスされた要素には明確なアウトラインまたはハイライト
- **フィードバック**: アクション完了時の視覚的フィードバック（色の変化、軽いアニメーション）