Initial commit

skills/frontend-design-system/themes.md

@@ -0,0 +1,189 @@
+# Theme Examples
+
+このドキュメントでは、具体的なテーマ例とその実装ガイドラインを提供します。
+
+## 1. Nordic Minimal
+
+**コンセプト：** スカンジナビアデザインにインスパイアされた、機能美と静謐さ
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #2d3748; /* Charcoal */
+  --color-secondary: #718096; /* Slate */
+  --color-accent: #c17f59; /* Terracotta */
+  --color-background: #f7f5f3; /* Warm White */
+  --color-surface: #ffffff;
+  --color-text: #1a202c;
+  --color-text-muted: #4a5568;
+
+  /* Typography */
+  --font-heading: 'DM Serif Display', serif;
+  --font-body: 'DM Sans', sans-serif;
+
+  /* Spacing */
+  --space-unit: 8px;
+}
+```
+
+**特徴：**
+
+- 温かみのある白背景
+- テラコッタのアクセント
+- 大胆な余白
+- セリフ見出し × サンセリフ本文
+
+---
+
+## 2. Neon Brutalism
+
+**コンセプト：** ブルータリズムとサイバーパンクの融合、大胆で反抗的
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #000000;
+  --color-secondary: #ffffff;
+  --color-accent: #00ff88; /* Electric Green */
+  --color-accent-alt: #ff6b35; /* Safety Orange */
+  --color-background: #0a0a0a;
+  --color-surface: #1a1a1a;
+  --color-text: #ffffff;
+  --color-border: #333333;
+
+  /* Typography */
+  --font-heading: 'Space Grotesk', sans-serif;
+  --font-body: 'JetBrains Mono', monospace;
+
+  /* Effects */
+  --shadow-brutal: 4px 4px 0 var(--color-accent);
+  --border-brutal: 3px solid var(--color-secondary);
+}
+```
+
+**特徴：**
+
+- 高コントラスト
+- ハードシャドウ（ドロップシャドウなし）
+- モノスペースフォント
+- 太いボーダー
+
+---
+
+## 3. Organic Growth
+
+**コンセプト：** 自然と持続可能性、有機的な形状と穏やかな色調
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #2d4a3e; /* Forest */
+  --color-secondary: #8b7355; /* Earth */
+  --color-accent: #d4a574; /* Sand */
+  --color-background: #f5f1eb; /* Cream */
+  --color-surface: #ffffff;
+  --color-text: #2c3e2d;
+  --color-text-muted: #5d6b5e;
+
+  /* Typography */
+  --font-heading: 'Fraunces', serif;
+  --font-body: 'Work Sans', sans-serif;
+
+  /* Shapes */
+  --radius-organic: 60% 40% 30% 70% / 60% 30% 70% 40%;
+}
+```
+
+**特徴：**
+
+- アースカラーパレット
+- 有機的なブロブシェイプ
+- 手書き風アクセント
+- テクスチャ背景
+
+---
+
+## 4. Tech Noir
+
+**コンセプト：** ダークモードファースト、洗練されたテック感
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #6366f1; /* Indigo */
+  --color-secondary: #8b5cf6; /* Violet */
+  --color-accent: #22d3ee; /* Cyan */
+  --color-background: #0f0f23; /* Deep Navy */
+  --color-surface: #1a1a2e;
+  --color-surface-elevated: #252542;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+
+  /* Typography */
+  --font-heading: 'Syne', sans-serif;
+  --font-body: 'Outfit', sans-serif;
+
+  /* Effects */
+  --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
+  --gradient-hero: linear-gradient(
+    135deg,
+    #6366f1 0%,
+    #8b5cf6 50%,
+    #22d3ee 100%
+  );
+}
+```
+
+**特徴：**
+
+- 深いネイビー背景
+- グロー効果のアクセント
+- グラデーションのポイント使用
+- モダンなサンセリフ
+
+---
+
+## 5. Editorial Elegance
+
+**コンセプト：** 雑誌のような洗練されたエディトリアルデザイン
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #1a1a1a;
+  --color-secondary: #6b7280;
+  --color-accent: #dc2626; /* Editorial Red */
+  --color-background: #fafafa;
+  --color-surface: #ffffff;
+  --color-text: #111827;
+  --color-text-muted: #6b7280;
+
+  /* Typography */
+  --font-heading: 'Playfair Display', serif;
+  --font-body: 'Source Serif Pro', serif;
+  --font-accent: 'Libre Baskerville', serif;
+
+  /* Layout */
+  --column-width: 65ch;
+  --grid-editorial: 1fr 2fr 1fr;
+}
+```
+
+**特徴：**
+
+- クラシックなセリフ体
+- 赤のアクセント（見出し・リンク）
+- 65文字幅のコラム
+- 豊富な余白と行間
+
+---
+
+## Application Guidelines
+
+### テーマ適用時のチェックリスト
+
+- [ ] CSS変数として定義し、一貫性を確保
+- [ ] ダークモード/ライトモードの両方を考慮
+- [ ] アクセシビリティ（コントラスト比4.5:1以上）を確認
+- [ ] レスポンシブ時のフォントサイズ調整
+- [ ] インタラクティブ要素のホバー/フォーカス状態を定義