# デザイン方針: Y2K（Y2K / Cyber Nostalgia）

## 1. デザインコンセプト
「未来を夢見た過去」。クローム・ホログラム・ピクセルといった初期インターネットの記号を、現代の精度で再構築する。うるさいが、意図的にうるさい。

## 2. デザインキーワード
クローム / ホログラム / ピクセル / ネオン / サイバー

## 3. カラーパレット
- 背景 #0B0B14: ほぼ黒の紺。またはシルバー
- サーフェス #16162A: カード
- 本文 #F2F2FF: 白に近い薄紫
- ネオンピンク #FF3DCC: メイン。ボタン・強調
- エレクトリックブルー #3D8BFF: サブ。リンク
- ライムグリーン #B6FF3D: アクセント。バッジ・成功
- クローム #C8CCD8: メタリックグラデーションの基準色

## 4. タイポグラフィ
- 見出し: ピクセルフォント（Press Start 2P / DotGothic16）または幅広サンセリフ（Space Grotesk）
- 本文フォント: モノスペース（Space Mono / IBM Plex Mono）または幾何学サンセリフ
- 数字: モノスペース・7セグ風でもよい
- ウェイト: 400 / 700
- サイズ階層: 12 / 14 / 18 / 28 / 48px。見出しは極端に大きく
- 行間: 本文1.6、見出し1.1
- 字間: ラベルは+0.2em、見出しは-0.02em〜+0.1em を大胆に
- 和欧混植: 日本語はDotGothic16など、英字と粒度を揃える

## 5. レイアウトルール
- スペーシング 8px基準だが、要素の重なり・はみ出しを許可
- コンテンツ最大幅 1200px
- 斜めのセクション・回転したテキスト・ウィンドウ風の枠
- 情報密度は高め。にぎやかに
- 角丸は0（ピクセル）または全丸（カプセル）の両極
- OSウィンドウ風のタイトルバー付きカード

## 6. UIコンポーネントルール
- ボタン: クロームのグラデーション（上明・下暗）+1pxのハイライト線。またはネオン色の塗り+外光（box-shadow 0 0 16px）。Hoverで発光強く、Pressで反転
- カード: ウィンドウ風：タイトルバー+3つのボタン+1pxの明るいボーダー。背景はサーフェス色
- 入力フォーム: 角丸0、内側に凹んだ見た目（inset shadow）。Focusでネオンの外光
- モーダル: ウィンドウ風。オーバーレイはスキャンライン（繰り返しグラデーション）
- タブ: ブラウザタブ風の台形、または点滅する「>」カーソル
- ナビゲーション: マーキーテキストや点滅を一部に。上部固定
- バッジ: ライム地+黒文字、角丸0、「NEW!!」等
- アイコン: ピクセルアイコン、または3D風の光沢アイコン
- トースト: システムダイアログ風（アイコン+OKボタン）
- 空状態: 「404」風のピクセルアートや星のスクリーンセーバー
- ローディング: プログレスバー（分割された矩形）、またはホログラム回転

## 7. 装飾ルール
- ホログラム（虹色グラデーション）・クローム（メタリック）を主要装飾に
- ピクセル・スター・スパークル（✦）・グリッド線を散らす
- グロー（外光）とスキャンラインを使う
- blob状の3Dオブジェクト・液体金属
- 微細なノイズ・VHS風のずれ（意図的に少量）

## 8. アニメーションルール
- duration 100〜300ms。easing は linear や steps() で機械的に
- Hover はグロー強化+色の反転。点滅も可
- マーキー・回転・グリッチをアクセントに（常時は避ける）
- ホログラムは常にゆっくり色相回転（hue-rotate）
- prefers-reduced-motion では点滅・グリッチ・マーキーを止める（必須）

## 9. デザイン原則
- 「意図的な過剰」。中途半端に抑えない
- ただし本文テキストは必ず読める（本文はモノスペースで平文）
- 記号（星・スパークル・カーソル）を語彙として統一
- 光と反射でレイヤーを作る
- 点滅・グリッチには必ずreduced-motion対応

## 10. NGデザイン
- 生成り・アースカラーなど温かい色
- セリフ体・明朝
- ぼかしの柔らかい影
- 控えめなミニマル表現
- 本文まで装飾書体にすること

## 11. 参考になるサービス・デザインスタイル
- Charli XCX のビジュアル
- PC Music
- Windows 98 / iMac G3
- Poolsuite
- Are.na のY2K系デザイン集

## 12. 一言で表現すると
2000年が想像した2026年。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <div class="titlebar"><span></span><span></span><span></span> <b>welcome.exe</b></div>
    <div class="body">
      <span class="badge">NEW!!</span>
      <h3>ENTER THE VOID ✦</h3>
      <p>&gt; あなたのIDを入力してください_</p>
      <label class="field"><span>USER_ID</span><input type="text" placeholder="guest_0001"></label>
      <div class="actions">
        <button class="btn primary">CONNECT</button>
        <button class="btn ghost">CANCEL</button>
      </div>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Space Mono", "DotGothic16", monospace; color: #f2f2ff; }
.card {
  width: 320px; background: #16162a; border: 1px solid #6a6a8a;
  box-shadow: 0 0 24px rgb(255 61 204 / .35), inset 0 1px 0 #fff3;
}
.titlebar {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px;
  background: linear-gradient(#e8ebf3, #b7bccb); color: #16162a;
}
.titlebar span { width: 10px; height: 10px; border-radius: 50%; background: #16162a; }
.titlebar b { margin-left: auto; }
.body { padding: 20px; }
.badge {
  display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: 700;
  background: #b6ff3d; color: #0b0b14;
}
h3 {
  margin: 12px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: .05em;
  background: linear-gradient(90deg, #ff3dcc, #3d8bff, #b6ff3d, #ff3dcc);
  background-size: 300%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: 300% 0; } }
p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #a9a9c9; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 11px; letter-spacing: .2em; color: #3d8bff; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 13px; font-family: inherit;
  color: #f2f2ff; background: #0b0b14; border: 1px solid #6a6a8a; outline: none;
  box-shadow: inset 2px 2px 0 #000; transition: box-shadow .1s linear;
}
.field input:focus { box-shadow: inset 2px 2px 0 #000, 0 0 12px #ff3dcc; }
.actions { display: flex; gap: 10px; }
.btn {
  padding: 9px 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; font-family: inherit;
  border: 1px solid #fff8; border-radius: 0; cursor: pointer; transition: box-shadow .1s linear, filter .1s linear;
}
.btn.primary {
  background: linear-gradient(#ff7ade, #ff3dcc 50%, #c21f9a); color: #fff;
  box-shadow: 0 0 10px rgb(255 61 204 / .6);
}
.btn.primary:hover { box-shadow: 0 0 20px #ff3dcc; }
.btn.primary:active { filter: invert(1); }
.btn.ghost { background: linear-gradient(#e8ebf3, #b7bccb); color: #16162a; }
@media (prefers-reduced-motion: reduce) { h3 { animation: none; } }
```