角川武蔵野ミュージアム（Kadokawa Culture Museum） DESIGN.md

角川武蔵野ミュージアム（https://kadcul.com/）のデザイン仕様書。 2020 年開館。隈研吾設計の巨大な花崗岩の塊の中に、図書館・美術館・博物館が同居する複合文化施設。 最大の特徴は セクション見出しを writing-mode: vertical-rl の縦組みで組むこと。「企画展／イベント／ライブラリー」「ニュース」「本棚劇場」が縦に立ち、letter-spacing: 0.2em で開く。日本語サイトで縦組み見出しを主構造に据えた数少ない例。 色は 墨 #231815 と 山吹 #ffcc00 の 2 色。#231815 は印刷業界の「スミ」（リッチブラック）で、純黒より赤みのある温かい黒。KADOKAWA という出版社の出自が色に出ている。 枠線はすべて 3px。1px の細い罫を使わず、版画のような太い輪郭で要素を囲む。 box-shadow は実測 0 件。 実サイトの computed style 実測（2026-08-12 取得。トップ＋「イベント」ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地に、墨の太い輪郭と縦組みの見出し。装飾を持たず、線の太さ（3px）と文字の向き（縦組み）だけで日本的な佇まいを作る
• 角川武蔵野ミュージアムについて: 図書館・美術館・博物館が 1 棟に同居する「ミュージアム」。扱うコンテンツの幅が極端に広い（ラノベ・マンガ・現代アート・古典籍）ため、UI 側は徹底して中立に保ち、展示のビジュアルに色を任せる
• 密度: 中〜高密度。トップは KV カルーセル → 重要なお知らせ（墨帯）→ トピックス（灰帯）→ 企画展／イベント／ライブラリー（クリーム地）→ フロアガイド の縦積み。帯の色でセクションを切る
• キーワード: 白地、墨 #231815、山吹 #ffcc00、縦組み見出し、letter-spacing: 0.2em、3px の枠線、影なし、Noto Sans JP
• 特徴:
  • セクション見出しが縦組み（writing-mode: vertical-rl）。28px / weight 700 / letter-spacing: 5.6px = 0.2em。コンテンツ列の左に縦に立てる
  • フロアガイドの小見出しも縦組み（20px / weight 700 / letter-spacing: 4px = 0.2em）。「本棚劇場」「エディットタウン」「マンガ・ラノベ図書館」
  • 墨 #231815 は純黒ではない。rgb(35,24,21) の赤みを帯びた黒で、印刷の「スミ」に由来する。純黒 #000000 は本文にしか使わない
  • 枠線はすべて 3px solid。ボタン・アウトライン・チケット CTA。1px の罫を使わない
  • 主 CTA は山吹 #ffcc00 の pill ＋ 墨の 3px 枠。ページ内で唯一の高彩度で、「チケットを買う」だけがこの色
  • 主 CTA 以外のボタンは border-radius: 0。pill は「チケット」専用の形
  • カテゴリバッジは矩形（radius 0）の小さな色面。企画展＝紫 #905ed3、ライブラリー＝緑 #4abf23、イベント＝シアン #38b9e1、開催中＝墨、開催予定＝温灰 #766965
  • font-weight: 100（Thin）が使われる。「蔵書／収蔵品 検索」と日付表示。日本語サイトで Thin を実運用する珍しい例
  • box-shadow は実測 0 件。奥行きは帯の面色と 3px の枠だけ
  • palt を掛けない（font-feature-settings: normal）

2. Color Palette & Roles

実測値。地は純白 #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 body）。墨と山吹の 2 色が骨格で、そこにカテゴリ識別用の高彩度が 4 色加わる。

Brand（ブランド）

• Sumi (#231815, rgb 35,24,21): 主色。テキスト、枠線、帯、バッジ、検索ボタンの面。印刷の「スミ」に由来する赤みのある黒。純黒 #000000 より温かい

  出版社の色。CMYK のリッチブラックを RGB に落とした値で、KADOKAWA グループの紙媒体と地続きの色を Web 上でも使っている

• Yamabuki (#ffcc00, rgb 255,204,0): 唯一の高彩度アクセント。「チケット購入はこちら」「チケット」の面。この色は購買導線だけに使う
• Cream (#f7f3de, rgb 247,243,222): 「企画展／イベント／ライブラリー」セクションの地。紙の色に寄せた温かい白
• Black (#000000): 本文テキストの色。枠や面には使わない（面は必ず #231815）

Category（カテゴリ識別色）

• Purple (#905ed3, rgb 144,94,211): 企画展バッジ
• Green (#4abf23, rgb 74,191,35): ライブラリーバッジ
• Cyan (#38b9e1, rgb 56,185,225): イベントバッジ
• Warm Gray (#766965, rgb 118,105,101): 開催予定バッジ。墨 #231815 の彩度を落とした同系色で、「まだ始まっていない」を弱さで示す
• Sumi (#231815): 開催中バッジ。現在進行中のものだけ主色を使う

カテゴリの 3 色（紫・緑・シアン）は互いに補色関係を作らない配置。彩度は高いが、いずれも 12px の小さなバッジにしか現れないため画面を支配しない。

Neutral（面・罫）

• Background (#ffffff): ページ地色。純白
• Surface (#e9e9e9, rgb 233,233,233): トピックス帯、言語切替メニューの面
• Ink Muted (#939393, rgb 147,147,147): 写真クレジット（「写真：新津保建秀」）
• Scrim (rgba(0,0,0,0.8) ＋ repeating-linear-gradient(-45deg, rgba(0,0,0,0.2) 0 7.5px, transparent 0 15px)): モーダルのオーバーレイ。単なる黒の半透明ではなく、45° のハッチングを重ねる。このサイト固有の処理

Semantic（意味的な色）

サイト上に明示的なエラー色・成功色は現れない。実装時は以下を目安にする。

• Danger／Error: #c0392b 目安。山吹 #ffcc00 と隣接させない（購買導線と紛れる）
• Warning: #ffcc00 を流用しない。山吹はチケット専用に温存し、警告には #d98c00 程度の一段沈んだ橙を当てる
• Success: #4abf23（既存の Green）を流用する
• 非活性: 面 #e9e9e9 ／ 文字 #939393 ／ 枠 3px solid #939393

3. Typography Rules

縦組みの見出しと letter-spacing: 0.2em がこのサイトの核。書体は Noto Sans JP 単独で、ウェイトは 100 / 400 / 700 の 3 段（Thin を実運用する）。

3.1 和文フォント

• 全要素共通: Noto Sans JP（Google Fonts）。Adobe Fonts に依存しないため、preview.html でも実サイトと同じ書体が出る
• ウェイト: 100（Thin）/ 400（本文）/ 700（見出し・ボタン） の 3 段
  • 100 は「蔵書／収蔵品 検索」と日付表示にだけ当てる。日本語で Thin を実用する珍しい設計で、墨地の上に白い細字を置くコントラストが効いている
• フォールバック: メイリオ → Meiryo → "ヒラギノ角ゴ ProN W3" → "Hiragino Kaku Gothic ProN" → 游ゴシック → YuGothic → sans-serif
• メイリオを最優先のフォールバックに置く（ヒラギノ・游ゴシックより先）。Windows 環境での可読性を最優先した順序
• フォールバック側に Thin（100）を持つ書体が無い。メイリオ・ヒラギノ・游ゴシックいずれも最軽量は Regular なので、Noto Sans JP の 100 を必ず読み込むこと。落ちると Thin の箇所が Regular になり印象が変わる

3.2 欧文フォント

• 欧文専用の書体を持たない。「Kadokawa Culture Museum」もロゴ画像で、本文中の英数字は Noto Sans JP の字形で出る
• 例外はカルーセルの操作ボタン（Previous / Next / language）のみで、そこだけ Arial が当たる。自社の設計には持ち込まない
• 等幅フォントは使わない
• preview.html での注記: Noto Sans JP は Google Fonts から取得できるため、代替フォントを立てる必要がない。実サイトと同じ書体で確認できる（ウェイト 100 / 400 / 700 の 3 つを読み込むこと）

3.3 font-family 指定

css/* 全要素共通 */
font-family: "Noto Sans JP", メイリオ, Meiryo,
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             游ゴシック, YuGothic, sans-serif;

/* body の既定 */
font-size: 16px;
font-weight: 400;
line-height: 1.5;              /* 24px */
letter-spacing: 0.02em;        /* 0.32px */
color: #000000;
font-feature-settings: normal; /* palt は使わない */

フォールバックの考え方:

• 和文を先頭に置く。欧文専用書体で先取りしない
• メイリオをヒラギノより先に置く。Windows 環境を優先した順序（ヌーラボと同じ方針だが、こちらはより徹底している）
• 要素ごとに font-family を切り替えない。1 スタックで通す
• Noto Sans JP の 100 / 400 / 700 の 3 ウェイトを必ず読み込む。フォールバック側に Thin が無いため、100 が落ちると設計が崩れる

3.4 文字サイズ・ウェイト階層

• letter-spacing は 2 系統: 通常は 0.32px の px 固定（16px で 0.02em）、縦組み見出しだけ 0.2em（28px → 5.6px / 20px → 4px）
• 縦組みの 0.2em は em 指定で、サイズが変わっても比率が保たれる。横組みの 0.32px とは指定方法自体が違う
• line-height は全要素 1.5。見出しも本文もバッジも同じ
• ウェイトは 100 / 400 / 700 の 3 段。500 と 600 を使わない
• 文字サイズは 28 / 20 / 16 / 14 / 12 / 10 の 6 段。24px や 18px を作らない

3.5 行間・字間

• 本文の行間 (line-height): 1.5（16px → 24px）。全要素 1.5 で通す
• 字間 (letter-spacing):
  • 横組み: 0.32px の px 固定（body から継承）。16px で 0.02em、28px で 0.011em、12px で 0.027em
  • 縦組みの見出し: 0.2em（28px → 5.6px / 20px → 4px）。横組みの 10〜18 倍に開く
• 縦組みだけ字間を極端に開くのがこのサイトの手癖。縦に並んだ文字を「一文字ずつ読ませる」ためのリズムで、横組みの詰まった字間との対比が効いている
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 横組みの字間は 0.32px の px 固定を body に置き、要素ごとに上書きしない
• 縦組みの見出しには必ず 0.2em を当てる。px ではなく em で指定し、サイズが変わっても比率を保つ
• 横組みの文章に 0.2em を当てない。0.2em は縦組み見出し専用
• 行間 1.5 を全要素で守る
• ウェイトは 100 / 400 / 700 の 3 段だけ。500 や 600 を挟まない
• Thin（100）を当てるのは「墨地の上の白い細字」と「日付」だけ。白地の上の黒文字に 100 を使わない（読めなくなる）

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 展覧会名は極端に長く、記号を含む（「銀河鉄道999 THE GALAXY EXPERIENCE　あの旅は、まだ続いている。」）。欧文の連なり（THE GALAXY EXPERIENCE）を内部で折らない

• 「／」区切りの見出しは、スラッシュの後で折る（「企画展／イベント／ライブラリー」→ 縦組みでは「企画展／イベント」「／ライブラリー」の 2 列）

• 「エディットタウン」「マンガ・ラノベ図書館」等のカタカナ語は、中黒 ・ の前で折らない

• 日付（2026.07.14）とタイトルは同じ行に置き、間で折らない

• 縦組みの見出しは折り返し位置を手動で決める（<br> で明示）。自動折り返しに任せると列の高さが揃わない

• ボタンのラベル（「くわしく見る」「一覧へ」）は折り返さない（white-space: nowrap）

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。Noto Sans JP の等幅の字面をそのまま使う
• 縦組みでは特に palt を掛けない。縦組みの letter-spacing: 0.2em は「開く」ための値で、palt の「詰める」方向と衝突する
• 和欧が同じ書体なので 銀河鉄道999 THE GALAXY EXPERIENCE のような混植でも字形が揃う
• 縦組みで英数字を扱う場合は text-combine-upright を使う（下記 3.8）

3.8 縦書き

このサイトの設計の核。セクション見出しとフロアガイドの小見出しが縦組みで、コンテンツ列の左に立つ。

css/* セクション見出し */
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: "Noto Sans JP", メイリオ, Meiryo,
             "ヒラギノ角ゴ ProN W3", 游ゴシック, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.2em;   /* = 5.6px。縦組み専用の広い字間 */
color: #231815;

/* フロアガイドの小見出し */
font-size: 20px;
letter-spacing: 0.2em;   /* = 4px */

• 縦組み見出しは「コンテンツ列の左」に置く。右ではなく左（vertical-rl の書字方向としては行が右から左に進むが、ブロック自体はレイアウトの左端に配置する）
• letter-spacing: 0.2em は em 指定。px で固定しない
• 複数行に割るときは <br> で明示する（「企画展／イベント」「／ライブラリー」）。自動折り返しに任せると列の高さが揃わない
• 縦組み中の英数字・年号は text-combine-upright: all で 2 桁までを縦中横にする
• 本文は縦組みにしない。縦組みは見出しだけの記号として温存する
• バッジ・ボタンを縦組みブロックの中に入れない（横長の要素が縦の行を割る）

4. Component Stylings

Buttons

Ticket CTA（山吹の pill） — このサイトを象徴する形

• Background: #ffcc00（山吹）
• Text: #231815（墨）
• Border: 3px solid #231815
• Padding: 0 16px（ヘッダー内）／ 16px（ナビ内）
• Border Radius: 50px — サイト内で pill はこれだけ
• Font: 12〜16px / weight 700 / lh 1.5 / ls 0.32px
• 例: 「チケット購入はこちら」「チケット」
• 購買導線だけがこの色・この形。他の CTA に山吹や pill を使わない

Filled Button（墨）

• Background: #231815
• Text: #ffffff
• Border: 3px solid #231815
• Padding: 6px 15px
• Border Radius: 0px
• Font: 14px / weight 700
• 例: 「特設ページはこちら」
• 検索ボタン（「蔵書／収蔵品 検索」）は同じ面色で weight 100（Thin）/ 12px / padding 0 16px

Outline Button（墨の 3px 枠）

• Background: transparent
• Text: #231815
• Border: 3px solid #231815
• Padding: 6px 20px（小）／ 6px 15px（中）
• Border Radius: 0px
• Font: 12〜14px / weight 700
• 例: 「続きを読む」「一覧へ」「くわしく見る」「一覧」
• 左に › のシェブロンを置く
• 枠は必ず 3px。1px にしない

Carousel Control

• Background: #231815
• Border Radius: 50%
• Padding: 1px 6px
• 例: Previous / Next（KV カルーセル）

Badges

Category Badge（矩形の小さな色面）

• Background: #905ed3（企画展）／ #4abf23（ライブラリー）／ #38b9e1（イベント）／ #231815（開催中）／ #766965（開催予定）
• Text: #ffffff
• Border: なし
• Padding: 2px 5px（極端に小さい）
• Border Radius: 0px
• Font: 12px / weight 400 / lh 1.5 / ls 0.32px
• バッジは pill にしない。pill はチケット専用の形
• 状態（開催中／開催予定）と分類（企画展／イベント／ライブラリー）を同じ形で並べる。色だけで区別する
• weight は 400（ボタンの 700 と分ける）。バッジは「読ませる」ものであって「押させる」ものではない

Bands（セクション帯）

Important Band（重要なお知らせ）

• Background: #231815（墨）
• Text: #ffffff
• 日付: 12px / weight 100（Thin）
• 見出し: 16px / weight 400
• 右端に「一覧」のアウトラインボタン（枠は 3px solid #ffffff に反転）
• ページ最上部に置く全幅の帯。白地との明度差で最優先の情報だと伝える

Topics Band（トピックス）

• Background: #e9e9e9
• Text: #000000
• 見出しラベル: 16px / weight 700 / #231815
• 墨帯のすぐ下に置く。濃 → 淡 の 2 段で優先度を示す

Content Band（企画展／イベント／ライブラリー）

• Background: #f7f3de（クリーム）
• 左端に縦組みの見出し（28px / weight 700 / ls 0.2em / #231815）
• 右にカードの横スクロール列

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 0px
• Shadow: なし（実測 0 件）
• 構成: サムネイル（展覧会ポスター）→ バッジ 2 つ（状態 ＋ 分類）→ タイトル（16px / weight 700）→ 期間・場所（12px）
• カードは矩形・影なし・枠なし。展覧会ポスターの矩形がそのままカードの輪郭になる
• ポスターに色を任せる。カードの UI 側は色を持たない

Modal Scrim（オーバーレイ）

このサイト固有の処理。単なる黒の半透明ではない。

cssbackground-color: rgba(0, 0, 0, 0.8);
background-image: repeating-linear-gradient(
  -45deg,
  rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7.5px,
  rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px
);

• rgba(0,0,0,0.8) の上に 45° のハッチング（7.5px の線 / 15px の周期）を重ねる
• 版画やスクリーントーンを思わせる質感で、「印刷物」としての出自を UI の質感に持ち込んでいる
• 背景の写真が透けて見えつつ、ハッチングが均一なテクスチャを与える

Inputs

サイト上に独立した入力欄は現れない（検索は別ドメインの蔵書検索システムへ遷移する）。実装時は以下に揃える。

• Background: #ffffff
• Border: 3px solid #231815（このサイトの枠は必ず 3px）
• Border (focus): 3px solid #ffcc00（山吹）
• Border Radius: 0px
• Padding: 10px 14px
• Font: 16px / weight 400 / ls 0.32px
• Text Color: #000000 / Placeholder: #939393

5. Layout Principles

Spacing Scale

Container

• Max Width: 1240px（サイト全体の標準コンテナ）
• サブコンテナ: 1200px
• 読み物カラム: 800px
• Padding (horizontal): 24〜48px
• KV カルーセルは全幅ブリード（左右の隣スライドが見切れる）
• 帯（重要なお知らせ・トピックス）は全幅、中身は 1240px に収める
• ヘッダーは全幅・白地・不透過。2 段構成（上段＝ユーティリティ ＋ チケット CTA、下段＝グローバルナビ）

Grid

• Columns: 展覧会カードは 4 カラムの横スクロール列、フロアガイドは 2 カラム、フッターは 4 カラム
• Gutter: 24px
• セクションの区切りは帯の面色で作る: 白 → 墨 #231815 → #e9e9e9 → 白 → クリーム #f7f3de
• 縦組み見出しはコンテンツ列の左に置き、幅 80〜120px の縦帯として確保する
• カードの列は横スクロール（折り返さない）。左右に ‹ › のシェブロンを置く

6. Depth & Elevation

実測の box-shadow は 0 件。このサイトは影を一切使わない。

• 奥行きは 帯の面色（#ffffff → #231815 → #e9e9e9 → #f7f3de）と 3px の枠だけで表現する
• 落ち影・浮き上がりを作らない。カードもボタンも完全にフラット
• 「浮かせる」代わりに「囲む」。3px の太い枠が影の役割を代替している
• モーダルのスクリムは必ず 45° のハッチングとセットで使う（rgba(0,0,0,0.8) 単独にしない）

7. Do's and Don'ts

Do（推奨）

• セクション見出しを writing-mode: vertical-rl の縦組みで組む。28px / weight 700 / letter-spacing: 0.2em
• **縦組みの字間は em 指定（0.2em）**にする。px で固定しない
• 縦組みの折り返しは <br> で明示する（自動折り返しに任せない）
• 墨は #231815（赤みのある黒）を使う。純黒 #000000 は本文テキストにだけ当て、面や枠には使わない
• 枠線はすべて 3px solid にする。1px の細い罫を使わない
• 山吹 #ffcc00 はチケット購入導線だけに使い、border-radius: 50px の pill にする
• チケット以外のボタンは border-radius: 0 にする。pill をチケット専用の形として温存する
• カテゴリバッジは矩形（radius 0）・padding 2px 5px・12px / weight 400。状態と分類を同じ形で並べ、色だけで区別する
• ウェイトは 100 / 400 / 700 の 3 段で通す
• Thin（100）は「墨地の上の白い細字」と「日付」だけに当てる
• line-height は全要素 1.5、横組みの letter-spacing は 0.32px の px 固定を body に置く
• セクションは帯の面色で切る（白 → #231815 → #e9e9e9 → 白 → #f7f3de）
• 展覧会ポスターに色を任せ、カードの UI 側は色を持たない
• 影を使わない。奥行きは面色と 3px の枠で作る
• モーダルのスクリムは rgba(0,0,0,0.8) ＋ 45° ハッチングのセットで使う
• Noto Sans JP の 100 / 400 / 700 を必ず読み込む（フォールバックに Thin が無い）
• コンテナ幅は 1240px、読み物カラムは 800px

Don't（禁止）

• 横組みの文章に letter-spacing: 0.2em を当てない（0.2em は縦組み見出し専用）
• 本文を縦組みにしない（縦組みは見出しの記号として温存する）
• 縦組みブロックの中にバッジやボタンを入れない（横長の要素が縦の行を割る）
• 面や枠に純黒 #000000 を使わない（必ず墨 #231815）
• 枠線を 1px にしない（すべて 3px）
• チケット以外の CTA に山吹 #ffcc00 を使わない（Warning にも流用しない）
• チケット以外のボタンを pill にしない
• バッジを pill にしない（矩形 radius 0）
• バッジの weight を 700 にしない（バッジは 400、ボタンは 700 で役割を分ける）
• ウェイト 500 / 600 を使わない（100 / 400 / 700 の 3 段）
• 白地の上の黒文字に weight 100 を使わない（読めなくなる。Thin は墨地の白抜きと日付だけ）
• 文字サイズに 24px / 18px を作らない（28 / 20 / 16 / 14 / 12 / 10 の 6 段）
• 行間を要素ごとに変えない（全要素 1.5）
• box-shadow を作らない（実測 0 件）
• カードに枠や角丸を付けない（ポスターの矩形がそのまま輪郭）
• モーダルのスクリムをハッチングなしの単色にしない
• palt を掛けない、字間を詰める方向に動かさない
• カテゴリ色（紫・緑・シアン）を 12px のバッジより大きい面に広げない

8. Responsive Behavior

Breakpoints

縦組みのレスポンシブ

• モバイルでは縦組みを解除する（writing-mode: horizontal-tb）。縦帯の幅 80〜120px を確保できないため
• ただし**letter-spacing: 0.2em は横組みに切り替えても維持する**。見出しの手触りを残す
• タブレット（768px 以上）では縦組みを維持し、幅を 60px に詰める

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。チケット CTA は padding を 12px 24px に広げて高さ 44px を確保する（デスクトップの 0 16px では足りない）
• アウトラインボタンは padding 6px 20px → モバイルで 12px 20px に広げる
• バッジ（padding 2px 5px）はタップ領域にしない。表示専用
• カードはカード全体をタップ領域にする
• カルーセルのシェブロンは当たり判定を 44px に広げる（見た目は小さいまま）

フォントサイズの調整

• 本文 16px は据え置く（14px を下回らない）
• Section Head 28px → モバイルでは 20〜22px。letter-spacing: 0.2em は維持する（横組みに切り替えても）
• Floor Head 20px → 18px。0.2em は維持
• Article Head 20px → 18px
• ボタン 12〜14px は縮めない（タップ領域の高さが崩れる）
• Thin（100）の 12px はモバイルでも 12px を維持する。これ以上小さくすると Thin が判読できない
• 行間 1.5 と横組みの字間 0.32px はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff   （純白）
Sumi:            #231815   （主色。印刷のスミ＝赤みのある黒。面・枠・帯・バッジ）
Yamabuki:        #ffcc00   （唯一の高彩度。チケット購入導線だけ）
Cream:           #f7f3de   （企画展セクションの地。紙の色）
Surface:         #e9e9e9   （トピックス帯・言語切替メニュー）
Black:           #000000   （本文テキストのみ。面や枠には使わない）
Ink Muted:       #939393   （写真クレジット・非活性）
Purple:          #905ed3   （企画展バッジ）
Green:           #4abf23   （ライブラリーバッジ・Success に流用）
Cyan:            #38b9e1   （イベントバッジ）
Warm Gray:       #766965   （開催予定バッジ。墨の彩度を落とした同系色）
Scrim:           rgba(0,0,0,0.8) ＋ repeating-linear-gradient(-45deg,
                 rgba(0,0,0,.2) 0 7.5px, transparent 0 15px)
Font:            "Noto Sans JP", メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3",
                 "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, sans-serif
Body:            16px / weight 400 / lh 1.5 / ls 0.02em (0.32px)
Weight:          100 / 400 / 700 の 3 段（500・600 は使わない）
                 100 は「墨地の上の白い細字」と日付だけ
Size:            28 / 20 / 16 / 14 / 12 / 10 の 6 段（24px・18px を作らない）
Line Height:     全要素 1.5
Letter Spacing:  横組み 0.32px（px 固定・body から継承）／
                 縦組み見出し 0.2em（em 指定）
Writing Mode:    セクション見出しとフロア小見出しは vertical-rl
Feature:         font-feature-settings: normal（palt を使わない）
Radius:          チケット CTA のみ pill 50px / カルーセル操作 50% /
                 それ以外はすべて 0
Border:          すべて 3px solid（1px の罫を使わない）
Shadow:          none（実測 0 件）
Container:       1240px（サブ 1200px、読み物 800px）

プロンプト例

角川武蔵野ミュージアムのデザインシステムに従って、複合文化施設の展示一覧ページを作成してください。
- フォントは "Noto Sans JP", メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, sans-serif の 1 スタックを全要素に当てる。
  Noto Sans JP の 100 / 400 / 700 の 3 ウェイトを必ず読み込む
- セクション見出しは writing-mode: vertical-rl の縦組みで組む。
  28px / weight 700 / line-height 1.5 / letter-spacing 0.2em（em 指定）/ 色 #231815。
  コンテンツ列の左に幅 80〜120px の縦帯として置き、折り返しは <br> で明示する
- 横組みの letter-spacing は 0.32px の px 固定を body に置いて全要素に継承させる。
  0.2em は縦組み見出し専用で、横組みの文章には当てない
- line-height は全要素 1.5。ウェイトは 100 / 400 / 700 の 3 段だけで、500・600 を使わない。
  weight 100（Thin）は墨地の上の白い細字と日付にだけ当てる
- 文字サイズは 28 / 20 / 16 / 14 / 12 / 10 の 6 段から選ぶ（24px・18px を作らない）
- 主色は墨 #231815（印刷のスミ＝赤みのある黒）。面・枠・帯・バッジはすべてこの色で、
  純黒 #000000 は本文テキストにだけ使う
- 枠線はすべて 3px solid にする。1px の細い罫を使わない
- チケット購入 CTA だけが山吹 #ffcc00：背景 #ffcc00 / 文字 #231815 /
  3px solid #231815 / border-radius 50px / 12〜16px weight 700。
  この色とこの pill は購買導線専用で、他の CTA や Warning に流用しない
- チケット以外のボタンは border-radius 0：
  塗り＝背景 #231815 / 白文字 / 3px solid #231815 / padding 6px 15px / 14px weight 700
  アウトライン＝transparent / 文字 #231815 / 3px solid #231815 /
  padding 6px 20px / 12〜14px weight 700、左に › のシェブロン
- カテゴリバッジは矩形（border-radius 0）・padding 2px 5px・12px weight 400・白文字。
  企画展 #905ed3 / ライブラリー #4abf23 / イベント #38b9e1 /
  開催中 #231815 / 開催予定 #766965。状態と分類を同じ形で並べ、色だけで区別する。
  バッジを pill にしない、weight を 700 にしない
- セクションは全幅の帯の面色で切る：白 → 墨 #231815 → #e9e9e9 → 白 → クリーム #f7f3de
- カードは矩形・枠なし・影なし。展覧会ポスターの矩形がそのまま輪郭になり、
  カードの UI 側は色を持たない（色はポスターに任せる）
- box-shadow は一切使わない。奥行きは帯の面色と 3px の枠だけで作る
- モーダルのスクリムは rgba(0,0,0,0.8) に
  repeating-linear-gradient(-45deg, rgba(0,0,0,.2) 0 7.5px, transparent 0 15px) を重ねる。
  単色の半透明にしない
- モバイル（≤767px）では縦組みを横組みに切り替えるが、letter-spacing 0.2em は維持する
- コンテナ幅は最大 1240px、読み物カラムは 800px
- font-feature-settings は normal（palt は掛けない）