# デザイン方針: テック・フューチャリスティック（Tech / Futuristic）

## 1. デザインコンセプト
「精密な機械の内側」。ターミナルや計器盤のメタファーで、正確さと速さを視覚化する。光は控えめに、情報の密度で先進性を出す。

## 2. デザインキーワード
精密 / ターミナル / グリッド / 発光 / データ

## 3. カラーパレット
- 背景 #09090B: ページ背景
- サーフェス #111114: カード・パネル
- 本文 #E4E4E7: 本文
- 補足 #71717A: ラベル・キャプション
- ボーダー #27272A: 罫線・グリッド線
- アクセント #22D3EE: シアン。アクション・発光・グラフ
- サブアクセント #A78BFA: 紫。第2系列・AI表現
- 成功 #4ADE80: ステータス

## 4. タイポグラフィ
- 見出し: 幾何学サンセリフ（Space Grotesk / Geist）ウェイト500〜600、字間-0.02em
- 本文フォント: Geist / Inter。数値やコードはモノスペース（JetBrains Mono / Geist Mono）
- 数字: モノスペース・tabular-nums。ダッシュボードの主役として大きく
- ウェイト: 400 / 500 / 600
- サイズ階層: 11 / 13 / 14 / 18 / 24 / 36px。小さめの階層
- 行間: 本文1.6、モノ1.5
- 字間: モノスペースのラベルは+0.08em、大文字
- 和欧混植: 日本語はNoto Sans JP。英数字は必ずモノスペースかGeistで分離

## 5. レイアウトルール
- スペーシング 4px基準（4 / 8 / 12 / 16 / 24 / 32）
- コンテンツ最大幅 1280px以上。ワイドに使う
- 背景に薄いグリッド線（32px）を敷く
- 情報密度は高い。パネルを敷き詰める
- 角丸は4〜6px。小さめ
- パネルは1pxボーダーで区切り、影は使わない

## 6. UIコンポーネントルール
- ボタン: 角丸6px。primary=シアンの塗り+黒文字、secondary=サーフェス+ボーダー。Hoverで外光(0 0 0 1px + 0 0 12px シアン40%)。Pressで暗く
- カード: サーフェス色、1pxボーダー、角丸6px。左上に小さなモノスペースのラベル。Hoverでボーダーがアクセント色に
- 入力フォーム: モノスペース、角丸6px、暗い背景。Focusでアクセントのボーダー+薄い外光
- モーダル: コマンドパレット風（上部中央・幅640px）。オーバーレイ黒0.7+ブラー
- タブ: 下線1pxアクセント色。ラベルはモノスペース大文字
- ナビゲーション: サイドバー。アイコン+ラベル、選択中は左に2pxのアクセントバー
- リスト: テーブル型。ゼブラなし、行Hoverで背景を1段明るく
- バッジ: モノスペース、角丸4px、色10%背景+色文字+色のドット
- アイコン: 線画 16px、stroke 1.5px
- トースト: ログ風（時刻+メッセージ）。右下に積み上げ
- 空状態: モノスペースで「No data」+コマンド例
- ローディング: 点滅カーソル、プログレスライン、またはスケルトン

## 7. 装飾ルール
- グリッド線・ドットグリッド・座標軸を背景に
- 発光（グロー）はアクセント色のみ、控えめに
- グラデーションは暗→アクセントの放射状を背景の1箇所のみ
- 微細なノイズ・スキャンラインは薄く
- イラスト・写真は基本使わない。図解・データ・3Dワイヤーフレームで

## 8. アニメーションルール
- duration 120〜200ms、easing は ease-out。速く正確に
- Hover はボーダー色・外光の変化
- 出現はフェード+わずかな上昇。数値はカウントアップ
- ターミナル風のタイピング表示をヒーローに
- prefers-reduced-motion ではカウントアップ・タイピングを即時表示

## 9. デザイン原則
- 装飾よりデータ。数字とグラフが主役
- 発光は「反応」にだけ使う
- モノスペースで「機械が話している」感を統一
- 密度は高く、しかし揃える（グリッド厳守）
- 暗い背景でもコントラストAAを守る

## 10. NGデザイン
- 暖色・パステル
- ラウンドゴシック・大きな角丸
- ぼかしの強いドロップシャドウ
- イラスト・写真の多用
- 発光の乱用（ネオン全開）

## 11. 参考になるサービス・デザインスタイル
- Vercel
- Linear
- Raycast
- Supabase
- Cursor
- Bloomberg Terminal

## 12. 一言で表現すると
正確さが、そのまま美しさになる。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">● ONLINE</span>
    <h3>API キーを発行</h3>
    <p>発行後はダッシュボードから使用状況を確認できます。</p>
    <label class="field">
      <span>メールアドレス</span>
      <input type="email" placeholder="you@example.com">
    </label>
    <div class="actions">
      <button class="btn primary">Generate</button>
      <button class="btn ghost">キャンセル</button>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Geist", "Inter", "Noto Sans JP", sans-serif; color: #e4e4e7; }
.card {
  width: 300px; padding: 22px; background: #111114;
  border: 1px solid #27272a; border-radius: 6px;
  background-image: linear-gradient(#27272a55 1px, transparent 1px), linear-gradient(90deg, #27272a55 1px, transparent 1px);
  background-size: 24px 24px; transition: border-color .15s ease-out;
}
.card:hover { border-color: #22d3ee; }
.badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; letter-spacing: .08em;
  font-family: "JetBrains Mono", monospace; background: rgb(74 222 128 / .12); color: #4ade80; border-radius: 4px;
}
h3 { margin: 12px 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #71717a; }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-family: "JetBrains Mono", monospace; color: #71717a; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 13px; font-family: "JetBrains Mono", monospace;
  color: #e4e4e7; background: #09090b; border: 1px solid #27272a; border-radius: 6px; outline: none;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.field input:focus { border-color: #22d3ee; box-shadow: 0 0 0 1px #22d3ee, 0 0 12px rgb(34 211 238 / .3); }
.actions { display: flex; gap: 8px; }
.btn {
  padding: 8px 14px; font-size: 13px; font-weight: 500; border-radius: 6px; cursor: pointer;
  transition: box-shadow .12s ease-out, background-color .12s ease-out;
}
.btn.primary { background: #22d3ee; color: #09090b; border: 1px solid #22d3ee; }
.btn.primary:hover { box-shadow: 0 0 0 1px #22d3ee, 0 0 14px rgb(34 211 238 / .4); }
.btn.primary:active { background: #06b6d4; }
.btn.ghost { background: #111114; color: #e4e4e7; border: 1px solid #27272a; }
.btn.ghost:hover { border-color: #71717a; }
```