---
version: alpha
name: Hulu Japan (hulu.jp)
description: 日本のストリーミングサービス。ダーク背景に鮮やかな緑アクセントを用いた、映像・マンガ配信プラットフォームのビジュアルアイデンティティ。
sources:
  - https://www.hulu.jp/
  - https://www.hulu.jp/about/
  - https://www.hulu.jp/devices/
  - https://news.hulu.jp/
  - https://brandpalettes.com/hulu-color-codes/
  - https://www.designyourway.net/blog/hulu-logo/
  - https://www.itsnicethat.com/news/dixon-baxi-hulu-brand-redesign-graphic-design-060421
  - https://colorswall.com/palette/109754
  - https://medium.com/hulu-tech-blog/building-night-mode-for-hulu-com-97593e43896
notes:
  - "直接証拠: Hulu Green (#1CE783) はブランドパレットサイト・公式プレスで確認済み。Woodsmoke (#040405) も同様に確認。"
  - "直接証拠: Graphik は DixonBaxi の 2021 年リブランド以降の公式ブランドフォント（ラテン文字）。"
  - "直接証拠: フッターはダーク背景・白文字で確認済み。"
  - "直接証拠: コンテンツ料金 ¥1,026/月（税込）、動画 14 万本以上。"
  - "推論: 日本語テキストのフォントは Graphik に対応するシステムフォント（Hiragino Sans / Yu Gothic / Noto Sans JP）と推定。"
  - "推論: セクション背景の細かい明暗変化（#040405 / #111111 等）は CSS ソースへのアクセス制限により直接確認不可。"
  - "推論: CTAボタンカラー (#1CE783 bg + #040405 text) はブランドパターンから導出。"
  - "注意: Hulu Japan は HJ Holdings, Inc. 運営で米国 Hulu / Disney とは別会社。ブランドロゴ・グリーンは共有しているが UI は独自実装。"
colors:
  primary: "#1CE783"
  primary-light: "#7CF4BC"
  primary-dark: "#1A9254"
  surface-darkest: "#040405"
  surface-dark: "#111111"
  surface-mid: "#1A1A1A"
  surface-panel: "#334251"
  neutral-slate: "#6B8090"
  accent-warm: "#B28D81"
  text-primary-dark: "#292C33"
  on-dark: "#FFFFFF"
  on-primary: "#040405"
typography:
  display:
    fontFamily: "'Graphik', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif"
    fontWeight: "700"
    fontSize: "clamp(2rem, 5vw, 4rem)"
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  h1:
    fontFamily: "'Graphik', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif"
    fontWeight: "700"
    fontSize: "2.25rem"
    lineHeight: "1.2"
  h2:
    fontFamily: "'Graphik', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif"
    fontWeight: "600"
    fontSize: "1.5rem"
    lineHeight: "1.3"
  body:
    fontFamily: "'Graphik', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif"
    fontWeight: "400"
    fontSize: "1rem"
    lineHeight: "1.6"
  label:
    fontFamily: "'Graphik', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif"
    fontWeight: "500"
    fontSize: "0.875rem"
    lineHeight: "1.4"
  price:
    fontWeight: "700"
    fontSize: "1.75rem"
    color: "{colors.on-dark}"
rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"
  vessel: "24px"
  pill: "9999px"
spacing:
  base: "8px"
  section-gap: "80px"
  card-gap: "16px"
  container-max: "1200px"
  container-padding: "24px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    color: "{colors.on-primary}"
    fontWeight: "700"
    fontSize: "1rem"
    borderRadius: "{rounded.pill}"
    padding: "14px 32px"
    border: "none"
    hover:
      backgroundColor: "{colors.primary-light}"
  button-secondary:
    backgroundColor: "transparent"
    color: "{colors.on-dark}"
    border: "2px solid {colors.on-dark}"
    borderRadius: "{rounded.pill}"
    padding: "12px 30px"
    hover:
      backgroundColor: "rgba(255,255,255,0.1)"
  card-content:
    backgroundColor: "{colors.surface-mid}"
    borderRadius: "{rounded.md}"
    overflow: "hidden"
    aspectRatio: "16/9 (thumbnail) or 2/3 (poster)"
    textColor: "{colors.on-dark}"
    hoverScale: "1.03"
    transition: "transform 200ms ease"
  card-feature:
    backgroundColor: "transparent"
    layout: "icon-top, text-below"
    iconColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    gap: "16px"
  nav:
    backgroundColor: "{colors.surface-darkest}"
    height: "60px"
    logoColor: "{colors.primary}"
    linkColor: "{colors.on-dark}"
    activeLinkColor: "{colors.primary}"
    borderBottom: "none (transparent)"
  input:
    backgroundColor: "{colors.surface-mid}"
    color: "{colors.on-dark}"
    border: "1px solid {colors.neutral-slate}"
    borderRadius: "{rounded.md}"
    padding: "12px 16px"
    focusBorder: "{colors.primary}"
  badge-exclusive:
    backgroundColor: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.sm}"
    fontSize: "0.75rem"
    fontWeight: "700"
    padding: "3px 8px"
  footer:
    backgroundColor: "{colors.surface-darkest}"
    textColor: "rgba(255,255,255,0.6)"
    linkColor: "rgba(255,255,255,0.8)"
    linkHover: "{colors.primary}"
    divider: "rgba(255,255,255,0.12)"
---

## Overview

Hulu Japan（hulu.jp）は HJ Holdings, Inc. が運営するストリーミング・デジタルコミックサービス。視覚言語は **ダーク背景 × Hulu Green (#1CE783) アクセント** を軸とし、2021 年に DixonBaxi が再設計したグローバル Hulu ブランドシステム（The Vessel）を踏襲している。日本語 UI には Graphik のシステムフォント代替（Hiragino Sans / Yu Gothic / Noto Sans JP）を使用。

コンテンツファースト設計で、サムネイル・ポスター画像が主役。UI 要素は暗く抑え、コンテンツを際立たせる。

---

## Colors

### Primary — Hulu Green
```
#1CE783  (RGB 28, 231, 131 / Pantone 7479 C)
```
ブランドの中核色。ロゴ、CTA ボタン、アクティブ状態、アイコンアクセントに使用。背景には使わない（コントラスト比が下がるため）。

| ロール | 値 |
|---|---|
| Primary | `#1CE783` |
| Primary Light (Tint) | `#7CF4BC` — ホバー、ハイライト |
| Primary Dark (Shade) | `#1A9254` — プレスト状態、影 |

### Surface — Dark Spectrum
```
#040405  Woodsmoke — 最暗（ヘッダー、フッター、モーダル背景）
#111111  — メインコンテンツ背景
#1A1A1A  — カード・パネル背景
#334251  — サイドパネル、インフォブロック
```

### Neutrals
```
#6B8090  Slate — プレースホルダー、補助テキスト、ボーダー
#B28D81  Warm Rosy — 温かみのあるアクセント（ジャンル・ラベル等）
#292C33  — ライトモード使用時の主テキスト
#FFFFFF  — ダーク背景上のテキスト・アイコン
```

### 使用禁止
- 緑 (#1CE783) を大面積の背景に使わない
- 白背景に白テキストを重ねない
- ライトグリーン (#7CF4BC) をメイン CTA に使わない（コントラスト不足）

---

## Typography

Hulu Japan はラテン文字に **Graphik** を使用。日本語は Graphik の太さ・構造感に合う **Hiragino Sans > Yu Gothic UI > Noto Sans JP** のフォールバックスタック。

```css
font-family: 'Graphik', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', sans-serif;
```

### スケール

| ロール | Size | Weight | 用途 |
|---|---|---|---|
| Display | clamp(2rem, 5vw, 4rem) | 700 | ヒーロー見出し |
| H1 | 2.25rem (36px) | 700 | ページタイトル |
| H2 | 1.5rem (24px) | 600 | セクション見出し |
| Body | 1rem (16px) | 400 | 本文、説明文 |
| Label | 0.875rem (14px) | 500 | ボタン、ラベル、バッジ |
| Price | 1.75rem (28px) | 700 | 料金表示 |
| Caption | 0.75rem (12px) | 400 | 補足、法的文書 |

### 日本語テキスト注意
- `letter-spacing` は日本語に対して `-0.02em` を適用しない（可読性低下）
- 見出しは `font-feature-settings: "palt" 1` でプロポーショナルかなを有効化
- 行間 (`line-height`) は日本語本文で `1.8` が望ましい

---

## Layout

### Container
- Max width: `1200px`、左右 `padding: 24px`
- セクション間隔: `80px`（モバイル: `48px`）

### Grid
- コンテンツカード: `repeat(auto-fill, minmax(180px, 1fr))` — モバイルで 2 列
- フィーチャーグリッド: 4 列（モバイル: 2 列）
- ヒーローセクション: フルワイド、テキスト中央揃え

### Z-Layers
```
Navigation  →  z-index: 100
Modal/Overlay → z-index: 200
Toast        →  z-index: 300
```

---

## Components

### CTA Button (Primary)
```css
background: #1CE783;
color: #040405;
font-weight: 700;
border-radius: 9999px;  /* pill shape */
padding: 14px 32px;
```
- ホバー: `background: #7CF4BC`
- フォーカス: `outline: 2px solid #1CE783; outline-offset: 2px`

### Content Card
```css
border-radius: 8px;
overflow: hidden;
background: #1A1A1A;
transition: transform 200ms ease;
```
- ホバー: `transform: scale(1.03)`
- サムネイル: `aspect-ratio: 16/9`（横長）または `2/3`（ポスター縦型）
- テキストラベル: `color: #FFFFFF; font-weight: 600`
- 独占バッジ: `background: #1CE783; color: #040405; border-radius: 4px`

### Navigation
```css
background: #040405;
height: 60px;
border-bottom: none;
```
- ロゴ: Hulu Green (#1CE783) のワードマーク
- アクティブリンク: `color: #1CE783`
- 非アクティブリンク: `color: rgba(255,255,255,0.8)`

### The Vessel (ブランドモチーフ)
Hulu ロゴの「U」字形から派生した丸角長方形。コンテンツのフレーミング、プロモーション画像のマスク、キャンペーングラフィックに使用する。`border-radius: 24px` が基準値。

---

## Imagery

### 写真・サムネイル
- ドラマ・映画: 高コントラスト、シネマティックな切り取り
- 背景に馴染む暗いグラデーションをサムネイル下部に重ねる（テキスト可読性確保）
- `linear-gradient(to top, rgba(4,4,5,0.9) 0%, transparent 50%)`

### アイコン
- 機能アイコン: 線画スタイル（stroke）、`color: #1CE783` または `#FFFFFF`
- デバイスアイコン: メーカーロゴ（Sony BRAVIA / Panasonic VIERA 等）を使用

### グラデーション
```css
/* ヒーローオーバーレイ */
background: linear-gradient(135deg, #040405 0%, #1A1A1A 100%);

/* グリーンアクセントグロー（スポット使用） */
background: radial-gradient(circle at center, rgba(28,231,131,0.15) 0%, transparent 70%);
```

### モーション
- コンテンツカードホバー: `transform: scale(1.03)` / `200ms ease`
- ナビゲーションドロップダウン: `opacity 150ms ease`
- ページトランジション: フェードイン `opacity 300ms ease`

---

## Logo And Usage

### ワードマーク
- カスタムジオメトリックサンセリフ（全小文字）
- 使用色: Hulu Green (`#1CE783`) — ダーク背景上
- ダーク背景以外: 白 (`#FFFFFF`) も使用可
- ネガカラーや色反転は禁止

### セーフゾーン
ロゴ周囲の余白 = **「u」の文字高さ分** を四方に確保。

### 禁止事項
- ロゴの色変更（緑・白以外への変更）
- ロゴの変形・回転・ドロップシャドウ追加
- ロゴを写真や複雑な背景に直接配置（背景を暗くしてから使用）

---

## Do's and Don'ts

### Do
- 緑 (`#1CE783`) は CTA ボタン・ロゴ・アクティブ状態など「行動を促す要素」に集中して使う
- 背景は常にダーク系（`#040405` ~ `#1A1A1A`）を基本とする
- コンテンツカードはサムネイル画像を主役にする（文字を詰め込まない）
- Vessel（丸角長方形）をコンテンツのフレームや装飾モチーフとして活用する
- 日本語テキストで `line-height: 1.8` 以上を確保する

### Don't
- 緑を広い背景色として使わない（視覚的に主張しすぎてコンテンツが埋もれる）
- ライトモード（白背景）をメイン UI に使わない（ブランドトーンと乖離する）
- ロゴや CTA ボタンに `#7CF4BC` や `#1A9254` を使わない（ブランドグリーンは `#1CE783` のみ）
- 日本語見出しに過度な `letter-spacing` をかけない
- コンテンツカードに過剰なテキストオーバーレイを重ねない（サムネイルの視認性優先）
- ウォームカラー (`#B28D81`) を主要 UI に使わない（補助的アクセントのみ）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "hulu",
    "name": "Hulu Japan (hulu.jp)",
    "url": "https://www.hulu.jp/",
    "description": "HJ Holdings, Inc. が運営する日本のストリーミング・デジタルコミックサービス。ダーク背景に鮮やかな Hulu Green (#1CE783) アクセントを用いたコンテンツファースト設計で、2021年に DixonBaxi が再設計したグローバル Hulu ブランドシステム『The Vessel』を踏襲している。",
    "category": "media",
    "tags": [
      "streaming",
      "japanese",
      "dark",
      "single-accent",
      "content-first",
      "ott"
    ],
    "theme": "dark",
    "language": "ja"
  },
  "sources": [
    "https://www.hulu.jp/",
    "https://www.hulu.jp/about/",
    "https://www.hulu.jp/devices/",
    "https://news.hulu.jp/",
    "https://brandpalettes.com/hulu-color-codes/",
    "https://www.designyourway.net/blog/hulu-logo/",
    "https://www.itsnicethat.com/news/dixon-baxi-hulu-brand-redesign-graphic-design-060421",
    "https://colorswall.com/palette/109754",
    "https://medium.com/hulu-tech-blog/building-night-mode-for-hulu-com-97593e43896"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "直接証拠: Hulu Green (#1CE783) はブランドパレットサイト・公式プレスで確認済み。Woodsmoke (#040405) も同様に確認。",
    "直接証拠: Graphik は DixonBaxi の 2021 年リブランド以降の公式ブランドフォント(ラテン文字)。",
    "直接証拠: フッターはダーク背景・白文字で確認済み。",
    "直接証拠: コンテンツ料金 ¥1,026/月(税込)、動画 14 万本以上。",
    "推論: 日本語テキストのフォントは Graphik に対応するシステムフォント(Hiragino Sans / Yu Gothic / Noto Sans JP)と推定。",
    "推論: セクション背景の細かい明暗変化(#040405 / #111111 等)は CSS ソースへのアクセス制限により直接確認不可。",
    "推論: CTAボタンカラー (#1CE783 bg + #040405 text) はブランドパターンから導出。",
    "注意: Hulu Japan は HJ Holdings, Inc. 運営で米国 Hulu / Disney とは別会社。ブランドロゴ・グリーンは共有しているが UI は独自実装。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Green",
        "tokens": [
          {
            "name": "Hulu Green",
            "value": "#1CE783",
            "token": "--color-primary",
            "role": "ブランドの中核色。ロゴ・CTA ボタン・アクティブ状態・アイコンアクセント (Pantone 7479 C)"
          },
          {
            "name": "Primary Light (Tint)",
            "value": "#7CF4BC",
            "token": "--color-primary-light",
            "role": "ホバー状態、ハイライト"
          },
          {
            "name": "Primary Dark (Shade)",
            "value": "#1A9254",
            "token": "--color-primary-dark",
            "role": "プレスト状態、影"
          }
        ]
      },
      {
        "label": "Surface (Dark Spectrum)",
        "tokens": [
          {
            "name": "Woodsmoke",
            "value": "#040405",
            "token": "--color-surface-darkest",
            "role": "最暗。ヘッダー・フッター・モーダル背景"
          },
          {
            "name": "Surface Dark",
            "value": "#111111",
            "token": "--color-surface-dark",
            "role": "メインコンテンツ背景"
          },
          {
            "name": "Surface Mid",
            "value": "#1A1A1A",
            "token": "--color-surface-mid",
            "role": "カード・パネル背景"
          },
          {
            "name": "Surface Panel",
            "value": "#334251",
            "token": "--color-surface-panel",
            "role": "サイドパネル・インフォブロック"
          }
        ]
      },
      {
        "label": "Neutrals",
        "tokens": [
          {
            "name": "Slate",
            "value": "#6B8090",
            "token": "--color-neutral-slate",
            "role": "プレースホルダー・補助テキスト・ボーダー"
          },
          {
            "name": "Warm Rosy",
            "value": "#B28D81",
            "token": "--color-accent-warm",
            "role": "温かみのあるアクセント(ジャンル・ラベル等)。主要 UI には使用しない"
          },
          {
            "name": "Text Primary (Light Mode)",
            "value": "#292C33",
            "token": "--color-text-primary-dark",
            "role": "ライトモード使用時の主テキスト"
          }
        ]
      },
      {
        "label": "On-Color",
        "tokens": [
          {
            "name": "On Dark",
            "value": "#FFFFFF",
            "token": "--color-on-dark",
            "role": "ダーク背景上のテキスト・アイコン"
          },
          {
            "name": "On Primary",
            "value": "#040405",
            "token": "--color-on-primary",
            "role": "Hulu Green ボタン上のテキスト色"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Graphik",
        "stack": "'Graphik', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', sans-serif",
        "weights": [
          400,
          500,
          600,
          700
        ],
        "role": "ブランドフォント(ラテン文字)。日本語は Hiragino Sans 以降のシステムフォントへフォールバック"
      }
    ],
    "scale": [
      {
        "role": "display",
        "size": "clamp(2rem, 5vw, 4rem)",
        "weight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-0.02em"
      },
      {
        "role": "h1",
        "size": "2.25rem",
        "weight": 700,
        "lineHeight": 1.2
      },
      {
        "role": "h2",
        "size": "1.5rem",
        "weight": 600,
        "lineHeight": 1.3
      },
      {
        "role": "body",
        "size": "1rem",
        "weight": 400,
        "lineHeight": 1.6
      },
      {
        "role": "label",
        "size": "0.875rem",
        "weight": 500,
        "lineHeight": 1.4
      },
      {
        "role": "price",
        "size": "1.75rem",
        "weight": 700
      },
      {
        "role": "caption",
        "size": "0.75rem",
        "weight": 400
      }
    ],
    "japanese": {
      "fontStack": "'Graphik', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', sans-serif",
      "lineHeight": 1.8,
      "letterSpacing": "0",
      "openType": {
        "palt": true,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "letter-spacing は日本語に対して -0.02em を適用しない(可読性低下)",
        "見出しは font-feature-settings: 'palt' 1 でプロポーショナルかなを有効化",
        "行間は日本語本文で 1.8 以上を確保"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "base",
        "value": "8px",
        "role": "スペーシング単位"
      },
      {
        "name": "card-gap",
        "value": "16px",
        "role": "カード間の隙間"
      },
      {
        "name": "container-padding",
        "value": "24px",
        "role": "コンテナ左右パディング"
      },
      {
        "name": "section-gap-mobile",
        "value": "48px",
        "role": "モバイルのセクション間隔"
      },
      {
        "name": "section-gap",
        "value": "80px",
        "role": "デスクトップのセクション間隔"
      },
      {
        "name": "container-max",
        "value": "1200px",
        "role": "最大コンテナ幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "0-767px",
      "role": "モバイル(2列グリッド)"
    },
    "tablet": {
      "value": "768-1023px",
      "role": "タブレット"
    },
    "desktop": {
      "value": "1024px+",
      "role": "デスクトップ(4列フィーチャー / max-width 1200px)"
    }
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "16px",
    "vessel": "24px",
    "pill": "9999px"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary CTA Button",
      "description": "Hulu Green 背景 + Woodsmoke テキストの pill 形状ボタン。行動を促す主要アクション専用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1CE783",
            "color": "#040405",
            "fontWeight": "700",
            "fontSize": "1rem",
            "borderRadius": "9999px",
            "padding": "14px 32px",
            "border": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#7CF4BC",
            "color": "#040405",
            "fontWeight": "700",
            "fontSize": "1rem",
            "borderRadius": "9999px",
            "padding": "14px 32px",
            "border": "none"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button",
      "description": "透明背景 + 白枠線の pill 形状ボタン。副次的なアクション用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#FFFFFF",
            "border": "2px solid #FFFFFF",
            "borderRadius": "9999px",
            "padding": "12px 30px",
            "fontWeight": "500"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "rgba(255,255,255,0.1)",
            "color": "#FFFFFF",
            "border": "2px solid #FFFFFF",
            "borderRadius": "9999px",
            "padding": "12px 30px",
            "fontWeight": "500"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Content Card",
      "description": "ダーク背景のサムネイル主役カード。ホバーで 1.03 倍に拡大",
      "variants": [
        {
          "label": "Thumbnail (16:9)",
          "props": {
            "background": "#1A1A1A",
            "color": "#FFFFFF",
            "borderRadius": "8px",
            "overflow": "hidden",
            "aspectRatio": "16/9",
            "transition": "transform 200ms ease"
          }
        },
        {
          "label": "Poster (2:3)",
          "props": {
            "background": "#1A1A1A",
            "color": "#FFFFFF",
            "borderRadius": "8px",
            "overflow": "hidden",
            "aspectRatio": "2/3",
            "transition": "transform 200ms ease"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Exclusive Badge",
      "description": "独占配信を示す Hulu Green の小さなラベル",
      "variants": [
        {
          "label": "Exclusive",
          "props": {
            "background": "#1CE783",
            "color": "#040405",
            "borderRadius": "4px",
            "fontSize": "0.75rem",
            "fontWeight": "700",
            "padding": "3px 8px"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Top Navigation",
      "description": "Woodsmoke 背景の固定ナビゲーション。ロゴは Hulu Green、リンクは白",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#040405",
            "height": "60px",
            "logoColor": "#1CE783",
            "linkColor": "rgba(255,255,255,0.8)",
            "activeLinkColor": "#1CE783",
            "borderBottom": "none"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Text Input",
      "description": "ダーク背景のテキスト入力欄。フォーカス時に Hulu Green の枠線",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1A1A1A",
            "color": "#FFFFFF",
            "border": "1px solid #6B8090",
            "borderRadius": "8px",
            "padding": "12px 16px"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#1A1A1A",
            "color": "#FFFFFF",
            "border": "1px solid #1CE783",
            "borderRadius": "8px",
            "padding": "12px 16px"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "Woodsmoke 背景の最下層フッター。リンクホバーで Hulu Green",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#040405",
            "color": "rgba(255,255,255,0.6)",
            "linkColor": "rgba(255,255,255,0.8)",
            "linkHoverColor": "#1CE783",
            "dividerColor": "rgba(255,255,255,0.12)"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "Hulu Green (#1CE783) は CTA・ロゴ・アクティブ状態など『行動を促す要素』に集中して使う",
      "背景は常にダーク系 (#040405 〜 #1A1A1A) を基本とする",
      "コンテンツカードはサムネイル画像を主役にする(文字を詰め込まない)",
      "Vessel(丸角長方形 border-radius 24px)をコンテンツのフレームや装飾モチーフとして活用する",
      "日本語テキストで line-height: 1.8 以上を確保する",
      "見出しでは font-feature-settings: 'palt' 1 を有効化してプロポーショナルかなを使う",
      "サムネイル下部に linear-gradient で暗グラデーションを重ねてテキスト可読性を確保する"
    ],
    "dont": [
      "緑 (#1CE783) を広い背景色として使わない(視覚的に主張しすぎてコンテンツが埋もれる)",
      "ライトモード(白背景)をメイン UI に使わない(ブランドトーンと乖離する)",
      "ロゴや CTA ボタンに #7CF4BC や #1A9254 を使わない(ブランドグリーンは #1CE783 のみ)",
      "日本語見出しに過度な letter-spacing をかけない",
      "コンテンツカードに過剰なテキストオーバーレイを重ねない(サムネイルの視認性優先)",
      "ウォームカラー (#B28D81) を主要 UI に使わない(補助的アクセントのみ)",
      "ロゴを写真や複雑な背景に直接配置しない(背景を暗くしてから使用)",
      "ロゴの色変更・変形・回転・ドロップシャドウ追加を行わない"
    ]
  }
}