---
version: alpha
name: MUJI（無印良品）
description: "「ブランドなき品質」を掲げる日本のライフスタイルブランド。ベージュ×チャコール×白を基軸にした徹底的なミニマリズムと、Ma（間）の概念に基づく余白の設計が特徴。"
sources:
  - https://www.muji.com/jp/ja/store
  - https://www.muji.us/cdn/shop/t/987/assets/theme.css
  - https://k-lifestyle-blog.com/muji-font-design-guide/
  - https://www.brandcolorcode.com/muji
notes:
  - Japanストアのカラー頻度分析（HTML直接解析）: #3C3C43（145回）, #E0CEAA（54回）, #FFFFFF（89回）, #9D9DA0（15回）, #6D6D72（6回）, #7F0019（3回）。
  - ベージュ #E0CEAA は日本ストア固有の署名カラー。USストアでは使用頻度が低く、日本市場向けのブランドシグネチャーと判断。
  - USストアのメイン CSS（Shopify テーマ）から --color-body-text, --color-body, ボタンスタイル, フォントを直接取得。
  - ボタン variant 名は Next.js クラス名から逆引き: style--black / style--stroke / style--beige / style--disabled。
  - Japanストア Next.js CSS ファイルは CDN で直接アクセス不可。デザイントークンは HTML 頻度分析 + USサイト CSS + ブランド資料の三角測量。
  - フォントについて: ロゴ英字 Helvetica、パッケージ和文は Morisawa A-OTF Gothic MB101（2024年パッケージ改訂後は游ゴシック）。Web 表示フォントは Roboto (US) + システムサンセリフ。

colors:
  brand-red: "#7F0019"
  brand-beige: "#E0CEAA"
  text-primary: "#3C3C43"
  text-secondary: "#6D6D72"
  text-muted: "#9D9DA0"
  surface-white: "#FFFFFF"
  surface-beige-light: "#F5EBE0"
  surface-gray-light: "#F6F6F6"
  surface-gray-mid: "#DEDEDE"
  border: "#DEDEDE"
  black: "#000000"
  error: "#F05D5D"
  success: "#51A551"

typography:
  display:
    fontFamily: '"Helvetica Neue", "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif'
    fontSize: "2.23rem"
    fontWeight: 700
    lineHeight: 1.2
  h1:
    fontSize: "1.84rem"
    fontWeight: 700
    lineHeight: 1.3
  h2:
    fontSize: "1.71rem"
    fontWeight: 700
    lineHeight: 1.35
  h3:
    fontSize: "1.575rem"
    fontWeight: 700
    lineHeight: 1.4
  h4:
    fontSize: "1.3125rem"
    fontWeight: 700
    lineHeight: 1.4
  body:
    fontFamily: '"Helvetica Neue", "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif'
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.6
  body-medium:
    fontSize: "0.984rem"
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontSize: "0.82rem"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontSize: "0.766rem"
    fontWeight: 400
    lineHeight: 1.4
  price:
    fontSize: "0.875rem"
    fontWeight: 700
    lineHeight: 1.2

rounded:
  none: "0"
  sharp: "2px"
  default: "3px"
  medium: "6px"
  large: "16px"
  pill: "75px"
  full: "100%"

spacing:
  gutter-mobile: "10px"
  gutter-tablet: "15px"
  gutter-desktop: "25px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  xxl: "64px"
  section: "80px"

components:
  button-primary:
    backgroundColor: "#000000"
    color: "#FFFFFF"
    borderRadius: "3px"
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontWeight: 700
    fontSize: "0.875rem"
    letterSpacing: "0.01em"
    padding: "0.625rem 1rem"
    minWidth: "160px"
    hover-background: "#333333"
  button-stroke:
    backgroundColor: "transparent"
    color: "#3C3C43"
    border: "1px solid #3C3C43"
    borderRadius: "3px"
    fontWeight: 700
    fontSize: "0.875rem"
    hover-borderColor: "#000000"
    hover-color: "#000000"
  button-beige:
    backgroundColor: "#E0CEAA"
    color: "#3C3C43"
    borderRadius: "3px"
    fontWeight: 700
    fontSize: "0.875rem"
    hover-backgroundColor: "#C8B690"
  button-disabled:
    backgroundColor: "#DEDEDE"
    color: "#9D9DA0"
    borderRadius: "3px"
    cursor: "not-allowed"
  card:
    backgroundColor: "#FFFFFF"
    borderRadius: "0"
    imageAspectRatio: "1:1"
    priceColor: "#3C3C43"
    labelFontSize: "0.82rem"
    priceLayout: "bottom aligned, right-side heart icon"
  navbar:
    backgroundColor: "#FFFFFF"
    borderBottom: "1px solid #DEDEDE"
    height: "56px"
    linkColor: "#3C3C43"
    logoColor: "#7F0019"
  input:
    border: "1px solid #9D9DA0"
    borderRadius: "3px"
    focusBorder: "#3C3C43"
    backgroundColor: "#FFFFFF"
    fontSize: "0.875rem"
    padding: "0.6em 0.75em"
  tag-label:
    backgroundColor: "#E0CEAA"
    color: "#3C3C43"
    borderRadius: "0"
    fontSize: "0.766rem"
    padding: "0.15em 0.5em"
---

## Overview

MUJI（無印良品 / Mujirushi Ryohin）は「ブランドなき品質品」を意味する日本のライフスタイルブランド（良品計画）。1980年創業。デジタルデザインもプロダクトデザインと同じ哲学を継承する：**余分なものを排除し、機能だけを残す**。

ビジュアルシステムは三色構成:
1. **ベージュ** (`#E0CEAA`) — 暖かみのある素材感、日本の自然素材への敬意
2. **チャコール** (`#3C3C43`) — 高コントラスト・高可読性のテキスト基盤
3. **白** (`#FFFFFF`) — 余白。「間（Ma）」の体現

**ブランドレッド** (`#7F0019`) はロゴとリンクアクセントのみに絞って使用。大面積への使用は避ける。


## Colors

| トークン | 値 | 出典 | 用途 |
|---|---|---|---|
| `brand-red` | `#7F0019` | ブランド公式 / US CSS | ロゴ・リンク・極小アクセント。**面積を拡大しない** |
| `brand-beige` | `#E0CEAA` | JP HTML 頻度分析（54回） | beige ボタン、バッジ、セクション背景アクセント |
| `text-primary` | `#3C3C43` | JP HTML 頻度分析（145回） | 見出し・本文・UIテキスト全般 |
| `text-secondary` | `#6D6D72` | JP HTML（6回） | サブテキスト、メタ情報 |
| `text-muted` | `#9D9DA0` | JP HTML（15回） | プレースホルダー、ディスエーブルラベル |
| `surface-white` | `#FFFFFF` | JP/US 共通 | 主背景、カード背景 |
| `surface-gray-light` | `#F6F6F6` | US CSS | フッター背景、hover 背景 |
| `border` | `#DEDEDE` | JP HTML（2回） | 区切り線、input 枠 |
| `black` | `#000000` | US CSS | 主要ボタン背景 |
| `error` | `#F05D5D` | US CSS | エラーメッセージ |
| `success` | `#51A551` | US CSS | 在庫あり・完了状態 |

**使ってはいけない組み合わせ**:
- `brand-red` を大面積背景に使う（ブランドの節度に反する）
- `brand-beige` と `surface-white` を隣接させず、必ずコントラスト確認


## Typography

### フォントスタック

MUJI はパンローマンな読みやすさを優先する。特定のウェブフォントは使用せずシステムフォントに依存（Shopify US サイトでは Roboto / Roboto Condensed を使用）。

**推奨ウェブ実装スタック（Latin + Japanese）**:
```css
font-family: "Helvetica Neue", Helvetica, Arial,
             "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic", "YuGothic", Meiryo, sans-serif;
```

日本語 `letter-spacing` は `-0.02em` 程度で詰めると MUJI らしい密度感になる。

### タイポグラフィスケール

| ロール | サイズ | ウェイト | 用途 |
|---|---|---|---|
| Display | 2.23rem | 700 | スライドショー見出し |
| H1 | 1.84rem | 700 | ページタイトル |
| H2 | 1.71rem | 700 | セクション見出し |
| H3 | 1.575rem | 700 | サブセクション |
| H4 | 1.31rem | 700 | カード見出し・特集タイトル |
| Body Medium | 0.984rem | 400 | リード文 |
| Body | 0.875rem | 400 | 本文・商品説明 |
| Label | 0.82rem | 400 | フィールドラベル |
| Small | 0.766rem | 400 | 補足・法的表記 |
| Price | 0.875rem | 700 | 価格表示 |

USサイト変数: `--font-size-body: .875rem`, `--font-size-heading-large: 2.23125rem`


## Layout

- **日本ストア**: Next.js (v2.81.0) アプリ
- **USストア**: Shopify カスタムテーマ
- **コンテナガター**: モバイル 10px / タブレット 15px / デスクトップ 25px
- **商品グリッド**: 4カラム（デスクトップ）/ 2カラム（タブレット）/ 2カラム（モバイル）
- カードは **正方形画像**（aspect-ratio 1:1）が基本
- セクション間余白: 64px〜80px（デスクトップ）

### ページ構造（日本ストア）

```
AppBanner（アプリ誘導帯）
Header
  ロゴ（左） | 検索 + アイコン（右）
DesktopMenu / MobileMenu（カテゴリ展開）
---
Hero / キャンペーンバナー（スライドショー）
新商品セクション（カードグリッド）
いろいろな無印良品（活動・特集リンク）
よみもの（ブログ・スタッフ記事）
---
Footer
  ロゴ | サイトグループリンク | SNSボタン | ポリシーリンク | コピーライト
```

カテゴリナビゲーション例: SALE / 新商品 / 婦人・レディース / 紳士・メンズ / こども / 収納・家具・家電 / 生活雑貨 / コスメ・ケア / 食品 / ReMUJI / 特集 / 読みもの


## Components

### ボタン

3 つのビジュアルバリアント + 1 つのステート:

**Black（プライマリ）**
```css
background: #000;
color: #fff;
border-radius: 3px;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.01em;
padding: 0.625rem 1rem;
min-width: 160px;
```
hover: `background: #333`

**Stroke（セカンダリ）**
```css
background: transparent;
border: 1px solid #3C3C43;
color: #3C3C43;
border-radius: 3px;
```
hover: `border-color: #000; color: #000`

**Beige（ブランドアクセント）**
```css
background: #E0CEAA;
color: #3C3C43;
border-radius: 3px;
```
「もっと見る」など、コンテンツ拡張 CTA に使用。

**サイズ**:
- Small: `min-width: 96px`
- Medium: `min-width: 160px`（デフォルト）
- Large: `min-width: 240px`

### 商品カード（CardDesktopS / CardMobileS）

```
[正方形画像 1:1]
[ブランドラベル（任意）]
[商品名テキスト]
[サイズテキスト（任意）]
[カラーボタン（●●○）（任意）]
[価格] ♡ （wishlist）
```

- 画像 hover: overlay 表示なし、シンプルフェード
- テキストは左揃え、価格は太字
- 枠線なし（border-radius: 0）
- ラベル（NEW / SALE）: ベージュ背景、角なし

### ナビゲーション

```
[MUJI ロゴ（赤）]  [検索] [ハート] [カート]
（アンダーライン → カテゴリドロワー展開）
```

- Header 高さ: 56px
- ロゴは SVG、clip-path で形成
- アイコンボタン: 背景なし、24×24px

### 入力フィールド

```css
border: 1px solid #9D9DA0;
border-radius: 3px;
background: #fff;
padding: 0.6em 0.75em;
font-size: 0.875rem;
```
focus: `border-color: #3C3C43`


## Imagery

**写真スタイル**:
- 白または薄ベージュの背景に商品を単体配置（商品写真）
- 生活シーン写真は明るい自然光、モノトーン・ナチュラルな空間
- 過剰なレタッチは行わず素材感を残す
- テキストオーバーレイは最小限（バナー見出しのみ）

**カラー写真の原則**:
- 商品写真はカラーニュートラル背景 (`#FFFFFF` / `#F6F6F6`)
- キャンペーンバナーも派手なグラデーションを使わない
- アパレルは着用シーン写真と単品写真を使い分ける

**アイコン**:
- シンプルな stroke アイコン（塗り潰しなし）
- SVG、24×24px 基準
- 色: `#3C3C43`（通常）/ `#7F0019`（お気に入り・アクティブ状態）


## Logo And Usage

- ロゴは「MUJI」全大文字テキスト + SVG clip-path で構成
- カラー: `#7F0019`（ブランドレッド）、白背景のみ
- 白地上の赤ロゴがデフォルト。ダーク背景では白ロゴを使用
- 最小サイズ: 幅 60px 以上
- クリアスペース: ロゴ高さの 50% 以上
- 「無印良品」の和文ロゴと「MUJI」の英文ロゴは独立した資産

**禁止**:
- `#7F0019` 以外のカラーでの使用
- ロゴの変形・エフェクト・グラデーション
- ベージュ背景上への配置（コントラスト不足）


## Do's and Don'ts

### Do
- ボタンの `border-radius` は 3px 以下に保つ（丸みを出さない）
- `brand-beige` (#E0CEAA) は CTA や見出し装飾に積極的に使う
- 余白を広めに取る（セクション間 64〜80px）
- 商品カードは必ず正方形画像で統一する
- 日本語テキストの `letter-spacing` は `-0.02em` を基準にする
- 価格は `font-weight: 700` で強調
- エラー・成功は専用色（`#F05D5D` / `#51A551`）を使う
- フォントはシステムフォントスタックで十分（ウェブフォント不要）

### Don't
- `brand-red` (#7F0019) をボタン背景・大面積に使う
- グラデーションやシャドウを過剰に使う（`box-shadow` は hover 時のみ）
- border-radius を 6px 超で使う（カードや入力フィールドは特に注意）
- 黒 (#000) 以外の色をプライマリボタンに使う
- カード画像に 16:9 など縦横比の異なる比率を混在させる
- テキストリンクに下線を常時表示する（hover 時のみ）
- 装飾的なフォント・アイコンフォントを使う

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "muji",
    "name": "MUJI(無印良品)",
    "url": "https://www.muji.com/jp/ja/store",
    "description": "「ブランドなき品質」を掲げる日本のライフスタイルブランド。ベージュ×チャコール×白を基軸にした徹底的なミニマリズムと、Ma(間)の概念に基づく余白の設計が特徴。",
    "category": "ec",
    "tags": [
      "minimal",
      "japanese",
      "lifestyle",
      "retail",
      "ma-spacing"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.muji.com/jp/ja/store",
    "https://www.muji.us/cdn/shop/t/987/assets/theme.css",
    "https://k-lifestyle-blog.com/muji-font-design-guide/",
    "https://www.brandcolorcode.com/muji"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "Japan ストアのカラー頻度分析(HTML 直接解析): #3C3C43(145回), #E0CEAA(54回), #FFFFFF(89回), #9D9DA0(15回), #6D6D72(6回), #7F0019(3回)。",
    "ベージュ #E0CEAA は日本ストア固有の署名カラー。US ストアでは使用頻度が低く、日本市場向けのブランドシグネチャーと判断。",
    "US ストアのメイン CSS(Shopify テーマ)から --color-body-text, --color-body, ボタンスタイル, フォントを直接取得。",
    "ボタン variant 名は Next.js クラス名から逆引き: style--black / style--stroke / style--beige / style--disabled。",
    "Japan ストア Next.js CSS ファイルは CDN で直接アクセス不可。デザイントークンは HTML 頻度分析 + US サイト CSS + ブランド資料の三角測量。",
    "フォントについて: ロゴ英字 Helvetica、パッケージ和文は Morisawa A-OTF Gothic MB101(2024年パッケージ改訂後は游ゴシック)。Web 表示フォントは Roboto(US) + システムサンセリフ。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand",
        "tokens": [
          {
            "name": "Brand Red",
            "value": "#7F0019",
            "token": "--color-brand-red",
            "role": "ロゴ・リンク・極小アクセント。面積を拡大しない"
          },
          {
            "name": "Brand Beige",
            "value": "#E0CEAA",
            "token": "--color-brand-beige",
            "role": "beige ボタン、バッジ、セクション背景アクセント。日本ストア固有の署名カラー"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#3C3C43",
            "token": "--color-text-primary",
            "role": "見出し・本文・UI テキスト全般(JP HTML 145回)"
          },
          {
            "name": "Text Secondary",
            "value": "#6D6D72",
            "token": "--color-text-secondary",
            "role": "サブテキスト、メタ情報"
          },
          {
            "name": "Text Muted",
            "value": "#9D9DA0",
            "token": "--color-text-muted",
            "role": "プレースホルダー、ディスエーブルラベル"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface White",
            "value": "#FFFFFF",
            "token": "--color-surface-white",
            "role": "主背景、カード背景"
          },
          {
            "name": "Surface Beige Light",
            "value": "#F5EBE0",
            "token": "--color-surface-beige-light",
            "role": "薄ベージュセクション背景"
          },
          {
            "name": "Surface Gray Light",
            "value": "#F6F6F6",
            "token": "--color-surface-gray-light",
            "role": "フッター背景、hover 背景"
          },
          {
            "name": "Surface Gray Mid",
            "value": "#DEDEDE",
            "token": "--color-surface-gray-mid",
            "role": "区切り線、ディスエーブル背景"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border",
            "value": "#DEDEDE",
            "token": "--color-border",
            "role": "区切り線、input 枠"
          }
        ]
      },
      {
        "label": "Status",
        "tokens": [
          {
            "name": "Black",
            "value": "#000000",
            "token": "--color-black",
            "role": "主要ボタン背景"
          },
          {
            "name": "Error",
            "value": "#F05D5D",
            "token": "--color-error",
            "role": "エラーメッセージ"
          },
          {
            "name": "Success",
            "value": "#51A551",
            "token": "--color-success",
            "role": "在庫あり・完了状態"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Helvetica Neue",
        "stack": "\"Helvetica Neue\", \"Helvetica\", Arial, \"Hiragino Kaku Gothic ProN\", \"Hiragino Sans\", \"Yu Gothic\", Meiryo, sans-serif",
        "role": "primary",
        "notes": "MUJI はパンローマンな読みやすさを優先。特定のウェブフォントは使用せずシステムフォントに依存。Shopify US サイトでは Roboto / Roboto Condensed を使用。"
      },
      {
        "family": "Hiragino Kaku Gothic ProN",
        "stack": "\"Hiragino Kaku Gothic ProN\", \"Hiragino Sans\", \"Yu Gothic\", \"YuGothic\", Meiryo, sans-serif",
        "role": "japanese",
        "notes": "日本語スタック。letter-spacing は -0.02em 程度で詰めると MUJI らしい密度感になる。"
      }
    ],
    "scale": [
      {
        "role": "display",
        "size": "2.23rem",
        "weight": 700,
        "lineHeight": 1.2,
        "notes": "スライドショー見出し(35.7px)"
      },
      {
        "role": "h1",
        "size": "1.84rem",
        "weight": 700,
        "lineHeight": 1.3,
        "notes": "ページタイトル(29.4px)"
      },
      {
        "role": "h2",
        "size": "1.71rem",
        "weight": 700,
        "lineHeight": 1.35,
        "notes": "セクション見出し(27.4px)"
      },
      {
        "role": "h3",
        "size": "1.575rem",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "サブセクション(25.2px)"
      },
      {
        "role": "h4",
        "size": "1.3125rem",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "カード見出し・特集タイトル(21px)"
      },
      {
        "role": "body-medium",
        "size": "0.984rem",
        "weight": 400,
        "lineHeight": 1.6,
        "notes": "リード文(15.7px)"
      },
      {
        "role": "body",
        "size": "0.875rem",
        "weight": 400,
        "lineHeight": 1.6,
        "notes": "本文・商品説明(14px)"
      },
      {
        "role": "label",
        "size": "0.82rem",
        "weight": 400,
        "lineHeight": 1.4,
        "notes": "フィールドラベル(13.1px)"
      },
      {
        "role": "small",
        "size": "0.766rem",
        "weight": 400,
        "lineHeight": 1.4,
        "notes": "補足・法的表記(12.3px)"
      },
      {
        "role": "price",
        "size": "0.875rem",
        "weight": 700,
        "lineHeight": 1.2,
        "notes": "価格表示(14px)"
      }
    ],
    "japanese": {
      "fontStack": "\"Hiragino Kaku Gothic ProN\", \"Hiragino Sans\", \"Yu Gothic\", \"YuGothic\", Meiryo, sans-serif",
      "lineHeight": 1.6,
      "letterSpacing": "-0.02em",
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict",
        "overflowWrap": "anywhere"
      },
      "openType": {
        "palt": true,
        "kern": true
      },
      "notes": "日本語の letter-spacing は -0.02em 程度で詰める。MUJI らしい密度感を出すために palt(プロポーショナル仮名)を有効化。"
    }
  },
  "spacing": {
    "baseUnit": "4px",
    "tokens": [
      {
        "name": "gutter-mobile",
        "value": "10px",
        "role": "モバイル時のコンテナガター"
      },
      {
        "name": "gutter-tablet",
        "value": "15px",
        "role": "タブレット時のコンテナガター"
      },
      {
        "name": "gutter-desktop",
        "value": "25px",
        "role": "デスクトップ時のコンテナガター"
      },
      {
        "name": "xs",
        "value": "4px",
        "role": "最小間隔"
      },
      {
        "name": "sm",
        "value": "8px",
        "role": "小間隔"
      },
      {
        "name": "md",
        "value": "16px",
        "role": "標準間隔"
      },
      {
        "name": "lg",
        "value": "24px",
        "role": "大間隔"
      },
      {
        "name": "xl",
        "value": "40px",
        "role": "セクション内余白"
      },
      {
        "name": "xxl",
        "value": "64px",
        "role": "セクション間最小余白"
      },
      {
        "name": "section",
        "value": "80px",
        "role": "デスクトップセクション余白"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "767px",
      "role": "スマートフォン以下"
    },
    "tablet": {
      "value": "1024px",
      "role": "タブレット"
    },
    "desktop": {
      "value": "1025px",
      "role": "デスクトップ以上"
    }
  },
  "radius": {
    "none": "0",
    "sharp": "2px",
    "default": "3px",
    "medium": "6px",
    "large": "16px",
    "pill": "75px",
    "full": "100%",
    "notes": "ボタンは default (3px) が基本。カードは none (0)。MUJI のミニマリズムを反映し、過度な丸みは禁止。"
  },
  "shadows": [],
  "components": [
    {
      "type": "button",
      "name": "Primary Button (Black)",
      "description": "MUJI の代表的なプライマリ CTA。黒背景・白文字でシンプルかつ高コントラスト。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#000000",
            "color": "#FFFFFF",
            "borderRadius": "3px",
            "padding": "0.625rem 1rem",
            "fontSize": "0.875rem",
            "fontWeight": "700",
            "letterSpacing": "0.01em",
            "minWidth": "160px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#333333",
            "color": "#FFFFFF",
            "borderRadius": "3px",
            "padding": "0.625rem 1rem"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Stroke Button",
      "description": "セカンダリ CTA。アウトライン形式でテキストカラーをチャコールに統一。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#3C3C43",
            "border": "1px solid #3C3C43",
            "borderRadius": "3px",
            "padding": "0.625rem 1rem",
            "fontSize": "0.875rem",
            "fontWeight": "700"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "transparent",
            "color": "#000000",
            "border": "1px solid #000000",
            "borderRadius": "3px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Beige Button",
      "description": "ブランドアクセントカラーのベージュボタン。「もっと見る」などのコンテンツ拡張 CTA で使用。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#E0CEAA",
            "color": "#3C3C43",
            "borderRadius": "3px",
            "padding": "0.625rem 1rem",
            "fontSize": "0.875rem",
            "fontWeight": "700"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#C8B690",
            "color": "#3C3C43",
            "borderRadius": "3px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Disabled Button",
      "description": "非活性状態のボタン。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#DEDEDE",
            "color": "#9D9DA0",
            "borderRadius": "3px",
            "padding": "0.625rem 1rem",
            "fontSize": "0.875rem",
            "cursor": "not-allowed"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Card",
      "description": "商品カード。正方形画像 + テキスト左揃え + 価格太字の構成。枠線なし、角丸なしで MUJI らしいミニマリズムを表現。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#3C3C43",
            "borderRadius": "0",
            "imageAspectRatio": "1:1",
            "priceLayout": "bottom aligned, right-side heart icon"
          }
        }
      ]
    },
    {
      "type": "tag",
      "name": "Tag Label",
      "description": "NEW / SALE などのカテゴリラベル。ベージュ背景・角なしで MUJI シグネチャーを表現。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#E0CEAA",
            "color": "#3C3C43",
            "borderRadius": "0",
            "fontSize": "0.766rem",
            "padding": "0.15em 0.5em"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Navbar",
      "description": "白背景のヘッダーナビゲーション。下部にライトグレーボーダー。ロゴはブランドレッド。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#3C3C43",
            "borderBottom": "1px solid #DEDEDE",
            "height": "56px",
            "logoColor": "#7F0019"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Form Input",
      "description": "フォーム入力フィールド。ミドルグレー枠 + フォーカス時にチャコール枠。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#3C3C43",
            "border": "1px solid #9D9DA0",
            "borderRadius": "3px",
            "padding": "0.6em 0.75em",
            "fontSize": "0.875rem"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#FFFFFF",
            "color": "#3C3C43",
            "border": "1px solid #3C3C43",
            "borderRadius": "3px"
          }
        }
      ]
    }
  ],
  "imagery": {
    "photography": {
      "style": "白または薄ベージュの背景に商品を単体配置(商品写真)。生活シーン写真は明るい自然光、モノトーン・ナチュラルな空間。過剰なレタッチは行わず素材感を残す。",
      "format": "JPEG / WebP",
      "notes": "テキストオーバーレイは最小限(バナー見出しのみ)。商品写真はカラーニュートラル背景(#FFFFFF / #F6F6F6)。キャンペーンバナーも派手なグラデーションを使わない。"
    },
    "icons": {
      "font": "シンプルな stroke アイコン(塗り潰しなし)、SVG、24×24px 基準",
      "size": "24×24px。色: #3C3C43(通常) / #7F0019(お気に入り・アクティブ状態)"
    }
  },
  "motion": {
    "easing": {
      "default": "ease-in-out",
      "fast": "ease-out"
    },
    "duration": {
      "short": "0.2s",
      "medium": "0.3s"
    },
    "notes": "MUJI は派手なアニメーションを避ける。画像 hover は overlay 表示なし、シンプルフェードのみ。"
  },
  "logo": {
    "restrictions": [
      "ロゴは「MUJI」全大文字テキスト + SVG clip-path で構成",
      "カラー: #7F0019(ブランドレッド)、白背景のみ",
      "ダーク背景では白ロゴを使用",
      "最小サイズ: 幅 60px 以上",
      "クリアスペース: ロゴ高さの 50% 以上",
      "「無印良品」の和文ロゴと「MUJI」の英文ロゴは独立した資産"
    ],
    "navRepresentation": "ヘッダーは MUJI 英文ロゴ(SVG)。ブランドレッド #7F0019 で白背景に配置。"
  },
  "guidelines": {
    "do": [
      "ボタンの border-radius は 3px 以下に保つ(丸みを出さない)",
      "brand-beige (#E0CEAA) は CTA や見出し装飾に積極的に使う",
      "余白を広めに取る(セクション間 64〜80px)",
      "商品カードは必ず正方形画像で統一する",
      "日本語テキストの letter-spacing は -0.02em を基準にする",
      "価格は font-weight: 700 で強調",
      "エラー・成功は専用色(#F05D5D / #51A551)を使う",
      "フォントはシステムフォントスタックで十分(ウェブフォント不要)"
    ],
    "dont": [
      "brand-red (#7F0019) をボタン背景・大面積に使う",
      "グラデーションやシャドウを過剰に使う(box-shadow は hover 時のみ)",
      "border-radius を 6px 超で使う(カードや入力フィールドは特に注意)",
      "黒 (#000) 以外の色をプライマリボタンに使う",
      "カード画像に 16:9 など縦横比の異なる比率を混在させる",
      "テキストリンクに下線を常時表示する(hover 時のみ)",
      "装飾的なフォント・アイコンフォントを使う"
    ]
  }
}