gh-oikon48-cc-frontend-skills/skills/frontend-design-system/themes.md

Theme Examples

このドキュメントでは、具体的なテーマ例とその実装ガイドラインを提供します。

1. Nordic Minimal

コンセプト： スカンジナビアデザインにインスパイアされた、機能美と静謐さ

: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

コンセプト： ブルータリズムとサイバーパンクの融合、大胆で反抗的

: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

コンセプト： 自然と持続可能性、有機的な形状と穏やかな色調

: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

コンセプト： ダークモードファースト、洗練されたテック感

: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

コンセプト： 雑誌のような洗練されたエディトリアルデザイン

: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以上）を確認
• レスポンシブ時のフォントサイズ調整
• インタラクティブ要素のホバー/フォーカス状態を定義