# デザイン方針: モダン・クリーン（Modern / Clean）

## 1. デザインコンセプト
「整っていて、速そうで、信頼できる」。ブランドカラー1色を機能的に使い、明快な階層と一貫したコンポーネントで、初見でも操作が分かるUIを作る。

## 2. デザインキーワード
整然 / 信頼 / 機能的 / 明快 / システマティック

## 3. カラーパレット
- 背景 #F8FAFC: ページ背景。わずかに青みのグレー
- サーフェス #FFFFFF: カード・モーダル
- 本文 #0F172A: 見出し・本文
- 補足 #64748B: キャプション・ラベル
- ボーダー #E2E8F0: 罫線・入力欄の枠
- プライマリ #2563EB: ボタン・リンク・選択状態（ブランドカラーに置換）
- 成功 #16A34A: 完了・有効
- エラー #DC2626: バリデーション・破壊的操作

## 4. タイポグラフィ
- 見出し: サンセリフ、ウェイト700、字間-0.02em。短く言い切る
- 本文フォント: Inter / Noto Sans JP。UIテキストは14px基準
- 数字: tabular-nums。ダッシュボードの数値は太めで大きく
- ウェイト: 400 / 500 / 700
- サイズ階層: 12 / 14 / 16 / 20 / 24 / 32px
- 行間: 本文1.6、UIラベル1.4
- 字間: 見出しのみ詰める。小さな大文字ラベルは+0.05em
- 和欧混植: 英数字はInter、日本語はNoto Sans JPをfont-familyで並べる

## 5. レイアウトルール
- スペーシング 4px基準（4 / 8 / 12 / 16 / 24 / 32 / 48）
- コンテンツ最大幅 1200px、サイドバー 240〜280px
- 12カラムグリッド、ガター24px
- 情報密度は標準。テーブルは高密度も可
- 角丸は8px基準（小要素6px、モーダル12px）
- カードは背景色の差+1pxボーダーで区切る

## 6. UIコンポーネントルール
- ボタン: 角丸8px、高さ40px。primary=ブランド色塗り、secondary=白+ボーダー、danger=赤。Hoverで少し暗く、Pressでさらに暗く。Focusは2pxリング
- カード: 白背景・1pxボーダー・角丸12px・極薄の影(0 1px 2px)。Hoverで影を1段強く
- 入力フォーム: 角丸8px、高さ40px、1pxボーダー。Focusでブランド色ボーダー+リング。エラーは赤ボーダー+下にメッセージ
- モーダル: 角丸12px、影は大きく柔らかく、オーバーレイ黒0.5
- タブ: 下線2pxブランド色。またはピル型の背景切替
- ナビゲーション: サイドバー型。選択中は薄いブランド色背景+濃い文字
- リスト: 行間は1pxの区切り線。Hoverで薄いグレー背景
- バッジ: 薄い色背景+濃い文字（例: 青10%+青700）。角丸は全丸
- アイコン: 線画 20px、stroke 1.5〜2px（Lucide / Heroicons）
- トースト: 白背景・左に状態色のアイコン・右上表示
- 空状態: 中央に線画アイコン+見出し+説明+primaryボタン
- ローディング: スケルトン（実コンテンツと同じ形）。ボタン内はスピナー

## 7. 装飾ルール
- シャドウは3段階（sm / md / lg）を定義し、それ以外を使わない
- グラデーションはヒーローやマーケ面のみ
- イラストは使うなら線画かフラットで、ブランド色に統一
- 背景パターンは使わない

## 8. アニメーションルール
- duration 150ms（Hover）/ 200ms（出現）/ 300ms（モーダル）、easing は cubic-bezier(0.2, 0, 0, 1)
- Hover は背景色・影の変化。Pressは色を1段濃く
- モーダルはフェード+わずかなscale(0.96→1)
- ドロップダウンは上からフェード+4px移動
- prefers-reduced-motion で移動・scaleを無効化

## 9. デザイン原則
- 1画面のプライマリアクションは1つ
- 状態（Hover / Focus / Disabled / Error）を全コンポーネントで定義する
- トークン（色・余白・角丸・影）以外の値を使わない
- 文字は短く、動詞で始める
- アクセシビリティ（コントラストAA、キーボード操作）を標準装備

## 10. NGデザイン
- トークン外の色や余白のハードコード
- シャドウの多用・強いシャドウ
- 多色のバッジ乱用
- アイコンだけのボタン（ラベルなし）
- ボタンサイズや角丸の不統一

## 11. 参考になるサービス・デザインスタイル
- Stripe
- Linear
- Vercel Dashboard
- Tailwind UI
- Slack

## 12. 一言で表現すると
信頼できる道具の顔。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">Pro</span>
    <h3>チームを招待</h3>
    <p>メンバーを追加してプロジェクトを共有しましょう。</p>
    <label class="field">
      <span>メールアドレス</span>
      <input type="email" placeholder="you@example.com">
    </label>
    <div class="actions">
      <button class="btn primary">招待を送る</button>
      <button class="btn ghost">キャンセル</button>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Inter", "Noto Sans JP", sans-serif; color: #0f172a; }
.card {
  width: 300px; padding: 24px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .05);
}
.badge {
  display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 500;
  background: #dbeafe; color: #1d4ed8; border-radius: 999px;
}
h3 { margin: 12px 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #64748b; }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; font-size: 14px;
  border: 1px solid #e2e8f0; border-radius: 8px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / .2); }
.actions { display: flex; gap: 8px; }
.btn {
  height: 40px; padding: 0 16px; font-size: 14px; font-weight: 500; border-radius: 8px;
  cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.btn.primary { background: #2563eb; color: #fff; border: 1px solid #2563eb; }
.btn.primary:hover { background: #1d4ed8; }
.btn.primary:active { background: #1e40af; }
.btn.ghost { background: #fff; color: #0f172a; border: 1px solid #e2e8f0; }
.btn.ghost:hover { background: #f8fafc; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgb(37 99 235 / .3); outline: none; }
```