---
version: beta
name: Vaundy / VAWS Members
description: 日本のシンガーソングライター Vaundy のファンクラブサイト「Vaundy ART Work Studio Members (VAWS)」のビジュアルアイデンティティ。#121212 × 白を基盤に、バッジ系のオレンジと、キャンペーンごとに入れ替わる単色アクセントを重ねる劇場的デザインシステム。
sources:
  - https://member.vaundy.jp/
  - https://member.vaundy.jp/static/original/fanclub/css/style.css
  - https://vaundy.jp/
  - https://member.vaundy.jp/static/vaundy/fanclub/home/main_title.svg
  - https://member.vaundy.jp/static/vaundy/fanclub/home/mv_mask.svg
  - https://vaundy.jp/static/vaundy/official/logo.svg
  - https://vaundy.jp/static/vaundy/official/logo_fc.svg
  - https://s3-aop.plusmember.jp/prod/public/vaundy/contents/banner/ (複数バナー画像)
notes:
  - style.css を直接取得済み。色値・コンポーネントスタイルはすべて CSS ソースから直接観測。CSS カスタムプロパティ（--変数）は使用なし。
  - VAUNDY ワードマークは完全カスタムレタリング。標準フォントへの代替は不可。
  - キャンペーンカラー（赤・橙・黄・青）はツアーポスター/バナー用途のみ。site CSS には含まれない。
  - 見出し用コンデンストフォント（Bebas Neue 等）はキャンペーン画像（Photoshop 制作）で使用。サイト CSS のフォントスタックには含まれず Noto Sans JP が全域で使用される。
colors:
  black: "#121212"
  white: "#FFFFFF"
  gray-border: "#eeeeee"
  gray-bg-hover: "#dcdcdc"
  gray-mid: "#7F7F7F"
  gray-muted: "#bbbbbb"
  accent-orange: "#ff6c00"
  error-red: "#FF4343"
  error-bg: "#ffdada"
  error-bg-light: "#ffdcc6"
  tab-active: "#d2dd34"
typography:
  root: "font-size: 62.5% (1rem = 10px)"
  body:
    fontFamily: "'Noto Sans JP', 'Segoe UI', '游ゴシック体', YuGothic, 'Yu Gothic Medium', BlinkMacSystemFont, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif"
    googleFont: "Noto Sans JP"
    weights: [300, 400, 500, 700]
    fontSize: "1.5rem (15px)"
    lineHeight: "1.8"
    letterSpacing: "0.05em (inputs)"
  english:
    fontFamily: "'Open Sans', sans-serif"
    googleFont: "Open Sans"
    weights: [500, 700]
    notes: "英語サブテキスト用途で部分使用"
  decorative:
    fontFamily: "'Shadows Into Light', cursive"
    googleFont: "Shadows Into Light"
    notes: "手書き風装飾テキスト。限定的な用途のみ。"
  display:
    notes: "VAUNDY カスタムレタリング SVG のみ。フォント代替不可。"
  campaign-heading:
    notes: "ツアーバナー（Photoshop 制作）で使用。コンデンストサンセリフ、大文字。サイト CSS には存在しない。"
  icons:
    library: "Font Awesome (all.min.css)"
    url: "https://cmn-assets.plusmember.jp/webfont/assets/font/fontawesome/css/all.min.css"
  mono:
    fontFamily: "monospace, monospace"
rounded:
  none: "0px"
  input: "2px"
  soft: "5px–6px"
  pill: "4em / 50px"
  circle: "50%"
spacing:
  base: "8px"
  section: "64px–96px"
  card-gap: "16px–24px"
  drawer-btn: "top: 40px; right: 40px"
components:
  button-primary:
    selector: ".btn--main"
    backgroundColor: "#121212"
    color: "#FFFFFF"
    borderRadius: "0"
    padding: "1em"
    fontSize: "1.3rem"
    fontStyle: "normal !important"
    textDecoration: "none !important"
    textAlign: "center"
  button-secondary:
    selector: ".btn--sub"
    backgroundColor: "transparent"
    color: "#121212"
    border: "1px solid #121212"
    borderRadius: "0"
    padding: "1em"
    fontSize: "1.3rem"
  input:
    border: "1px solid #121212"
    borderRadius: "2px"
    padding: "0.5em"
    background: "transparent"
    fontSize: "1.5rem"
    lineHeight: "1.8"
    letterSpacing: "0.05em"
  card:
    selector: ".list--contents li"
    backgroundColor: "#FFFFFF"
    borderRadius: "0"
    figureBorder: "1px solid #eeeeee"
    imageTransition: "0.4s"
  navigation:
    position: "absolute (header) / fixed (drawer, hamburger)"
    drawerBg: "rgba(0, 0, 0, 0.9)"
    hamburgerSize: "50px × 50px"
    hamburgerPosition: "fixed; top: 40px; right: 40px"
---

## 概要

VAWS Members（Vaundy ART Work Studio Members）は Vaundy の公式ファンクラブサイト。ベースは `#121212` × 白のミニマル UI で、写真・映像・ツアービジュアルが色彩の主役を担う構造。キャンペーン素材では単色の飽和カラーがビジュアルを全面支配する「ポスター的」な大胆さが際立つ。サイト CSS にカスタムプロパティ（CSS 変数）は使用されていない。

---

## カラー

### UI ニュートラル（CSS から直接確認）

| トークン | 値 | 用途 |
|---|---|---|
| `black` | `#121212` | プライマリテキスト、ボタン背景、ボーダー、SVG fill |
| `white` | `#FFFFFF` | ページ背景、カード背景、黒背景上のテキスト |
| `gray-border` | `#eeeeee` | カードの figure ボーダー、画像プレースホルダー背景、区切り線 |
| `gray-bg-hover` | `#dcdcdc` | ホバー背景、無効状態 |
| `gray-mid` | `#7F7F7F` | セカンダリテキスト、"more" ボタンの stroke |
| `gray-muted` | `#bbbbbb` | 淡色テキスト |

### UI アクセント（CSS から直接確認）

| トークン | 値 | 用途 |
|---|---|---|
| `accent-orange` | `#ff6c00` | "NEW" バッジ、一部ハイライト |
| `error-red` | `#FF4343` | エラーテキスト、アラートリンク、エラー背景アイコン |
| `error-bg` | `#ffdada` | エラーフォーム背景 |
| `tab-active` | `#d2dd34` | タブアクティブ状態のボーダー（黄緑） |

### キャンペーンアクセント（バナー画像から観測、UI CSS には存在しない）

| トークン | 値 | 実例 |
|---|---|---|
| `red-deep` | `#7A1010` 相当 | Asia Arena Tour 2026 "HORO"、Japan Arena Tour 2027-2028 背景 |
| `orange-vivid` | `#E85500` 相当 | Dome Tour 2026 "SILENCE" 背景 |
| `yellow-vivid` | `#F5E000` 相当 | "SILENCE" ロゴ・テキスト |
| `cyan-vivid` | `#00C8E8` 相当 | Japan Arena Tour ロゴ・テキスト |
| `gold-warm` | `#C8A870` 相当 | "HORO" ロゴ・テキスト |

**重要：** キャンペーンカラーはポスター・バナーの全面塗り用途のみ。UI コンポーネント（ボタン・フォーム・アイコン）には使用しない。

---

## タイポグラフィ

### VAUNDY ワードマーク（ロゴ）

完全カスタムレタリング。有機的・流動的な筆致で、文字が溶けるような独自の形状を持つ。SVG として使用すること。フォントによる再現は不可。

- ファイル：`/static/vaundy/official/logo.svg`（fill 指定なし → デフォルト黒）
- 反転白：SVG に `fill="#FFFFFF"` を追加
- `logo_fc.svg`：下部に "MEMBERS" テキスト付属のファンクラブ版

### VAWS ワードマーク（ファンクラブ略称）

- ファイル：`/static/vaundy/fanclub/home/main_title.svg`（`.st0 { fill: #FFFFFF }`）
- 正式名称 Vaundy ART Work Studio の略
- 黒背景での白ロゴが基本運用

### サイト本文フォント（CSS + Google Fonts 確認済み）

```html
<!-- Google Fonts 読み込み（<head> より） -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Open+Sans:wght@500;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<!-- アイコン -->
<link href="https://cmn-assets.plusmember.jp/webfont/assets/font/fontawesome/css/all.min.css" rel="stylesheet">
```

```css
/* ベース設定 */
html { font-size: 62.5%; }  /* 1rem = 10px */

body {
  font-family: "Noto Sans JP", "Segoe UI", "游ゴシック体", YuGothic,
    "Yu Gothic Medium", BlinkMacSystemFont,
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.5rem;   /* 15px */
  line-height: 1.8;
}
```

| フォント | Weight | 用途 |
|---|---|---|
| Noto Sans JP | 300, 400, 500, 700 | 日本語・英語本文全般 |
| Open Sans | 500, 700 | 英語サブテキスト |
| Shadows Into Light | 400 | 手書き風装飾テキスト（限定） |
| Font Awesome | — | UI アイコン全般 |

### フォントサイズスケール（CSS 確認済み）

| 用途 | 値 |
|---|---|
| キャプション/小テキスト | `1.2rem` (12px) / `1.3rem` (13px) |
| ボタン・ラベル | `1.3rem` (13px) |
| ボディ | `1.5rem` (15px) |
| サブ見出し | `1.6rem` (16px) / `1.8rem` (18px) |
| 見出し | `2rem` (20px) / `2.2rem` (22px) |
| 大見出し | `4rem` (40px) |
| ヒーロー表示 | `min(8vw, 94px)` / `min(6vw, 42px)` / `min(4vw, 24px)` |

### キャンペーンバナーのフォント（CSS 外・Photoshop 制作）

"JAPAN ARENA TOUR"、"LIVE STREAMING" などのツアーグラフィック見出しは Photoshop 上で制作された画像。サイト CSS のフォントスタックとは別物。コンデンストサンセリフ（Bebas Neue 相当）、全大文字で構成。

---

## レイアウト

- **グリッド：** カードベースのグリッドレイアウト（News、Photos、Movies、Talk の各セクション）。デスクトップ 3 カラム、モバイルで折り返し
- **ブレークポイント：** `961px`（デスクトップ切り替え点）
- **セクション余白：** `64px`〜`96px`
- **カードギャップ：** `16px`〜`24px`
- **ヒーロー：** フルブリードの SVG マスク演出（`mv_mask.svg` による白抜き型）
- **ナビゲーション：** `position: absolute`（スクロールで隠れる型）、ドロワーメニューは `position: fixed` でフルスクリーン展開

---

## コンポーネント

### ボタン（CSS 確認済み）

```css
/* プライマリ (.btn--main) */
background: #121212;
color: #fff;
border-radius: 0;          /* シャープコーナー */
padding: 1em;
font-size: 1.3rem;
text-align: center;
text-decoration: none !important;

/* セカンダリ (.btn--sub) */
border: 1px solid #121212;
background: none;
color: #121212;
border-radius: 0;
padding: 1em;
font-size: 1.3rem;
```

### フォーム入力（CSS 確認済み）

```css
input[type=text], input[type=email], input[type=password], textarea {
  font-family: "Noto Sans JP", /* ... */;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  border: 1px solid #121212;
  border-radius: 2px;       /* 入力欄のみ 2px */
  padding: 0.5em;
  background: transparent;
  width: 100%;
}
```

### コンテンツカード（CSS 確認済み）

```css
.list--contents li {
  background-color: #fff;
  overflow: hidden;
  border-radius: 0;         /* シャープコーナー */
}
.list--contents li a figure {
  border: 1px solid #eeeeee;
}
.list--contents li a figure img {
  transition: 0.4s;
  background-color: #eeeeee;  /* ロード前プレースホルダー */
}
```

### ナビゲーション（CSS 確認済み）

```css
header {
  position: absolute;    /* スクロールで流れる */
  top: 0; left: 0;
  width: 100%;
  z-index: 101;
}

/* ドロワー（フルスクリーン） */
.drawer {
  position: fixed;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;            /* 閉じた状態 */
  transition: opacity 0.4s cubic-bezier(0.16, 0.68, 0.65, 1.03);
}

/* ハンバーガーボタン */
.drawer__btn {
  width: 50px; height: 50px;
  position: fixed;
  top: 40px; right: 40px;
  z-index: 9999;
}
```

### MEMBERS ONLY オーバーレイ

非公開コンテンツ（会員限定写真等）はブラーフィルターでマスク表示。

```css
/* 会員限定コンテンツの blur 処理 */
filter: blur(...);
/* "VAWS MEMBERS ONLY" テキストオーバーレイ */
background: rgba(255, 255, 255, 0.3);
```

### バナー／プロモーションカード

- 16:9 または 2.35:1 の横長比率
- キャンペーンカラーで背景を全面塗り（グラデーションなし）
- VAUNDY ロゴ（白）または VAWS（白）を中央〜左上配置
- アーティスト写真を前面合成（境界線・シャドウなし）

### "NEW" バッジ

```css
color: #ff6c00;       /* アクセントオレンジ */
font-style: italic;
```

---

## 写真・映像スタイル

### アーティスト写真

- **照明：** 強いスポットライト、深い影、カラーゲル（赤・橙・青）
- **背景：** ほぼ無地または単色。テクスチャなし
- **コントラスト：** 高コントラスト。ハイライトが白飛び寸前
- **合成：** 背景への自然なエッジ処理、ドロップシャドウ不使用

### サムネイル

- S3 ホスト（`s3-aop.plusmember.jp`）から動的配信
- `dummy.gif` でプレースホルダー、画像ロード後に差し替え
- 未ロード状態は `background-color: #eeeeee` で表示

### 映像

- YouTube チャンネル連携（`youtube.com/channel/UC1FQWQ3y3-e8l1pCtWhJt5A`）
- サムネイルは 16:9

---

## ロゴ使用ルール

### VAUNDY ワードマーク

- `logo.svg` を使用。黒背景では `fill="#FFFFFF"` を付与、明背景ではデフォルト（黒）
- 拡大縮小は SVG のまま。ラスタライズ不可
- クリアスペース：ロゴ高さの 1/4 以上を四方に確保

### VAWS ロゴ

- ファンクラブ文脈のみで使用
- `main_title.svg`（白塗り）または `logo_fc.svg` を使用
- 黒背景での白ロゴが基本運用

---

## Do と Don't

### Do
- VAUNDY・VAWS ロゴは SVG のまま使用する
- UI の色設計は `#121212` × `#FFFFFF` × `#eeeeee` グレー系のみで行う
- ボタン・カードの角は `border-radius: 0`（シャープコーナー）を基本とする
- 入力欄のみ `border-radius: 2px` を使用する
- フォームのボーダーは `1px solid #121212` で統一する
- キャンペーン素材は「1 色の飽和カラーで背景を全面塗り」してよい
- アーティスト写真は背景に溶け込むように合成し、枠線・シャドウを付けない

### Don't
- CSS カスタムプロパティ（`--変数`）はこのサイトでは使用されていない。新規開発で追加するなら一貫して整備すること
- キャンペーンカラー（赤・橙・黄・青）を UI コンポーネントに転用しない
- `accent-orange: #ff6c00` は "NEW" バッジ専用。ボタンやリンクには使用しない
- ロゴに装飾（グロー・シャドウ・グラデーション）を加えない
- ロゴをフォントで再現しない
- `border-radius` を大きく取らない（`15px` 以上はピル・バッジ形状のみ許容）
- 写真にグラデーションオーバーレイでテキスト可読性を確保しようとしない（レイアウトで解決する）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "vaundy",
    "name": "Vaundy / VAWS Members",
    "url": "https://member.vaundy.jp/",
    "description": "日本のシンガーソングライター Vaundy の公式ファンクラブ「Vaundy ART Work Studio Members (VAWS)」のビジュアルアイデンティティ。#121212 × 白を基盤としたミニマル UI に、バッジ系のオレンジ (#ff6c00) と、ツアー/キャンペーンごとに入れ替わる飽和した単色アクセント (赤 / 橙 / 黄 / シアン / ゴールド) を重ねる劇場的デザインシステム。写真・映像・ツアービジュアルが色彩の主役を担い、サイト UI 自体は完全モノクロームに徹する『劇場の額縁』的役割。VAUNDY ワードマークは有機的な筆致のカスタムレタリング SVG で代替不可。CSS カスタムプロパティ (--変数) は意図的に使用せず、ボタン・カードは radius 0 のシャープコーナー、入力欄のみ radius 2px と例外的な差異を持つ。",
    "category": "music",
    "tags": [
      "music",
      "monochrome",
      "minimal",
      "single-accent",
      "consumer"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://member.vaundy.jp/",
    "https://member.vaundy.jp/static/original/fanclub/css/style.css",
    "https://vaundy.jp/",
    "https://member.vaundy.jp/static/vaundy/fanclub/home/main_title.svg",
    "https://member.vaundy.jp/static/vaundy/fanclub/home/mv_mask.svg",
    "https://vaundy.jp/static/vaundy/official/logo.svg",
    "https://vaundy.jp/static/vaundy/official/logo_fc.svg",
    "https://s3-aop.plusmember.jp/prod/public/vaundy/contents/banner/ (複数バナー画像)"
  ],
  "extractedAt": "2026-05-18",
  "notes": [
    "直接証拠: 全カラー・タイポ・コンポーネントスタイルは style.css を直接取得して観測。",
    "直接証拠: html { font-size: 62.5% } → 1rem = 10px 換算 (style.css 由来)。",
    "直接証拠: ブレイクポイント 961px は CSS で確認。",
    "重要: CSS カスタムプロパティ (--変数) は不使用。新規開発で追加するなら一貫整備が必要。",
    "重要: VAUNDY ワードマークは完全カスタムレタリング SVG で代替不可。",
    "重要: キャンペーンカラー (赤 / 橙 / 黄 / シアン / ゴールド) はツアーポスター・バナー画像のみで使用、site CSS には含まれない。",
    "重要: 見出し用コンデンストフォント (Bebas Neue 相当) はキャンペーン画像 (Photoshop 制作) で使用、サイト CSS には存在しない。Noto Sans JP が UI 全域で使われる。",
    "重要: accent-orange (#ff6c00) は『NEW バッジ専用』、ボタンやリンクには転用しない。",
    "重要: ボタン・カードは border-radius: 0 (シャープコーナー)、入力欄のみ border-radius: 2px と例外的に差異あり。",
    "推論: キャンペーンカラーの hex 値はバナー画像のピクセル観測からの近似値 (red-deep #7A1010、orange-vivid #E85500、yellow-vivid #F5E000、cyan-vivid #00C8E8、gold-warm #C8A870)。"
  ],
  "colors": {
    "groups": [
      {
        "label": "UI Neutrals (Base)",
        "tokens": [
          {
            "name": "Black",
            "value": "#121212",
            "token": "--color-black",
            "role": "プライマリテキスト・ボタン背景・ボーダー・SVG fill (純黒 #000 ではなく僅かに浮いた #121212)"
          },
          {
            "name": "White",
            "value": "#FFFFFF",
            "token": "--color-white",
            "role": "ページ背景・カード背景・黒背景上のテキスト"
          },
          {
            "name": "Gray Border",
            "value": "#eeeeee",
            "token": "--color-gray-border",
            "role": "カードの figure ボーダー・画像プレースホルダー背景・区切り線"
          },
          {
            "name": "Gray BG Hover",
            "value": "#dcdcdc",
            "token": "--color-gray-bg-hover",
            "role": "ホバー背景・無効状態"
          },
          {
            "name": "Gray Mid",
            "value": "#7F7F7F",
            "token": "--color-gray-mid",
            "role": "セカンダリテキスト・more ボタンの stroke"
          },
          {
            "name": "Gray Muted",
            "value": "#bbbbbb",
            "token": "--color-gray-muted",
            "role": "淡色テキスト"
          }
        ]
      },
      {
        "label": "UI Accent",
        "tokens": [
          {
            "name": "Accent Orange",
            "value": "#ff6c00",
            "token": "--color-accent-orange",
            "role": "NEW バッジ専用・一部ハイライト。ボタン/リンクには転用しない"
          },
          {
            "name": "Error Red",
            "value": "#FF4343",
            "token": "--color-error-red",
            "role": "エラーテキスト・アラートリンク・エラー背景アイコン"
          },
          {
            "name": "Error BG",
            "value": "#ffdada",
            "token": "--color-error-bg",
            "role": "エラーフォーム背景"
          },
          {
            "name": "Error BG Light",
            "value": "#ffdcc6",
            "token": "--color-error-bg-light",
            "role": "エラー背景バリエーション"
          },
          {
            "name": "Tab Active",
            "value": "#d2dd34",
            "token": "--color-tab-active",
            "role": "タブアクティブ状態のボーダー (黄緑、唯一の彩色アクセント)"
          }
        ]
      },
      {
        "label": "Campaign Accents (Image Only)",
        "tokens": [
          {
            "name": "Red Deep",
            "value": "#7A1010",
            "token": "--campaign-red-deep",
            "role": "Asia Arena Tour 2026 HORO / Japan Arena Tour 2027-2028 背景。site CSS には存在しない"
          },
          {
            "name": "Orange Vivid",
            "value": "#E85500",
            "token": "--campaign-orange-vivid",
            "role": "Dome Tour 2026 SILENCE 背景"
          },
          {
            "name": "Yellow Vivid",
            "value": "#F5E000",
            "token": "--campaign-yellow-vivid",
            "role": "SILENCE ロゴ・テキスト"
          },
          {
            "name": "Cyan Vivid",
            "value": "#00C8E8",
            "token": "--campaign-cyan-vivid",
            "role": "Japan Arena Tour ロゴ・テキスト"
          },
          {
            "name": "Gold Warm",
            "value": "#C8A870",
            "token": "--campaign-gold-warm",
            "role": "HORO ロゴ・テキスト"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "'Noto Sans JP', 'Segoe UI', '游ゴシック体', YuGothic, 'Yu Gothic Medium', BlinkMacSystemFont, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif",
        "weights": [
          300,
          400,
          500,
          700
        ],
        "role": "primary",
        "notes": "日本語・英語本文全般。Google Fonts から読み込み (wght@300;400;500;700)。UI 全域で使用"
      },
      {
        "family": "Open Sans",
        "stack": "'Open Sans', sans-serif",
        "weights": [
          500,
          700
        ],
        "role": "display",
        "notes": "英語サブテキスト用途で部分使用。Google Fonts から読み込み"
      },
      {
        "family": "Shadows Into Light",
        "stack": "'Shadows Into Light', cursive",
        "weights": [
          400
        ],
        "role": "display",
        "notes": "手書き風装飾テキスト、限定的な用途のみ。Google Fonts から読み込み"
      },
      {
        "family": "Font Awesome",
        "stack": "'Font Awesome', sans-serif",
        "weights": [
          400
        ],
        "role": "icon",
        "notes": "UI アイコン全般。cmn-assets.plusmember.jp 経由で読み込み (all.min.css)"
      },
      {
        "family": "Monospace",
        "stack": "monospace, monospace",
        "weights": [
          400
        ],
        "role": "mono",
        "notes": "コード・等幅表示用 (限定使用)"
      }
    ],
    "scale": [
      {
        "role": "hero-display",
        "size": "min(8vw, 94px)",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "ヒーロー大表示 (ビューポート連動の流体タイポ)"
      },
      {
        "role": "hero-sub",
        "size": "min(6vw, 42px)",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "ヒーローサブ表示"
      },
      {
        "role": "heading-large",
        "size": "40px",
        "weight": 700,
        "lineHeight": 1.4,
        "note": "大見出し (4rem)"
      },
      {
        "role": "heading",
        "size": "22px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "セクション見出し (2.2rem)"
      },
      {
        "role": "heading-sm",
        "size": "20px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "見出し (2rem)"
      },
      {
        "role": "sub-heading",
        "size": "18px",
        "weight": 500,
        "lineHeight": 1.6,
        "note": "サブ見出し (1.8rem)"
      },
      {
        "role": "sub-heading-sm",
        "size": "16px",
        "weight": 500,
        "lineHeight": 1.6,
        "note": "サブ見出し小 (1.6rem)"
      },
      {
        "role": "body",
        "size": "15px",
        "weight": 400,
        "lineHeight": 1.8,
        "note": "本文ベースライン (1.5rem)。line-height 1.8 が支配的"
      },
      {
        "role": "label / button",
        "size": "13px",
        "weight": 400,
        "lineHeight": 1.4,
        "note": "ボタン・ラベル (1.3rem)"
      },
      {
        "role": "caption",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.4,
        "note": "キャプション・小テキスト (1.2rem)"
      }
    ],
    "japanese": {
      "fontStack": "'Noto Sans JP', 'Segoe UI', '游ゴシック体', YuGothic, 'Yu Gothic Medium', BlinkMacSystemFont, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif",
      "lineHeight": 1.8,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "Noto Sans JP を第一言語、游ゴシック・ヒラギノ角ゴ ProN にフォールバックする伝統的なシステムスタック",
        "ウェイトは 300 / 400 / 500 / 700 の 4 段階",
        "本文 line-height は 1.8 (180%) 採用、日本語の可読性を優先",
        "入力欄のみ letter-spacing: 0.05em (本文は 0)",
        "VAUNDY / VAWS ワードマークはフォント代替不可、SVG として使用"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "xs",
        "value": "8px",
        "role": "最小余白"
      },
      {
        "name": "sm",
        "value": "16px",
        "role": "カードギャップ最小値"
      },
      {
        "name": "md",
        "value": "24px",
        "role": "カードギャップ最大値・標準余白"
      },
      {
        "name": "lg",
        "value": "40px",
        "role": "ハンバーガーボタン位置 (top/right: 40px)"
      },
      {
        "name": "xl",
        "value": "64px",
        "role": "セクション余白最小値"
      },
      {
        "name": "2xl",
        "value": "96px",
        "role": "セクション余白最大値"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "< 961px",
      "role": "モバイル (カード折り返しレイアウト)"
    },
    "desktop": {
      "value": "≥ 961px",
      "role": "デスクトップ (3 カラムグリッド)"
    }
  },
  "radius": {
    "none": "0",
    "input": "2px",
    "soft": "5px",
    "pill": "50px",
    "circle": "50%"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "黒背景・白文字のメイン CTA。シャープコーナー (radius 0) が特徴",
      "variants": [
        {
          "label": "Default",
          "props": {
            "selector": ".btn--main",
            "background": "#121212",
            "color": "#FFFFFF",
            "borderRadius": "0",
            "padding": "1em",
            "fontSize": "13px",
            "fontStyle": "normal",
            "textDecoration": "none",
            "textAlign": "center"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button",
      "description": "透明背景 + 黒 1px ボーダーのセカンダリ。シャープコーナー (radius 0)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "selector": ".btn--sub",
            "background": "transparent",
            "color": "#121212",
            "border": "1px solid #121212",
            "borderRadius": "0",
            "padding": "1em",
            "fontSize": "13px"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Form Input",
      "description": "透明背景 + 黒 1px ボーダーの入力欄。サイト内で radius 2px は唯一の例外",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#121212",
            "border": "1px solid #121212",
            "borderRadius": "2px",
            "padding": "0.5em",
            "fontSize": "15px",
            "lineHeight": "1.8",
            "letterSpacing": "0.05em",
            "width": "100%"
          }
        },
        {
          "label": "Error",
          "props": {
            "background": "#ffdada",
            "color": "#FF4343",
            "border": "1px solid #FF4343",
            "borderRadius": "2px"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Content Card",
      "description": "白背景の News / Photos / Movies / Talk カード。シャープコーナー (radius 0)、figure に薄グレーボーダー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "selector": ".list--contents li",
            "background": "#FFFFFF",
            "borderRadius": "0",
            "figureBorder": "1px solid #eeeeee",
            "imageBackground": "#eeeeee",
            "imageTransition": "0.4s"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Header (Absolute)",
      "description": "スクロールで流れる絶対配置ヘッダー。z-index 101",
      "variants": [
        {
          "label": "Default",
          "props": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "width": "100%",
            "zIndex": "101"
          }
        }
      ]
    },
    {
      "type": "drawer",
      "name": "Drawer Menu (Fullscreen)",
      "description": "フルスクリーン展開のドロワーメニュー。半透明黒背景でコンテンツを覆う",
      "variants": [
        {
          "label": "Closed",
          "props": {
            "position": "fixed",
            "width": "100%",
            "height": "100%",
            "background": "rgba(0, 0, 0, 0.9)",
            "opacity": "0",
            "transition": "opacity 0.4s cubic-bezier(0.16, 0.68, 0.65, 1.03)"
          }
        },
        {
          "label": "Open",
          "props": {
            "position": "fixed",
            "width": "100%",
            "height": "100%",
            "background": "rgba(0, 0, 0, 0.9)",
            "opacity": "1"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Hamburger Button",
      "description": "ドロワー開閉用の正方形ボタン。固定配置、最上位レイヤー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "width": "50px",
            "height": "50px",
            "position": "fixed",
            "top": "40px",
            "right": "40px",
            "zIndex": "9999"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "NEW Badge",
      "description": "アクセントオレンジのイタリック NEW ラベル。唯一の彩色 UI 要素",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#ff6c00",
            "fontStyle": "italic",
            "fontSize": "13px",
            "fontWeight": "500"
          }
        }
      ]
    },
    {
      "type": "overlay",
      "name": "Members Only Overlay",
      "description": "会員限定コンテンツのブラー + 半透明マスク。VAWS MEMBERS ONLY テキストオーバーレイ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "filter": "blur(20px)",
            "background": "rgba(255, 255, 255, 0.3)",
            "color": "#121212",
            "textAlign": "center"
          }
        }
      ]
    },
    {
      "type": "banner",
      "name": "Campaign / Promotion Banner",
      "description": "16:9 または 2.35:1 のキャンペーン全面塗りバナー。グラデーション禁止・単色背景・VAUNDY または VAWS ロゴ (白) を中央〜左上に配置",
      "variants": [
        {
          "label": "Aspect 16:9",
          "props": {
            "aspectRatio": "16 / 9",
            "background": "campaign color (e.g. #7A1010)",
            "logoColor": "#FFFFFF",
            "logoPosition": "center / top-left",
            "border": "none",
            "boxShadow": "none"
          }
        },
        {
          "label": "Aspect Cinema (2.35:1)",
          "props": {
            "aspectRatio": "2.35 / 1",
            "background": "campaign color (e.g. #E85500)",
            "logoColor": "#FFFFFF",
            "logoPosition": "center / top-left"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "VAUNDY・VAWS ロゴは SVG のまま使用する (ラスタライズ不可)",
      "UI の色設計は #121212 × #FFFFFF × #eeeeee グレー系のみで行う",
      "ボタン・カードの角は border-radius: 0 (シャープコーナー) を基本とする",
      "入力欄のみ border-radius: 2px を使用する (唯一の例外)",
      "フォームのボーダーは 1px solid #121212 で統一する",
      "キャンペーン素材は『1 色の飽和カラーで背景を全面塗り』してよい",
      "アーティスト写真は背景に溶け込むように合成し、枠線・シャドウを付けない",
      "Noto Sans JP の line-height は 1.8 を基本にする",
      "ロゴのクリアスペースはロゴ高さの 1/4 以上を四方に確保する",
      "黒背景ではロゴに fill=#FFFFFF を付与、明背景ではデフォルト (黒) を使用"
    ],
    "dont": [
      "CSS カスタムプロパティ (--変数) は現状未使用。新規追加するなら一貫整備すること",
      "キャンペーンカラー (赤・橙・黄・シアン・ゴールド) を UI コンポーネントに転用しない",
      "accent-orange (#ff6c00) を NEW バッジ以外のボタン・リンクに使用しない",
      "ロゴに装飾 (グロー・シャドウ・グラデーション) を加えない",
      "ロゴをフォントで再現しない (カスタムレタリングのみ)",
      "border-radius を 15px 以上にしない (ピル・バッジ形状のみ許容)",
      "写真にグラデーションオーバーレイでテキスト可読性を確保しようとしない (レイアウトで解決する)",
      "ボタン・カードを border-radius 0 以外で作らない",
      "見出し用コンデンストフォント (Bebas Neue 等) を CSS で読み込まない (キャンペーン画像専用)"
    ]
  }
}