# デザイン方針: レトロ（Retro / Vintage）

## 1. デザインコンセプト
「時間の重なり」。印刷物のような質感と少し褪せた配色で、デジタルの均質さをあえて崩す。手仕事の温度と物語性を感じさせる。

## 2. デザインキーワード
褪せた色 / 紙の質感 / 活版 / 物語 / 手仕事

## 3. カラーパレット
- 背景 #F3E9D2: 古紙色のページ背景
- サーフェス #FAF3E3: カード
- 本文 #2E2A25: インク色
- 補足 #7A6E5F: キャプション
- メイン #B4432F: 褪せた赤。ボタン・強調
- サブ #2F5D62: 褪せた青緑。リンク・バッジ
- マスタード #D9A441: ハイライト
- ボーダー #2E2A25: 罫線（インク色の細線または二重線）

## 4. タイポグラフィ
- 見出し: スラブセリフ / ディスプレイセリフ（Abril Fatface / Rozha One）、日本語は太めの明朝。大文字+広い字間も可
- 本文フォント: セリフ（Lora / Noto Serif JP）またはタイプライター系
- 数字: オールドスタイル数字、または丸で囲んだ番号
- ウェイト: 400 / 700。見出しは極太も可
- サイズ階層: 14 / 16 / 22 / 32 / 48px
- 行間: 本文1.75、見出し1.2
- 字間: 小さな大文字ラベルは+0.15em
- 和欧混植: 英字はセリフ、日本語は明朝で「印刷物」の統一感を

## 5. レイアウトルール
- スペーシング 8px基準（8 / 16 / 24 / 40 / 64）
- コンテンツ最大幅 960px
- 雑誌のような多段組（2〜3カラム）・段間の縦罫線
- 情報密度は標準
- 角丸は0〜4px。角は立てる
- 二重罫線・飾り罫でセクションを区切る

## 6. UIコンポーネントルール
- ボタン: 角丸2px、インク色の1pxボーダー+メイン色の塗り。文字は大文字+字間広め。Hoverで塗りとボーダーを反転
- カード: サーフェス色、インク色の1pxボーダー、角丸0。影はなし、または2px 2px 0のハードシャドウ
- 入力フォーム: 下線のみ、または1pxボーダーで角丸0。Focusで下線が太く
- モーダル: 角丸0、二重罫線の枠。オーバーレイは古紙色ではなくインク0.6
- タブ: 見出し書体の大文字。選択は下線（2px）
- ナビゲーション: 上部に一列、区切りは縦線「|」
- バッジ: スタンプ風（枠線+回転-3deg）、またはマスタード地
- アイコン: 線画。手描き・木版風も可
- トースト: インク色背景・古紙色文字。角丸0
- 空状態: ヴィンテージイラストまたは飾り罫+一文
- ローディング: タイプライターの点滅カーソル、または「…」の点滅

## 7. 装飾ルール
- 紙のテクスチャ・微細なノイズを背景に重ねる
- 飾り罫（二重線・点線・ダイヤ）・コーナー装飾を使う
- 写真は粒子・褪色フィルタで統一
- グラデーション・ブラー・ガラス表現は使わない

## 8. アニメーションルール
- duration 200〜300ms、easing は steps() やlinearも可（機械的な動き）
- Hover は色の反転。滑らかに動かさない
- 出現はフェードのみ、またはタイプライター
- スタンプ風バッジは押される動き（scale 1.2→1、steps）
- prefers-reduced-motion では静止

## 9. デザイン原則
- 印刷物として成立するかを基準に判断する
- 色は褪せた彩度で統一（鮮やかな色を混ぜない）
- 罫線は装飾であり構造でもある
- 角を立てる
- 書体を主役にする

## 10. NGデザイン
- ネオン・パステルなど現代的な鮮やかさ
- 大きな角丸・ぼかしシャドウ
- グラス・グラデーション表現
- サンセリフのみの構成
- なめらかすぎるアニメーション

## 11. 参考になるサービス・デザインスタイル
- Kinfolk
- Monocle
- Fender のビンテージ系
- Stumptown Coffee
- 昭和のマッチ箱・活版印刷

## 12. 一言で表現すると
古紙に刷られた、いまの情報。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">EST. 1972</span>
    <h3>Morning Blend</h3>
    <p>創業当時から変わらぬ焙煎で、深いコクを。</p>
    <label class="field">
      <span>メールアドレス</span>
      <input type="email" placeholder="you@example.com">
    </label>
    <div class="actions">
      <button class="btn primary">Order</button>
      <button class="btn ghost">キャンセル</button>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Lora", "Noto Serif JP", serif; color: #2e2a25; }
.card {
  width: 300px; padding: 24px; background: #faf3e3;
  border: 1px solid #2e2a25; outline: 1px solid #2e2a25; outline-offset: 3px;
  box-shadow: 3px 3px 0 #2e2a25;
}
.badge {
  display: inline-block; padding: 3px 8px; font-size: 10px; letter-spacing: .15em;
  border: 1px solid #b4432f; color: #b4432f; rotate: -3deg; font-weight: 700;
}
h3 { margin: 14px 0 6px; font-size: 26px; font-weight: 700; font-family: "Abril Fatface", "Rozha One", serif; }
p { margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: #7a6e5f; }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 8px 0; font-size: 15px; font-family: inherit;
  background: transparent; border: 0; border-bottom: 1px solid #2e2a25; outline: none;
  transition: border-bottom-width .1s steps(2);
}
.field input:focus { border-bottom-width: 2px; }
.actions { display: flex; gap: 10px; }
.btn {
  padding: 10px 18px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700;
  border: 1px solid #2e2a25; border-radius: 2px; cursor: pointer; font-family: inherit;
  transition: background-color .2s, color .2s;
}
.btn.primary { background: #b4432f; color: #faf3e3; }
.btn.primary:hover { background: #2e2a25; }
.btn.ghost { background: transparent; color: #2e2a25; }
.btn.ghost:hover { background: #2e2a25; color: #faf3e3; }
```