LIVING PRESS Design System Specification

1. デザインコアコンセプト

「紙の質感（Paper）× 新聞的罫線（Rule）× AIサイバー感（Neon/Mono）」を融合させた独自のWebデザインシステム。

伝統的な活版印刷や新聞の信頼感と、最新のAI/サイバー技術のダイナミズムを共存させる。

• Paper Palette: 落ち着いた紙のベースカラー（--paper, --paper-light, --paper-card）。完全な白（#FFFFFF）や黒（#000000）は避け、わずかに温かみやテクスチャを感じさせる色を用いる。
• Newspaper Rules: 伝統的メディアを思わせる繊細な罫線表現（--rule, --rule-red）。コンテンツの区切りには1pxの実線を用い、階層構造を明確にする。
• AI Live Accent: monoフォント（--font-mono）、LIVEドット、Ticker、サイバー感のあるアクセントカラー（--primary, --accent-cyan）。

2. スタイリングルールとコンポーネント設計

2.1. スタイルのカプセル化

1. 汎用ユーティリティ: プロジェクト全体のベーススタイルや変数、汎用ユーティリティクラスは src/index.css (または globals.css) に集約する。
2. コンポーネント固有: コンポーネントに強く依存するスタイルは、各TSXファイル内の <style>{...}</style> (または CSS Modules) に記述し、影響範囲を限定する。

2.2. アニメーションとインタラクション

• アニメーションは CSS 変数と useReveal フックを活用（例: className="rv"）。
• ホバーエフェクトは罫線の色の変化や、わずかな背景色の変化（Paper Palette内での遷移）に留め、過度なシャドウやスケール拡大は避ける。

3. 具体的な実装パターン (❌ / ✅)

3.1. 背景色とボーダーの適用

❌ 悪い例（完全な白黒、無意味なシャドウ）

.card {
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

✅ 良い例（Paperカラーと細い罫線の使用）

.card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  box-shadow: none;
}
.card:hover {
  border-color: var(--primary);
}

3.2. タイポグラフィ

❌ 悪い例（システムフォントの無秩序な混在）

.title { font-family: sans-serif; }
.code { font-family: monospace; color: red; }

✅ 良い例（デザインシステムの変数を利用）

.title {
  font-family: var(--font-serif); /* 見出しは明朝体で格調高く */
  color: var(--text-main);
}
.live-data {
  font-family: var(--font-mono); /* AI的データは等幅フォント */
  color: var(--accent-cyan);
}

4. 検査用チェックリスト

• [ ] 完全な #000000 や #FFFFFF が直接ハードコードされていないか？
• [ ] コンポーネント間の境界は、シャドウではなく 1px の罫線（border）で区切られているか？
• [ ] アクセントカラー（Neon/Mono）が過剰に使われず、局所的な強調に留められているか？