---
version: alpha
name: SK-II Japan
description: 高機能プレミアムスキンケアブランド。ピテラ™を中心とした発酵科学の物語とシグネチャーレッド／ホワイトの二色構成で、ラグジュアリーと親しみやすさを両立する。
sources:
  - https://www.sk-ii.jp/
  - https://www.sk-ii.com/
  - https://www.brandcolorcode.com/sk-ii
  - https://www.brucemaudesign.com/work/sk-ii
  - https://timcripps.com/project/sk-ii
  - https://images.ctfassets.net/4qp6lhjn6atl/3bCqYNmoVRWvwYVpTmDNub/644aad65883ba634b14877f505d43bc7/logo-white.svg
notes:
  - ブランドカラー #EA0429 は logo-white.svg の fill 値から直接確認（赤ロゴSVG）。
  - Pantone 185 C / RGB 234,4,41 との一致をブランドカラーデータベースで確認。
  - フォントファミリーはブランドガイドラインに公式公開がなく推論値（Inference）。
  - レイアウト・コンポーネント情報はトップページ HTML 構造と画像ネーミングから観察。
  - 実装は Next.js + Contentful CMS 構成。© 2026 Procter & Gamble Japan。

colors:
  primary: "#EA0429"
  on-primary: "#FFFFFF"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  surface-alt: "#F7F5F3"
  text-primary: "#111111"
  text-secondary: "#555555"
  text-disabled: "#999999"
  border: "#E0E0E0"
  overlay: "rgba(0,0,0,0.4)"
  gold-accent: "#C9A96E"

typography:
  display:
    fontFamily: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"
    fontWeight: 400
    letterSpacing: "0.12em"
    textTransform: uppercase
  heading-jp:
    fontFamily: "'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif"
    fontWeight: 300
    letterSpacing: "0.05em"
  body:
    fontFamily: "'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.8
  label:
    fontSize: "11px"
    fontWeight: 500
    letterSpacing: "0.1em"
    textTransform: uppercase

rounded:
  none: "0"
  sm: "2px"
  md: "4px"
  pill: "9999px"

spacing:
  base: "8px"
  section-y: "80px"
  section-y-mobile: "48px"
  card-gap: "16px"
  container-max: "1440px"
  container-padding: "24px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.none}"
    padding: "14px 32px"
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: "{typography.label.letterSpacing}"
    textTransform: "uppercase"
    border: "none"
    hoverBackgroundColor: "#C70023"
  button-secondary:
    backgroundColor: "transparent"
    color: "{colors.text-primary}"
    border: "1px solid {colors.text-primary}"
    borderRadius: "{rounded.none}"
    padding: "13px 31px"
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: "{typography.label.letterSpacing}"
    textTransform: "uppercase"
  button-ghost:
    backgroundColor: "transparent"
    color: "{colors.on-primary}"
    border: "1px solid {colors.on-primary}"
    note: "白背景ヒーロー上で使用"
  notification-bar:
    backgroundColor: "transparent"
    backgroundImage: "product imagery"
    height: "56px"
    note: "全幅カルーセル。複数プロモーションをスライド表示"
  nav:
    backgroundColor: "{colors.background}"
    height: "64px"
    borderBottom: "1px solid {colors.border}"
    logoColor: "{colors.primary}"
    linkColor: "{colors.text-primary}"
    linkHoverColor: "{colors.primary}"
    note: "ロゴは赤SVGロゴマーク。ドロップダウンあり"
  product-card:
    backgroundColor: "{colors.background}"
    borderRadius: "{rounded.none}"
    imageAspectRatio: "3/4"
    titleFontSize: "13px"
    titleFontWeight: 500
    ctaStyle: "text-link"
    ctaColor: "{colors.text-primary}"
    note: "画像優先。テキストは画像下に配置。商品名・詳細リンクのみ"
  hero-banner:
    layout: "full-bleed"
    textPlacement: "overlay または adjacent"
    imageFormat: "WebP via Contentful CDN"
    overlayColor: "{colors.overlay}"
    headingColor: "{colors.on-primary}"
    note: "モバイルとデスクトップで別画像 (SP/PC ネーミング規則)"
  category-tile:
    layout: "image背景 + テキストオーバーレイ"
    borderRadius: "{rounded.none}"
    columns: "4 desktop / 2 mobile"
  concern-card:
    layout: "image + ラベルオーバーレイ"
    columns: "3 desktop / 2 mobile"
  footer:
    backgroundColor: "{colors.background}"
    borderTop: "1px solid {colors.border}"
    columns: 4
    linkColor: "{colors.text-secondary}"
    socialIcons: "Facebook, Instagram, Twitter/X, YouTube, @cosme"
    note: "P&G著作権表示。JVA2020-02-001"
---

## 概要

SK-II は Procter & Gamble 傘下のプレミアムスキンケアブランド。日本市場向け公式サイト（sk-ii.jp）は Next.js + Contentful CMS で構築されており、ラグジュアリー感と科学的信頼性を組み合わせた視覚言語を持つ。

コアアイデンティティは **ピテラ™（ガラクトミセス培養液）の発酵美容科学** であり、デザインはその純粋さと高級感を反映する。ブランドカラーは鮮烈な赤（#EA0429）と白の二色のみ。ゴールドアクセントは一部プレミアムライン（LXP クリーム）に限定使用される。

---

## カラー

| トークン | 値 | 役割 | 根拠 |
|---|---|---|---|
| `primary` | `#EA0429` | ロゴ・CTAボタン・ブランドアクセント | SVG logo fill 直接確認 / Pantone 185 C |
| `on-primary` | `#FFFFFF` | primary上のテキスト・アイコン | 対比計算 |
| `background` | `#FFFFFF` | 全ページ背景・カード背景 | ページ観察 |
| `surface-alt` | `#F7F5F3` | セクション区切り背景 | 推論 |
| `text-primary` | `#111111` | 見出し・本文・CTA文字 | ページ観察（黒系） |
| `text-secondary` | `#555555` | サブテキスト・フッターリンク | 推論 |
| `border` | `#E0E0E0` | ナビ下線・カード境界線 | 推論 |
| `overlay` | `rgba(0,0,0,0.4)` | ヒーロー画像オーバーレイ | 推論 |
| `gold-accent` | `#C9A96E` | LXP／金継ぎモチーフ装飾のみ | ページ「金継ぎ」言及 + 推論 |

**禁止事項:**
- primary (#EA0429) をテキスト本文色に使わない
- gold-accent は LXP 系ライン以外に使用しない
- 中間色（グレー系マルチカラー）の多用はブランドミニマリズムを損なう

---

## タイポグラフィ

SK-II は「洗練されたタイポグラフィ」を主要デザイン要素と位置付ける（Bruce Mau Design 言及）。

### ディスプレイ（ラテン）
```
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
font-weight: 400
letter-spacing: 0.12em
text-transform: uppercase
```
- ブランド名・英語キャッチコピー・ナビラベルに使用
- 字間を広く取ることで高級感を演出

### 見出し・本文（日本語）
```
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif
font-weight: 300 (見出し) / 400 (本文)
letter-spacing: 0.05em
line-height: 1.8
```
- 細ウェイトで上品さを維持
- 行間 1.8 は日本語組版の読みやすさ標準

### ラベル・ボタン
```
font-size: 11px
font-weight: 500
letter-spacing: 0.1em
text-transform: uppercase
```

> **推論:** フォント名はブランドガイドラインに非公開。観察できる文字のプロポーションと字間設定から Gill Sans 系（ラテン）、Hiragino/Noto（日本語）が最も整合性が高い。

---

## レイアウト

- **コンテナ幅:** 最大 1440px、左右パディング 24px
- **セクション縦マージン:** 80px（デスクトップ）/ 48px（モバイル）
- **グリッド:**
  - 商品カード: 4列（デスクトップ）→ 2列（タブレット）→ 1列（モバイル）
  - カテゴリタイル: 4列 → 2列
  - お悩みカテゴリ: 3列 → 2列
- **全幅要素:** ヒーローバナー・通知バー・フッター
- **余白思想:** 広い余白で高級感。コンテンツ密度は低め

---

## コンポーネント

### 通知バー
- 全幅カルーセル。高さ約 56px
- 複数プロモーションを自動スライド
- 商品画像を背景にテキスト重ね表示

### ナビゲーション
- 固定ヘッダー（ページスクロール後も常時表示）
- 背景: 白 / ロゴ: 赤 SVG / リンク: 黒
- ドロップダウンあり（商品カテゴリ・スキンケア悩み別）
- モバイルはハンバーガーメニューに変化

### ヒーローバナー
- フルブリード画像
- テキストはオーバーレイまたは画像横に配置
- 画像は SP / PC で別ファイル使用（命名: `-SP.jpg`, `-PC.jpg`）
- WebP フォーマット, Contentful CDN 配信

### 商品カード
- 画像（縦長比率 3:4 が多い）→ 商品名 → 短い説明 → CTA
- CTA は "詳細をみる"（テキストリンク）または "オンラインで購入"（ボタン）
- ボーダーなし、シャドウなし、余白のみで区切る

### ボタン
| 種別 | 背景 | テキスト | ボーダー |
|---|---|---|---|
| primary | #EA0429 | #FFFFFF | なし |
| secondary | transparent | #111111 | 1px solid #111111 |
| ghost（白背景上） | transparent | #FFFFFF | 1px solid #FFFFFF |

全ボタン: border-radius: 0（角丸なし）、全大文字表記、字間広め

---

## 画像・ビジュアル

### フォトグラフィースタイル
- **商品写真:** クリーンな白または淡いニュートラル背景。瓶・テクスチャーを際立たせる
- **モデル写真:** 日本人アンバサダー（例：綾瀬はるか）を起用。自然光調、肌の透明感を強調
- **エディトリアル:** ラグジュアリー感重視。過剰な加工を避け、高品質感を訴求

### アセット形式
- フォーマット: WebP（`?fm=webp&q=90`）
- CDN: Contentful (`images.ctfassets.net`)
- レスポンシブ: SP / PC 別画像を使い分け
- 幅パラメータ: `&w=1920` / `&w=750` など

### ブランドモチーフ
- **ピテラ™ドロップ:** 発酵エッセンスの透明な一滴。純粋さ・科学性を象徴
- **金継ぎ（Kintsugi）:** LXP クリームラインで使用。ゴールドのひび割れパターン。老化の美学・修復の価値を示す
- **清潔感ある白背景:** ブランド全体の基調

---

## ロゴと使用ルール

### ロゴ仕様
| バリエーション | サイズ | 塗りカラー | 用途 |
|---|---|---|---|
| 赤ロゴ | viewBox 53×22 | #EA0429 | 白背景上 |
| 白ロゴ | viewBox 99×42 | #FFFFFF | 暗色・画像背景上 |

- フォーマット: SVG（パスのみ、テキストなし）
- ロゴはワードマーク。アイコン版・モノグラム版の存在は未確認

### 禁止事項
- ロゴに輪郭線（stroke）を追加しない
- ロゴの縦横比を変更しない
- ロゴを回転させない
- 低コントラスト背景（薄いグレーなど）に赤ロゴを配置しない
- 他のグラフィック要素でロゴを囲まない

---

## Do's and Don'ts

### Do
- 白背景 + 赤アクセントの二色構成を基本とする
- 日本語は細ウェイト（W3/W4）で高品位感を出す
- 広い余白でコンテンツを「呼吸させる」
- 商品写真を主役にし、テキストを控えめに添える
- CTAボタンは角丸なし・全大文字・字間広めで統一する
- 通知バーには複数プロモーションをカルーセル表示する
- 画像は WebP を優先、SP/PC 別ファイルを用意する

### Don't
- 赤（#EA0429）を大面積の背景色に使わない（ロゴ・ボタン等の限定用途のみ）
- グラデーション、テクスチャ、影を多用しない（LXP Kintsugi モチーフを除く）
- ラウンドコーナー（border-radius > 4px）を一般 UI に使わない
- 多書体を混在させない
- カラフルな配色（3色以上）を導入しない
- 文字を過度に小さくしない（日本語は 13px 以上を推奨）
- gold-accent を LXP ライン以外のプロダクトに使わない

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "skii",
    "name": "SK-II Japan",
    "url": "https://www.sk-ii.jp/",
    "description": "Procter & Gamble 傘下のプレミアムスキンケアブランド。コアアイデンティティは『ピテラ™ (ガラクトミセス培養液) の発酵美容科学』で、その純粋さと高級感を反映した視覚言語を持つ。シグネチャーレッド (#EA0429 / Pantone 185 C) と白の二色構成のみで、ラグジュアリーと親しみやすさを両立。広い余白・細ウェイト日本語・角丸なし全大文字 CTA という極端なミニマリズムを徹底。Next.js + Contentful CMS 構成。",
    "category": "ec",
    "tags": [
      "beauty",
      "japanese",
      "luxury",
      "skincare",
      "minimal",
      "two-color",
      "premium",
      "p-and-g"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.sk-ii.jp/",
    "https://www.sk-ii.com/",
    "https://www.brandcolorcode.com/sk-ii",
    "https://www.brucemaudesign.com/work/sk-ii",
    "https://timcripps.com/project/sk-ii",
    "https://images.ctfassets.net/4qp6lhjn6atl/3bCqYNmoVRWvwYVpTmDNub/644aad65883ba634b14877f505d43bc7/logo-white.svg"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: ブランドカラー #EA0429 は logo-white.svg の fill 値から直接確認 (赤ロゴ SVG)。",
    "直接証拠: Pantone 185 C / RGB 234,4,41 との一致をブランドカラーデータベースで確認。",
    "推論: フォントファミリーはブランドガイドラインに公式公開がなく推論値。観察される字間 (0.12em) とプロポーションから Gill Sans 系 (ラテン)・Hiragino/Noto (日本語) と判定。",
    "直接証拠: レイアウト・コンポーネント情報はトップページ HTML 構造と画像ネーミング (-SP.jpg / -PC.jpg) から観察。",
    "注意: 実装は Next.js + Contentful CMS 構成、画像は images.ctfassets.net CDN 経由 WebP 配信。",
    "注意: © 2026 Procter & Gamble Japan、JVA2020-02-001 表記あり。",
    "重要: 赤 (#EA0429) は CTA・ロゴ・アクセント専用。本文テキスト色や大面積背景には絶対に使わない。",
    "重要: gold-accent (#C9A96E) は LXP クリームの『金継ぎ (Kintsugi)』モチーフ専用、一般 UI には使わない。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Red",
        "tokens": [
          {
            "name": "Primary (SK-II Red)",
            "value": "#EA0429",
            "token": "--color-primary",
            "role": "ブランドの中核色。Pantone 185 C / RGB 234,4,41。ロゴ・CTA ボタン・ブランドアクセント専用"
          },
          {
            "name": "Primary Hover",
            "value": "#C70023",
            "token": "--color-primary-hover",
            "role": "プライマリボタンのホバー状態 (深紅)"
          },
          {
            "name": "On Primary",
            "value": "#FFFFFF",
            "token": "--color-on-primary",
            "role": "赤背景上のテキスト・アイコン"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Background",
            "value": "#FFFFFF",
            "token": "--color-background",
            "role": "全ページ背景・カード背景"
          },
          {
            "name": "Surface Alt",
            "value": "#F7F5F3",
            "token": "--color-surface-alt",
            "role": "セクション区切り背景 (微かに温かいオフホワイト)"
          }
        ]
      },
      {
        "label": "Text & Border",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#111111",
            "token": "--color-text-primary",
            "role": "見出し・本文・CTA 文字 (純黒に近いソフトブラック)"
          },
          {
            "name": "Text Secondary",
            "value": "#555555",
            "token": "--color-text-secondary",
            "role": "サブテキスト・フッターリンク"
          },
          {
            "name": "Text Disabled",
            "value": "#999999",
            "token": "--color-text-disabled",
            "role": "無効状態テキスト"
          },
          {
            "name": "Border",
            "value": "#E0E0E0",
            "token": "--color-border",
            "role": "ナビ下線・カード境界線"
          }
        ]
      },
      {
        "label": "Overlay & Premium Accent",
        "tokens": [
          {
            "name": "Overlay Dark",
            "value": "rgba(0,0,0,0.4)",
            "token": "--color-overlay",
            "role": "ヒーロー画像オーバーレイ"
          },
          {
            "name": "Gold Accent (LXP Only)",
            "value": "#C9A96E",
            "token": "--color-gold-accent",
            "role": "LXP クリームの金継ぎ (Kintsugi) モチーフ装飾専用。一般 UI には使わない"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Gill Sans (Latin Display)",
        "stack": "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif",
        "weights": [
          400
        ],
        "role": "ブランド名・英語キャッチコピー・ナビラベル・CTA ラベル。字間広め (0.12em) + 全大文字で高級感を演出"
      },
      {
        "family": "Hiragino Sans (Japanese)",
        "stack": "'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif",
        "weights": [
          300,
          400,
          500
        ],
        "role": "日本語見出し・本文。細ウェイト (W3/W4) で上品さを維持、行間 1.8 で日本語組版の読みやすさを確保"
      }
    ],
    "scale": [
      {
        "role": "display (Latin)",
        "size": "48px",
        "weight": 400,
        "lineHeight": 1.2,
        "letterSpacing": "0.12em",
        "textTransform": "uppercase",
        "note": "Gill Sans 400、ブランド英語キャッチコピー専用"
      },
      {
        "role": "heading-jp",
        "size": "32px",
        "weight": 300,
        "lineHeight": 1.4,
        "letterSpacing": "0.05em",
        "note": "Hiragino Sans 300、日本語見出し (細ウェイトで上品さ)"
      },
      {
        "role": "subheading-jp",
        "size": "20px",
        "weight": 300,
        "lineHeight": 1.5,
        "letterSpacing": "0.05em",
        "note": "Hiragino Sans 300、日本語サブ見出し"
      },
      {
        "role": "body",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.8,
        "letterSpacing": "0.05em",
        "note": "Hiragino Sans 400、日本語本文 (line-height 1.8 が日本語標準)"
      },
      {
        "role": "product-title",
        "size": "13px",
        "weight": 500,
        "lineHeight": 1.5,
        "letterSpacing": "0.05em",
        "note": "商品カードタイトル"
      },
      {
        "role": "label / button",
        "size": "11px",
        "weight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.1em",
        "textTransform": "uppercase",
        "note": "CTA ボタン・ナビラベル・タグ。全大文字 + 字間広め"
      }
    ],
    "japanese": {
      "fontStack": "'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif",
      "lineHeight": 1.8,
      "letterSpacing": "0.05em",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "見出しは Light (300)、本文は Regular (400)、ラベルは Medium (500) の 3 段階",
        "letter-spacing: 0.05em が日本語の標準値、ラベルは 0.1em で広げる",
        "line-height: 1.8 は日本語組版の高級感を示す広めの値",
        "ラテン文字は Gill Sans 系で字間 0.12em + 全大文字、日本語との対比で高級感を演出"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "base",
        "value": "8px",
        "role": "スペーシング単位"
      },
      {
        "name": "card-gap",
        "value": "16px",
        "role": "商品カード間の隙間"
      },
      {
        "name": "container-padding",
        "value": "24px",
        "role": "コンテナ左右パディング"
      },
      {
        "name": "section-y-mobile",
        "value": "48px",
        "role": "モバイルセクション縦マージン"
      },
      {
        "name": "section-y",
        "value": "80px",
        "role": "デスクトップセクション縦マージン"
      },
      {
        "name": "container-max",
        "value": "1440px",
        "role": "最大コンテンツ幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 767px",
      "role": "モバイル (1列商品グリッド・SP 画像)"
    },
    "tablet": {
      "value": "768-1023px",
      "role": "タブレット (2 列商品グリッド)"
    },
    "desktop": {
      "value": "≥ 1024px",
      "role": "デスクトップ (4 列商品グリッド・PC 画像・max-width 1440px)"
    }
  },
  "radius": {
    "none": "0",
    "sm": "2px",
    "md": "4px",
    "pill": "9999px",
    "default": "0",
    "note": "ラグジュアリーブランドの核心ルール: border-radius は基本 0px。角丸を使わない潔さがブランドの高級感を作る"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "赤背景の角丸なし全大文字ボタン。SK-II の核心 CTA スタイル",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#EA0429",
            "color": "#FFFFFF",
            "borderRadius": "0",
            "padding": "14px 32px",
            "fontFamily": "'Gill Sans', 'Gill Sans MT', sans-serif",
            "fontSize": "11px",
            "fontWeight": "500",
            "letterSpacing": "0.1em",
            "textTransform": "uppercase",
            "border": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#C70023",
            "color": "#FFFFFF",
            "borderRadius": "0",
            "padding": "14px 32px",
            "fontFamily": "'Gill Sans', 'Gill Sans MT', sans-serif",
            "fontSize": "11px",
            "fontWeight": "500",
            "letterSpacing": "0.1em",
            "textTransform": "uppercase",
            "border": "none"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button (Outline)",
      "description": "透明背景 + 黒枠の角丸なしアウトラインボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#111111",
            "border": "1px solid #111111",
            "borderRadius": "0",
            "padding": "13px 31px",
            "fontFamily": "'Gill Sans', 'Gill Sans MT', sans-serif",
            "fontSize": "11px",
            "fontWeight": "500",
            "letterSpacing": "0.1em",
            "textTransform": "uppercase"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#111111",
            "color": "#FFFFFF",
            "border": "1px solid #111111",
            "borderRadius": "0",
            "padding": "13px 31px",
            "fontFamily": "'Gill Sans', 'Gill Sans MT', sans-serif",
            "fontSize": "11px",
            "fontWeight": "500",
            "letterSpacing": "0.1em",
            "textTransform": "uppercase"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Ghost Button (on Dark)",
      "description": "白背景ヒーロー上で使用する透明背景 + 白枠ボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#FFFFFF",
            "border": "1px solid #FFFFFF",
            "borderRadius": "0",
            "padding": "13px 31px",
            "fontFamily": "'Gill Sans', 'Gill Sans MT', sans-serif",
            "fontSize": "11px",
            "fontWeight": "500",
            "letterSpacing": "0.1em",
            "textTransform": "uppercase"
          }
        }
      ]
    },
    {
      "type": "alert",
      "name": "Notification Bar",
      "description": "全幅カルーセル通知バー (高さ 56px)。商品画像背景 + テキスト重ね表示で複数プロモーションをスライド",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "backgroundImage": "product imagery",
            "color": "#FFFFFF",
            "height": "56px",
            "padding": "0 24px"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "固定ヘッダー (高さ 64px)。白背景 + 赤 SVG ロゴ + 黒テキストリンク、ドロップダウン付き",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "height": "64px",
            "borderBottom": "1px solid #E0E0E0",
            "logoColor": "#EA0429",
            "linkColor": "#111111",
            "linkHoverColor": "#EA0429"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Card",
      "description": "ボーダー・シャドウなし、余白のみで区切るミニマルな商品カード。画像優先 (3:4 縦長比率)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#111111",
            "borderRadius": "0",
            "imageAspectRatio": "3/4",
            "titleFontSize": "13px",
            "titleFontWeight": "500",
            "titleLetterSpacing": "0.05em",
            "ctaStyle": "text-link",
            "ctaColor": "#111111"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Hero Banner",
      "description": "フルブリードのヒーロー画像。SP/PC で別画像、WebP 配信、テキストはオーバーレイか画像横",
      "variants": [
        {
          "label": "Overlay Text",
          "props": {
            "layout": "full-bleed",
            "overlayColor": "rgba(0,0,0,0.4)",
            "headingColor": "#FFFFFF",
            "imageFormat": "WebP via Contentful CDN",
            "imageNaming": "-SP.jpg / -PC.jpg"
          }
        }
      ]
    },
    {
      "type": "tile",
      "name": "Category Tile",
      "description": "画像背景 + テキストオーバーレイのカテゴリタイル。4 列 (デスクトップ) → 2 列 (モバイル)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "image",
            "color": "#FFFFFF",
            "borderRadius": "0",
            "overlay": "rgba(0,0,0,0.3)",
            "columnsDesktop": "4",
            "columnsMobile": "2"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Concern Card",
      "description": "肌悩み別カテゴリカード。画像 + ラベルオーバーレイ。3 列 (デスクトップ) → 2 列 (モバイル)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "layout": "image + label overlay",
            "background": "image",
            "color": "#FFFFFF",
            "borderRadius": "0",
            "columnsDesktop": "3",
            "columnsMobile": "2"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "白背景・4 カラムのミニマルフッター。P&G 著作権表示・JVA 認証番号付き",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#555555",
            "borderTop": "1px solid #E0E0E0",
            "columns": "4",
            "linkColor": "#555555",
            "linkHoverColor": "#EA0429",
            "socialIcons": "Facebook, Instagram, Twitter/X, YouTube, @cosme"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "白背景 + 赤アクセントの二色構成を基本とする",
      "日本語は細ウェイト (W3/W4) で高品位感を出す",
      "広い余白でコンテンツを『呼吸させる』 — section-y: 80px が標準",
      "商品写真を主役にし、テキストを控えめに添える",
      "CTA ボタンは角丸なし・全大文字・字間広めで統一する (letter-spacing: 0.1em)",
      "通知バーには複数プロモーションをカルーセル表示する",
      "画像は WebP を優先、SP/PC 別ファイル (-SP.jpg / -PC.jpg) を用意する",
      "ラテン文字は Gill Sans 系で字間 0.12em + 全大文字を徹底する",
      "日本語本文の line-height は 1.8 を確保する (高級感の演出)",
      "ロゴは赤 SVG (白背景上) と白 SVG (暗色・画像背景上) を使い分ける"
    ],
    "dont": [
      "赤 (#EA0429) を大面積の背景色に使わない (ロゴ・ボタン等の限定用途のみ)",
      "赤を本文テキスト色に使わない (リーダビリティとブランド希少性の両方が損なわれる)",
      "グラデーション・テクスチャ・影を多用しない (LXP Kintsugi モチーフを除く)",
      "ラウンドコーナー (border-radius > 4px) を一般 UI に使わない",
      "多書体を混在させない (Gill Sans 系 + Hiragino 系の 2 書体のみ)",
      "カラフルな配色 (3 色以上) を導入しない",
      "文字を過度に小さくしない (日本語は 13px 以上を推奨)",
      "gold-accent (#C9A96E) を LXP ライン以外のプロダクトに使わない",
      "ロゴに輪郭線 (stroke) を追加しない、縦横比を変更しない、回転させない",
      "低コントラスト背景 (薄いグレーなど) に赤ロゴを配置しない"
    ]
  }
}