---
version: alpha
name: Cookpad
description: 日本最大のレシピ検索・共有プラットフォーム。温かみのあるオレンジを基調に、料理の楽しさを伝えるUGC（ユーザー生成コンテンツ）中心のデザイン。
sources:
  - https://cookpad.com/jp
  - https://info.cookpad.com/
  - https://global-web-assets.cpcdn.com/assets/logo_circle-d106f02123de882fffdd2c06593eb2fd33f0ddf20418dd75ed72225bdb0e0ff7.png
  - https://global-web-assets.cpcdn.com/assets/logo_cookpad_large-c79eec91e0cdec1a592f98f46f80fbaf51a213ddefb55437c942f4816967c772.png
  - https://global-web-assets.cpcdn.com/assets/footer/footer-210d183ce6443eb41fa78f10b270fb773bab56416e2680a35328f51e8ddf85d0.png
  - Category icon PNGs: global-web-assets.cpcdn.com/assets/search_top_categories/
notes:
  - "Direct evidence: primary #ff9933 orange confirmed by pixel analysis of logo_circle PNG (2344/5776 opaque pixels)."
  - "Direct evidence: logotype #330000 confirmed by pixel analysis of logo_text and logo_cookpad_large PNGs."
  - "Direct evidence: illustration palette (#f26d21, #fab617, #487a00) from footer banner pixel analysis."
  - "Direct evidence: category icon colors from per-icon pixel analysis (vege, meat, fish)."
  - "Inference: body text, input border, card surface, and secondary bg colors are practical agent defaults consistent with the white/neutral base observed throughout."
  - "Inference: premium accent color not confirmed; teal (#17a589 or similar) was described by rendered-page heuristic only — treat as low-confidence."
  - "CSS files are loaded via external CDN and not directly accessible; design tokens are derived from asset analysis and page structure observation."
colors:
  primary: "#ff9933"
  primary-dark: "#e07f00"
  logotype: "#330000"
  illustration-orange: "#f26d21"
  illustration-yellow: "#fab617"
  illustration-green: "#487a00"
  icon-vege: "#a0bd4e"
  icon-meat: "#f2917f"
  icon-fish: "#74a2c1"
  surface: "#ffffff"
  surface-subtle: "#f9f9f9"
  text-primary: "#333333"
  text-secondary: "#666666"
  text-caption: "#999999"
  border: "#e0e0e0"
  placeholder: "#f0f0f0"
typography:
  wordmark:
    fontFamily: "Rounded sans-serif (custom/proprietary)"
    note: "Friendly rounded letterforms in the logo, dark maroon #330000"
  body:
    fontFamily: "YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif"
    fontSize: "14px"
    lineHeight: "1.6"
  heading-lg:
    fontFamily: "inherit"
    fontSize: "20px"
    fontWeight: "bold"
  heading-md:
    fontFamily: "inherit"
    fontSize: "16px"
    fontWeight: "bold"
  label:
    fontSize: "12px"
    fontWeight: "normal"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"
  avatar: "50%"
spacing:
  base: "8px"
  section-gap: "40px"
  card-gap: "16px"
  card-padding: "12px"
  nav-height: "56px"
components:
  button-primary:
    backgroundColor: "#ff9933"
    color: "#ffffff"
    borderRadius: "24px"
    fontWeight: "bold"
    fontSize: "15px"
    padding: "12px 24px"
    note: "用途: プレミアム誘導、投稿CTA など主要アクション"
  button-secondary:
    backgroundColor: "#ffffff"
    color: "#ff9933"
    border: "1.5px solid #ff9933"
    borderRadius: "24px"
    padding: "10px 20px"
  input-search:
    backgroundColor: "#ffffff"
    border: "1.5px solid #e0e0e0"
    borderRadius: "24px"
    padding: "10px 16px"
    fontSize: "15px"
    note: "ホームトップの検索バー。focus 時 border が #ff9933 になると推定"
  recipe-card:
    backgroundColor: "#ffffff"
    borderRadius: "8px"
    overflow: "hidden"
    thumbnail: "280x96px landscape (aspect ratio ~2.9:1)"
    shadow: "0 1px 4px rgba(0,0,0,0.08)"
    note: "UGCレシピ写真が主役。カード内にタイトル・著者アバター(24x24 circle)"
  category-icon:
    size: "108x108px"
    style: "Rounded stroke/outline, monochromatic per category"
    radius: "50%"
    note: "非アクティブ状態がデフォルト。アクティブ時は同色で塗り強調と推定"
  avatar:
    shape: "circle (border-radius: 50%)"
    sizes: "24px (card), 48px (profile)"
    placeholder-bg: "#f0f0f0"
    placeholder-icon-color: "#9a9a9d"
  nav-header:
    backgroundColor: "#ffffff"
    height: "56px"
    borderBottom: "1px solid #e0e0e0"
    items: "logo-left / search-icon / premium-link / login"
  footer:
    backgroundColor: "#f9f9f9"
    decorativeBanner: "フラットイラスト食材帯(#f26d21 / #fab617 / #487a00)"
    note: "多段カラムリンク + アプリダウンロードボタン"
imagery:
  photography: "UGC料理写真。明るく鮮明な色調が多い。ユーザー自撮りのため品質は均一でない"
  illustration: "フラットベクターイラスト。温かみのある食材モチーフ (orange/yellow/green)。footerデコレーション帯として使用"
  icons: "Rounded stroke/outline スタイル。カテゴリ別単色。108x108px PNG。シンプルで子供にも伝わる形状"
  recipe-thumbnail: "ランドスケープ crop (約3:1)。WEBP形式。cpudn.com CDN 配信"
  avatar: "ユーザーがアップロードした顔写真またはプレースホルダー。円形クリップ"
  logo-usage:
    primary: "circle + wordmark の水平組み合わせ (520x142px大版)"
    icon-only: "76x76px circle版 (アプリアイコン・小スペース用途)"
    wordmark-only: "191x76px テキスト版 (#330000)"
    bg-restriction: "白背景推奨。オレンジ背景上での使用不可"
---

## 概要

Cookpadは「毎日の料理を楽しみにする」をミッションとする日本最大のレシピプラットフォーム（レシピ検索No.1）。デザインは **料理の温もりを伝えるオレンジ** を軸に、ユーザー生成コンテンツ（レシピ写真・投稿）を主役に据えた構造をとる。

UIは情報整理より**発見体験**を優先する。検索バーがホームの最上部に君臨し、以下にトレンド食材・人気おかず・カテゴリナビが続く。カードはシンプルで写真の魅力を引き出すシェルとして機能する。

---

## カラー

### ブランドカラー

| ロール | 値 | 出典 |
|---|---|---|
| Primary (brand orange) | `#ff9933` | ロゴ円部ピクセル解析 (直接証拠) |
| Primary Dark | `#e07f00` | hoverなど暗め変形 (推定) |
| Logotype | `#330000` | ロゴテキストPNGピクセル解析 (直接証拠) |
| Surface / Background | `#ffffff` | |
| Surface Subtle | `#f9f9f9` | フッター背景等 (推定) |

### テキスト・UI

| ロール | 値 |
|---|---|
| Text Primary | `#333333` |
| Text Secondary | `#666666` |
| Text Caption | `#999999` |
| Border | `#e0e0e0` |
| Placeholder BG | `#f0f0f0` |

### イラスト・装飾パレット

footerデコレーション帯(フラットイラスト食材)のピクセル解析から確認:

| 値 | 説明 |
|---|---|
| `#f26d21` | ブランドオレンジ (やや深め、ニンジン・カボチャ) |
| `#fab617` | ブランドイエロー (レモン・パプリカ) |
| `#487a00` | ダークグリーン (葉・茎) |

### カテゴリアイコンカラー

| カテゴリ | 値 | 説明 |
|---|---|---|
| 野菜 | `#a0bd4e` | ミューテッドライムグリーン |
| 肉類 | `#f2917f` | サーモン/コーラル |
| 魚介 | `#74a2c1` | ミューテッドブルー |

> **使用上の注意:** 各カテゴリアイコンは単色。非アクティブ状態がデフォルト表示で、アクティブ時は同系色で強調される（推定）。

---

## タイポグラフィ

- **日本語本文:** `YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif`
  - 標準的な日本語Webスタック。外部フォントサービスへのリンクは未確認
- **ロゴ wordmark:** 独自の丸みを帯びたサンセリフ体 (`#330000`)
- **サイズスケール:**
  - セクション見出し: `20px bold`
  - カードタイトル: `14–16px medium/bold`
  - ラベル/キャプション: `12px`
  - 本文: `14px / line-height 1.6`
- **ウェイト:** Regular (400) / Bold (700) の2段階運用が中心

---

## レイアウト

```
┌─────────────────────────────────────────────┐
│ NAV: [logo] [search-icon] [premium] [login] │ ← 白背景 h:56px
├─────────────────────────────────────────────┤
│          ┌─────────────────┐               │
│          │  検索バー (丸型)  │               │
│          └─────────────────┘               │
├─────────────────────────────────────────────┤
│ カテゴリアイコン横スクロール (12+)            │
├─────────────────────────────────────────────┤
│ [セクション見出し] 人気の食材               │
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐  ← カードグリッド 4〜8列 │
│ └──┘ └──┘ └──┘ └──┘                       │
├─────────────────────────────────────────────┤
│ プレミアム誘導バナー (orange CTA)           │
├─────────────────────────────────────────────┤
│ フッター (イラスト帯 + リンク + アプリボタン) │
└─────────────────────────────────────────────┘
```

- **グリッド:** 最大8列表示 (モバイルでは2〜3列)
- **レシピカードサムネイル:** ランドスケープ 約3:1 (280×96px)
- **セクション間余白:** `40px`

---

## コンポーネント

### 検索バー
- 角丸ピル型 (`border-radius: 24px`)
- 白背景 + 薄いグレーボーダー
- フォーカス時にボーダーが `#ff9933` に変化（推定）
- 検索アイコン付き

### レシピカード
- 白背景、`border-radius: 8px`、軽いシャドウ
- 上部にサムネイル写真（ランドスケープクロップ）
- 写真の下にレシピタイトル（14–16px bold）
- 著者アバター（24px circle）+ ユーザー名（12px caption）
- 「つくれぽ数」表示（コミュニティ指標）
- ボーダーなし（シャドウで浮遊感を演出）

### プライマリボタン
- `background: #ff9933`、白テキスト
- 角丸ピル型 (`border-radius: 24px`)
- 太字ラベル (15px bold)
- 用途: プレミアム開始・レシピ投稿CTA

### カテゴリアイコン
- 108×108px、PNG形式
- Rounded stroke/outline スタイル（単色）
- アイコン + テキストラベルの縦組み
- 水平スクロール可能なナビゲーション帯に配置

### アバター
- 完全円形 (`border-radius: 50%`)
- 小: 24px（カード内）/ 中: 48px（プロフィール）
- プレースホルダー: `#f0f0f0` 背景 + `#9a9a9d` シルエット

---

## イメージ・ビジュアル

### 料理写真 (UGC)
- ユーザー投稿写真が主コンテンツ
- 品質はばらつきあり（均一品質を期待しない）
- ランドスケープクロップ (3:1比率) でサムネイル表示
- 明るく食欲をそそる色調が多い

### ブランドイラスト
- フラットベクタースタイル
- 温かみのある食材モチーフ（ニンジン・カボチャ・レモン等）
- カラー: `#f26d21` / `#fab617` / `#487a00` / `#ffffff`
- フッター装飾帯として使用（1083×109px）
- 「料理は楽しい」というトーンを体現

### カテゴリアイコン
- Rounded stroke/outline（塗りなし、線のみ）
- 各カテゴリで固有の単色
- 食材・料理カテゴリを抽象化したシンプルな形状

---

## ロゴと使用ルール

### 構成要素
1. **circle mark:** オレンジ円 (`#ff9933`) + 白のシェフ帽アイコン (アウトライン)
2. **wordmark:** "cookpad" (丸みサンセリフ、`#330000`)

### バリアント
| バリアント | 用途 | サイズ |
|---|---|---|
| 水平ロゴ (circle + wordmark) | 一般的な用途 | 520×142px 基準 |
| circle アイコン単独 | アプリアイコン・favicon・小スペース | 76×76px |
| wordmark 単独 | テキスト主体のコンテキスト | 191×76px |

### 使用制約 (推定)
- オレンジ背景上でのロゴ使用は不可（視認性低下）
- 白背景または白いコンテナ上での使用を推奨
- ロゴの色変更不可

---

## Do's and Don'ts

### Do
- **レシピ写真を主役に:** UIシェルはシンプルに保ち、写真の魅力を最大化する
- **オレンジを CTAに集中させる:** `#ff9933` はプライマリアクションのみに使用し希少性を維持する
- **丸みを使う:** ボタン・アバター・検索バーはすべて角丸ピルまたは円形。とがった角は避ける
- **カテゴリアイコンは単色アウトライン:** 複雑な塗りや多色化は避ける
- **フラットイラストで装飾:** 写真でなくイラストで余白を埋める場合はブランドパレット (`#f26d21` / `#fab617` / `#487a00`) を使う
- **日本語フォントスタックを明示:** YuGothicから始まるスタックを使用する

### Don't
- オレンジをサービスバッジやアラートなど複数用途に使い回さない
- レシピカードに余計な装飾（グラデーション・複雑なボーダー）を加えない
- 写真を縦長 (portrait) クロップのまま横並びグリッドに配置しない
- ロゴを変形・着色・白以外の背景に重ねない
- `#330000` を汎用ボディテキストに使わない（logotype専用色）
- カテゴリアイコンのカラーを用途外のUIに流用しない

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "cookpad",
    "name": "Cookpad (クックパッド)",
    "url": "https://cookpad.com/jp",
    "description": "「毎日の料理を楽しみにする」をミッションとする日本最大のレシピ検索・共有プラットフォーム。温かみのあるブランドオレンジ (#ff9933) を CTA に集中させ、ユーザー生成コンテンツ (UGC) の料理写真を主役に据えたシンプルなカードベース UI。発見体験を最優先する構造設計。",
    "category": "ec",
    "tags": [
      "recipe",
      "japanese",
      "ugc",
      "community",
      "warm",
      "consumer",
      "food"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://cookpad.com/jp",
    "https://info.cookpad.com/",
    "https://global-web-assets.cpcdn.com/assets/logo_circle-d106f02123de882fffdd2c06593eb2fd33f0ddf20418dd75ed72225bdb0e0ff7.png",
    "https://global-web-assets.cpcdn.com/assets/logo_cookpad_large-c79eec91e0cdec1a592f98f46f80fbaf51a213ddefb55437c942f4816967c772.png",
    "https://global-web-assets.cpcdn.com/assets/footer/footer-210d183ce6443eb41fa78f10b270fb773bab56416e2680a35328f51e8ddf85d0.png"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "直接証拠: primary #ff9933 はロゴ circle PNG のピクセル解析 (2344/5776 不透明ピクセル) で確認。",
    "直接証拠: logotype #330000 は logo_text と logo_cookpad_large PNG のピクセル解析で確認。",
    "直接証拠: イラストパレット (#f26d21, #fab617, #487a00) は footer バナーのピクセル解析で確認。",
    "直接証拠: カテゴリアイコンの色 (vege, meat, fish) はアイコン別ピクセル解析から取得。",
    "推論: body text・input border・card surface・secondary bg の色は、サイト全体で観察される白/ニュートラルベースに整合する実用的なエージェントデフォルト値。",
    "推論: focus 時に検索バーボーダーが #ff9933 に変化する挙動はパターンからの推定。",
    "注意: CSS ファイルは外部 CDN 経由でロードされ直接アクセス不可。デザイントークンはアセット解析とページ構造観察から導出。",
    "注意: プレミアムアクセントカラー(ティール系)は描画ヒューリスティックのみで確認、信頼度低のため除外。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Orange",
        "tokens": [
          {
            "name": "Primary (Brand Orange)",
            "value": "#ff9933",
            "token": "--color-primary",
            "role": "ブランドの中核色。ロゴ・CTA ボタン・検索バーフォーカス・主要アクション専用。CTA に集中させ希少性を維持"
          },
          {
            "name": "Primary Dark",
            "value": "#e07f00",
            "token": "--color-primary-dark",
            "role": "ホバー・プレスト状態などの暗め変形 (推定)"
          },
          {
            "name": "Logotype",
            "value": "#330000",
            "token": "--color-logotype",
            "role": "ロゴ wordmark 専用色 (ダークマルーン)。汎用テキストには使用しない"
          }
        ]
      },
      {
        "label": "Illustration Palette",
        "tokens": [
          {
            "name": "Illustration Orange",
            "value": "#f26d21",
            "token": "--color-illustration-orange",
            "role": "フラットイラスト食材帯のニンジン・カボチャ等の深めのオレンジ"
          },
          {
            "name": "Illustration Yellow",
            "value": "#fab617",
            "token": "--color-illustration-yellow",
            "role": "フラットイラスト食材帯のレモン・パプリカ等のイエロー"
          },
          {
            "name": "Illustration Green",
            "value": "#487a00",
            "token": "--color-illustration-green",
            "role": "フラットイラスト食材帯の葉・茎等のダークグリーン"
          }
        ]
      },
      {
        "label": "Category Icons",
        "tokens": [
          {
            "name": "Icon Vege",
            "value": "#a0bd4e",
            "token": "--color-icon-vege",
            "role": "野菜カテゴリアイコン専用 (ミューテッドライムグリーン)"
          },
          {
            "name": "Icon Meat",
            "value": "#f2917f",
            "token": "--color-icon-meat",
            "role": "肉類カテゴリアイコン専用 (サーモン/コーラル)"
          },
          {
            "name": "Icon Fish",
            "value": "#74a2c1",
            "token": "--color-icon-fish",
            "role": "魚介カテゴリアイコン専用 (ミューテッドブルー)"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface",
            "value": "#ffffff",
            "token": "--color-surface",
            "role": "メイン背景・カード背景・ナビ背景"
          },
          {
            "name": "Surface Subtle",
            "value": "#f9f9f9",
            "token": "--color-surface-subtle",
            "role": "フッター背景・セクション区切り背景 (推定)"
          },
          {
            "name": "Placeholder BG",
            "value": "#f0f0f0",
            "token": "--color-placeholder",
            "role": "アバタープレースホルダー・画像ローディング背景"
          }
        ]
      },
      {
        "label": "Text & Border",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#333333",
            "token": "--color-text-primary",
            "role": "本文・見出しの主要テキスト色"
          },
          {
            "name": "Text Secondary",
            "value": "#666666",
            "token": "--color-text-secondary",
            "role": "補助テキスト・ラベル"
          },
          {
            "name": "Text Caption",
            "value": "#999999",
            "token": "--color-text-caption",
            "role": "キャプション・つくれぽ数等の指標表示"
          },
          {
            "name": "Border",
            "value": "#e0e0e0",
            "token": "--color-border",
            "role": "ナビ下線・検索バーボーダー・区切り線"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "YuGothic",
        "stack": "YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "日本語本文。標準的な日本語 Web スタック (Regular/Bold の 2 段階運用)"
      },
      {
        "family": "Rounded Sans (Proprietary)",
        "stack": "custom",
        "weights": [
          700
        ],
        "role": "ロゴ wordmark 専用。丸みを帯びたカスタムサンセリフ、#330000"
      }
    ],
    "scale": [
      {
        "role": "heading-lg",
        "size": "20px",
        "weight": 700,
        "lineHeight": 1.4
      },
      {
        "role": "heading-md",
        "size": "16px",
        "weight": 700,
        "lineHeight": 1.4
      },
      {
        "role": "card-title",
        "size": "15px",
        "weight": 700,
        "lineHeight": 1.4
      },
      {
        "role": "body",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.6
      },
      {
        "role": "label",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.4
      },
      {
        "role": "button",
        "size": "15px",
        "weight": 700,
        "lineHeight": 1.2
      }
    ],
    "japanese": {
      "fontStack": "YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif",
      "lineHeight": 1.6,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "標準的な日本語 Web フォントスタック、外部フォントサービスは未使用",
        "Regular (400) と Bold (700) の 2 段階運用が中心",
        "本文 line-height: 1.6 で UGC 中心の読みやすさを確保"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "base",
        "value": "8px",
        "role": "スペーシング単位"
      },
      {
        "name": "card-padding",
        "value": "12px",
        "role": "レシピカード内側パディング"
      },
      {
        "name": "card-gap",
        "value": "16px",
        "role": "カード間の隙間"
      },
      {
        "name": "section-gap",
        "value": "40px",
        "role": "セクション間隔"
      },
      {
        "name": "nav-height",
        "value": "56px",
        "role": "ヘッダー高さ"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "0-767px",
      "role": "モバイル(2〜3列カードグリッド)"
    },
    "tablet": {
      "value": "768-1023px",
      "role": "タブレット(4〜6列)"
    },
    "desktop": {
      "value": "1024px+",
      "role": "デスクトップ(最大8列カードグリッド)"
    }
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "pill": "24px",
    "full": "9999px",
    "avatar": "50%"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "ブランドオレンジ背景のピル型 CTA。プレミアム誘導・レシピ投稿等の主要アクション専用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ff9933",
            "color": "#ffffff",
            "fontWeight": "700",
            "fontSize": "15px",
            "borderRadius": "24px",
            "padding": "12px 24px",
            "border": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#e07f00",
            "color": "#ffffff",
            "fontWeight": "700",
            "fontSize": "15px",
            "borderRadius": "24px",
            "padding": "12px 24px",
            "border": "none"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button",
      "description": "白背景 + オレンジ枠線のピル型ボタン。副次的なアクション用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#ff9933",
            "border": "1.5px solid #ff9933",
            "borderRadius": "24px",
            "padding": "10px 20px",
            "fontWeight": "700",
            "fontSize": "15px"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Search Input",
      "description": "ホームトップの検索バー。ピル型・白背景・フォーカス時にオレンジボーダー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "border": "1.5px solid #e0e0e0",
            "borderRadius": "24px",
            "padding": "10px 16px",
            "fontSize": "15px"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "border": "1.5px solid #ff9933",
            "borderRadius": "24px",
            "padding": "10px 16px",
            "fontSize": "15px"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Recipe Card",
      "description": "UGC レシピ写真を主役にしたシンプルカード。ボーダーなしでシャドウのみの浮遊感",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "borderRadius": "8px",
            "padding": "12px",
            "boxShadow": "0 1px 4px rgba(0,0,0,0.08)",
            "overflow": "hidden",
            "thumbnailAspectRatio": "2.9/1"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Top Navigation",
      "description": "白背景・グレー下線の固定ヘッダー。logo-left / search-icon / premium-link / login の構成",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "height": "56px",
            "borderBottom": "1px solid #e0e0e0",
            "logoColor": "#ff9933",
            "linkColor": "#333333"
          }
        }
      ]
    },
    {
      "type": "avatar",
      "name": "User Avatar",
      "description": "ユーザー顔写真の円形クリップ。プレースホルダーはグレー背景 + シルエット",
      "variants": [
        {
          "label": "Small (Card)",
          "props": {
            "background": "#f0f0f0",
            "borderRadius": "50%",
            "width": "24px",
            "height": "24px",
            "placeholderColor": "#9a9a9d"
          }
        },
        {
          "label": "Medium (Profile)",
          "props": {
            "background": "#f0f0f0",
            "borderRadius": "50%",
            "width": "48px",
            "height": "48px",
            "placeholderColor": "#9a9a9d"
          }
        }
      ]
    },
    {
      "type": "icon",
      "name": "Category Icon",
      "description": "カテゴリナビの 108x108px PNG アイコン。Rounded stroke/outline スタイル、カテゴリ別単色",
      "variants": [
        {
          "label": "Vege (野菜)",
          "props": {
            "color": "#a0bd4e",
            "width": "108px",
            "height": "108px",
            "style": "outline",
            "borderRadius": "50%"
          }
        },
        {
          "label": "Meat (肉類)",
          "props": {
            "color": "#f2917f",
            "width": "108px",
            "height": "108px",
            "style": "outline",
            "borderRadius": "50%"
          }
        },
        {
          "label": "Fish (魚介)",
          "props": {
            "color": "#74a2c1",
            "width": "108px",
            "height": "108px",
            "style": "outline",
            "borderRadius": "50%"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "ライトグレー背景の最下層フッター。フラットイラスト食材帯で装飾",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f9f9f9",
            "color": "#666666",
            "decorativeBannerColors": "#f26d21, #fab617, #487a00",
            "decorativeBannerSize": "1083x109px"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "レシピ写真を主役にする — UI シェルはシンプルに保ち、UGC 写真の魅力を最大化する",
      "オレンジ (#ff9933) は CTA に集中させ、希少性を維持する",
      "丸みを使う — ボタン・アバター・検索バーはすべて角丸ピルまたは円形",
      "カテゴリアイコンは単色アウトラインで統一する",
      "写真でなくイラストで装飾する場合はブランドパレット (#f26d21 / #fab617 / #487a00) を使う",
      "日本語フォントスタックは YuGothic から始まる標準スタックを明示する",
      "レシピカードはボーダーなしで軽いシャドウのみで浮遊感を演出する",
      "サムネイルはランドスケープクロップ (約 3:1) で統一する"
    ],
    "dont": [
      "オレンジ (#ff9933) をサービスバッジやアラート等、複数用途に使い回さない",
      "レシピカードに余計な装飾(グラデーション・複雑なボーダー)を加えない",
      "写真を縦長 (portrait) クロップのまま横並びグリッドに配置しない",
      "ロゴを変形・着色しない、また白以外の背景(特にオレンジ背景)に重ねない",
      "#330000 (logotype 専用色) を汎用ボディテキストに使わない",
      "カテゴリアイコンのカラー (#a0bd4e / #f2917f / #74a2c1) を用途外の UI に流用しない",
      "とがった角を使わない — 全てのインタラクティブ要素は丸みで統一"
    ]
  }
}