大分県立美術館（OPAM） DESIGN.md

大分県立美術館 / Oita Prefectural Art Museum（https://www.opam.jp/）のデザイン仕様書。 2015 年開館。坂茂の設計による、街に開かれた「出会いと五感のミュージアム」。 最大の特徴は、すべてのボタン・バッジ・ステータスを pill（border-radius: 100px）で統一すること。矩形のボタンが 1 つも存在しない。 色は ティール #027e73（操作）と サンド #dbcea5（展覧会）の二軸。**ティールは「押せるもの」、サンドは「展覧会というコンテンツ」**という役割分担が全ページで守られている。 そして letter-spacing: 0.04em と font-weight: 500 が body に掛かる。本文が Regular ではなく Medium で、地の文字がわずかに太い。 実サイトの computed style 実測（2026-08-12 取得。トップ＋「展覧会」ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 明るいグレーの地に、丸い操作系。すべての操作要素が pill で、角のある要素が存在しない。「公共施設の情報の多さ」を、形の統一で整理している
• OPAM について: 「出会いと五感のミュージアム」がコンセプト。開館日カレンダー・展覧会・イベント・教育普及・カフェ・ショップと情報の種類が多く、それをバッジの色で分類し、形（pill）で統一する設計になっている
• 密度: 高密度。トップは KV カルーセル → カレンダー（左に当日情報、右に月間カレンダー）→ 展覧会 → イベント → 施設 と続く。1 画面に複数の情報種別が同時に並ぶため、色による分類が効く
• キーワード: #f6f6f6 の地、ティール #027e73、サンド #dbcea5、全 pill（radius 100px）、body weight 500、ls 0.04em、Noto Sans JP
• 特徴:
  • border-radius: 100px の pill が全操作要素の既定。ボタン・バッジ・タブ・絞り込み・検索——すべて pill。矩形のボタンが 1 つも存在しない
  • ステータスは border-radius: 50% の円。「開催中」「開催予定」「開催終了」「申込不要」は正円の中に文字を入れる。pill（横長）と円（正円）を役割で分ける
  • 色の二軸: ティール #027e73 = 押せるもの（検索・絞り込み実行・アウトラインの枠）、サンド #dbcea5 = 展覧会というコンテンツ（バッジ・当日情報ブロック）
  • body に font-weight: 500 が掛かる。日本語サイトでは珍しく、地の文字が Regular より一段太い
  • letter-spacing: 0.04em が body から全要素に継承される。見出しも本文もバッジも同じ字間で、例外は「本日開館」の 0.27em だけ
  • ページ背景は #f6f6f6（純白ではない）。カードや情報ブロックを白で置くことで浮かせる
  • box-shadow は 1 段だけ（rgba(0,0,0,0.16) 0 0 6px）。上下左右に均等な、方向を持たない影
  • palt を掛けない（font-feature-settings: normal）

2. Color Palette & Roles

実測値。地は #f6f6f6（pageBackground.resolved = rgb(246,246,246) / 根拠 viewportTopBySample）。ティール系（操作）とサンド系（コンテンツ）が明確に分離しており、その 2 軸に補助色が加わる構成。

Brand（ブランド）

• Teal (#027e73, rgb 2,126,115): 主色。検索ボタン、「この条件で絞り込む」、アウトラインボタンの枠、「開館」バッジ、「開催中」ステータス円。「押せるもの」の色
• Bright Teal (#1bbc9b, rgb 27,188,155): 展覧会ページの月タブ（8月 / 9月 / 10月）の面。主色より明るく彩度が高い。時間軸のナビゲーション専用
• Mint (#75cec6, rgb 117,206,198): 「イベント」バッジの面。ティールの薄版
• Pale Mint (#c7eae7, rgb 199,234,231): 「開催予定」ステータス円の面。文字は #00675e（rgb 0,103,94）
• Pale Green (#e7eee7, rgb 231,238,231): 「印刷する」ボタンの面。ほぼ無彩色に見える最も薄いティール
• Sand (#dbcea5, rgb 219,206,165): 第 2 の主色。「企画展」「コレクション展」「MAPO」「展覧会」バッジ、トップの当日情報ブロックの面。「展覧会というコンテンツ」の色
• Gold (#c4aa5c, rgb 196,170,92): サンドの濃版。区切り罫・強調
• Apricot (#ecb576, rgb 236,181,118): 「お知らせ」バッジの枠線のみに使う（面は白）。面を持たない唯一のバッジ色
• Navy (#374c9f, rgb 55,76,159): 「申込不要」ステータス円の面。ティール／サンドのどちらにも属さない情報に当てる

Calendar（カレンダー専用）

• Sky (#c5d8f2, rgb 197,216,242): 開館延長日（20 時まで）のセルの面。カレンダー内でしか使わない
• Pale Slate (#e2e5ec, rgb 226,229,236): カレンダーの枠・区切り
• Gray Legend (#d4d4d4, rgb 212,212,212): 凡例ブロックの面、「カフェ」「ミュージアムショップ」バッジの面
• Mid Gray (#757575, rgb 117,117,117): 「開催終了」ステータス円の面（文字は白）

Neutral（面・文字）

• Background (#f6f6f6, rgb 246,246,246): ページ地色。純白ではない
• Surface (#ffffff): カード・情報ブロック・アウトラインボタンの面。地より明るいことで浮く
• Surface 2 (#eef0ee, rgb 238,240,238): フッター上部の面
• Ink (#323131, rgb 50,49,49): 主文字色。純黒 #000000 を使わない、わずかに赤みのある濃灰
• Ink Muted (#5e606e, rgb 94,96,110): 「検索条件をクリア」等の弱いラベル
• Ink Form (#444746, rgb 68,71,70): 入力欄の文字色
• Border (#a3a3a3, rgb 163,163,163): 「会期」等の弱い枠バッジ
• Back to Top (#d5d6d5, rgb 213,214,213): ページトップへボタンの面

Semantic（意味的な色）

意味色はステータス円が担う。エラー色は現れないため、実装時は以下を目安にする。

• Danger／Error: #b3312a 目安。ティール #027e73 と補色関係になるため彩度を落とす
• Warning: #c4aa5c（既存の Gold）を流用する。新しい色を足さない
• Success: #027e73（既存の Teal）を流用する
• 非活性: 面 #d4d4d4 ／ 文字 #757575（「開催終了」と同じ扱い）

3. Typography Rules

body に font-weight: 500 と letter-spacing: 0.04em が掛かるのがこのサイトの核。地の文字が Medium で、字間が全要素に継承される。書体は Noto Sans JP 単独。

3.1 和文フォント

• 全要素共通: Noto Sans JP（Google Fonts）。Adobe Fonts に依存しないため、preview.html でも実サイトと同じ書体が出る
• ウェイト: 500（本文・UI の既定）/ 700（見出し・ボタン） の 2 段。400 はフォーム入力欄と一部の枠バッジにしか現れない
• フォールバック: 游ゴシック体 → "Yu Gothic" → "ヒラギノ角ゴ ProN W3" → HiraKakuProN-W3 → "ヒラギノ角ゴ Pro W3" → "Hiragino Kaku Gothic Pro" → sans-serif
• 游ゴシックを先頭のフォールバックに置く。ヒラギノは ProN / Pro の両方を並べる（環境差を吸収するための冗長な指定）
• font-weight: 500 を body に掛けているため、游ゴシックにフォールバックすると Medium が無い環境で Bold に飛ぶリスクがある。実装では Noto Sans JP の 500 を必ず読み込むこと

3.2 欧文フォント

• 欧文専用の書体を持たない。「OPAM」「Oita Prefectural Art Museum」もロゴ画像で、本文中の英数字は Noto Sans JP の字形で出る
• 例外はカルーセルの閉じるアイコン（×）のみで、そこだけ arial, sans-serif が当たる。自社の設計には持ち込まない
• 等幅フォントは使わない
• preview.html での注記: Noto Sans JP は Google Fonts から取得できるため、代替フォントを立てる必要がない。実サイトと同じ書体で確認できる

3.3 font-family 指定

css/* 全要素共通 */
font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic",
             "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3,
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

/* body の既定 */
font-size: 16px;
font-weight: 500;              /* ← Regular ではなく Medium */
line-height: 1.5;              /* 24px */
letter-spacing: 0.04em;        /* 0.64px。全要素に継承される */
color: #323131;
font-feature-settings: normal; /* palt は使わない */

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

• 和文を先頭に置く。欧文専用書体で先取りしない
• 游ゴシックをヒラギノより先に置く。Windows 環境を優先した順序
• ヒラギノは ProN と Pro の両方を並べる（ProN = JIS2004 字形、Pro = JIS90 字形。環境によってどちらかしか無いため）
• font-weight: 500 が全体に掛かることを前提にする。Medium ウェイトを持たない書体にフォールバックすると Bold に合成されて太りすぎるため、Noto Sans JP の 500 は必須

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

• letter-spacing は 0.64px の px 固定。body の 16px で 0.04em にあたり、サイズが変わっても px 値が変わらないため、大きい文字ほど相対的な字間は詰まって見える
• 例外は 2 つだけ: 「本日開館」の 10px（0.27em） と、日付の 2px（0.09em）
• ウェイトは 500 と 700 の 2 段。400 は例外（フォーム入力欄と「会期」枠バッジのみ）
• line-height はほぼ全要素で 1.5。見出しも本文もバッジも同じ。例外は「本日開館」の 1.2 のみ
• 見出しサイズは 38 / 35 / 28 / 24 / 22 / 20 / 19 / 18 の 8 段と細かい。公共施設らしく情報階層が多い

3.5 行間・字間

• 本文の行間 (line-height): 1.5（16px → 24px）。見出しも 1.5 で、行間で階層を作らない
• 例外: 「本日開館」の 1.2 のみ（極端に字間を開くため行間を締める）
• 字間 (letter-spacing): 0.64px の px 固定を body から全要素に継承
  • 16px で 0.04em、28px で 0.023em、38px で 0.017em
  • em ではなく px で固定しているため、文字が大きくなるほど字間の比率は下がる。これは大見出しを塊として見せる効果を持つ
  • 例外: 「本日開館」10px（0.27em）、日付「2026年8月12日（水曜日）」2px（0.09em）
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• letter-spacing: 0.64px を body に置き、個別要素で上書きしない。これがサイト全体の統一感を作っている
• 字間を大きく開くのは「本日開館」のような 1 行のステータス表示だけ。文章に 0.1em 以上を当てない
• 行間 1.5 を全要素で守る。見出しだけ締める・本文だけ広げる、をしない
• font-weight: 500 を body に置く。個別に 400 へ落とさない（フォーム入力欄は例外）
• 日付は weight 700 ＋ ls 2px のセットで作る（字間だけを真似しない）

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• 展覧会名は長く、記号を含む（「ラブ! ヴァンガード!! 前衛を愛した、あるコレクターの眼 ―草間彌生、ヘイター and more」）。感嘆符の直後・ダッシュ ― の直後で折らない

• 施設名は「欧文（カタカナ）」の組で書く（café Charité（カフェ シャリテ））。欧文と丸括弧の間で折らない

• 日付（2026年8月12日（水曜日））は全体を 1 行に保つ（white-space: nowrap）

• 時刻表記（10時から19時まで）は数字と単位の間で折らない

• バッジのラベル（「企画展」「コレクション展」「申込不要」）は折り返さない

• 「開館延長日（20時まで）」のような括弧つきの補足は、括弧の前で折る

3.7 OpenType 機能

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

• palt は使わない。Noto Sans JP の等幅の字面をそのまま使い、letter-spacing: 0.64px で開く方向にのみ調整する
• font-weight: 500 と letter-spacing の組み合わせが可読性を作っている。palt で詰めると Medium の字面が密集して読みにくくなる
• 和欧が同じ書体なので café Charité（カフェ シャリテ） のような混植でも字形が揃う
• カレンダーの日付は桁を揃えたいので、必要なら font-feature-settings: "tnum" を足す（現行サイトは未使用）

3.8 縦書き

• 現行サイトは全面横組み（writing-mode: horizontal-tb）
• 展覧会のステートメントや作品キャプションで縦組みを使う場合は以下

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic",
             "ヒラギノ角ゴ ProN W3", sans-serif;
font-weight: 500;
letter-spacing: 0.04em;   /* 横組みと同じ字間を維持する */
line-height: 1.8;         /* 縦組みは横組みの 1.5 より広げる */

• 縦組み中の英数字・年号は text-combine-upright: all で 2 桁までを縦中横にする
• pill のバッジは縦組みに入れない（横長の形が縦組みの行を割る）。縦組みブロックの外に置く

4. Component Stylings

Buttons

Outline Pill（最も使用頻度の高い形）

• Background: #ffffff
• Text: #323131
• Border: 1px solid #027e73（ティール）
• Padding: 10px 20px（幅広版は 10px 40px）
• Border Radius: 100px
• Font: 18px / weight 700 / lh 1.5 / ls 0.64px
• 例: 「展覧会年間スケジュール」「もっと見る」「お知らせ一覧へ」「詳細を確認する」「検索条件をクリア」
• 枠だけがティール、文字は本文色。「押せる」ことを枠の色で示し、文字は読ませる

Filled Pill（決定操作）

• Background: #027e73（ティール）
• Text: #ffffff
• Border: なし
• Padding: 12px 40px
• Border Radius: 100px
• Font: 18px / weight 700 / lh 1.5
• 例: 「この条件で絞り込む」「検索」
• 面を塗るのは「実行する」操作だけ。遷移は必ずアウトライン

Soft Pill（副次操作）

• Background: #e7eee7（ペールグリーン）
• Text: #323131
• Border: なし
• Padding: 12px 40px
• Border Radius: 100px
• Font: 18px / weight 700
• 例: 「印刷する」

Tab Pill（絞り込みタブ）

• Background: #ffffff（非選択）／ #dbcea5（選択中・展覧会）
• Text: #323131
• Border: 1px solid #027e73（非選択）／ 1px solid #dbcea5（選択中）
• Padding: 5.4px 18px（8px 16px の版もある）
• Border Radius: 100px / 50px
• Font: 18px / weight 500（非選択）／ 700（選択中）
• 例: 「開催中」「開催予定」「開催終了」／「展覧会」「貸館の展覧会」
• 選択中は面を塗り、weight を 500 → 700 に上げる

Search Pill（ヘッダー）

• Background: #027e73
• Text: #ffffff
• Border Radius: 20px（ヘッダー内は 20px、ページ内の検索は 100px）
• Padding: 10px
• Font: 15px / weight 500

Badges

Category Pill（展覧会・イベント） — このサイトを象徴する形

• Background: #dbcea5（企画展 / コレクション展 / MAPO / 展覧会）／ #75cec6（イベント）
• Text: #323131
• Border: 1px solid 面と同色（面と同色の枠を置いて高さを安定させる）
• Padding: 5px 16px
• Border Radius: 100px
• Font: 16px / weight 500 / lh 1.5 / ls 0.64px
• 展覧会系はサンド、イベント系はミント。色でコンテンツの種類を分ける

Outline Pill Badge（お知らせ）

• Background: #ffffff
• Text: #0a0a0a
• Border: 1px solid #ecb576（アプリコット）
• Padding: 5px 16px
• Border Radius: 100px
• Font: 12px / weight 700
• 面を持たない唯一のバッジ。「お知らせ」だけ枠で表す

NEW Tag

• Background: #323131（本文色そのもの）
• Text: #ffffff
• Border: なし
• Padding: 5px 16px
• Border Radius: 100px
• Font: 12px / weight 700

Facility Pill

• Background: #d4d4d4
• Text: #323131
• Padding: 8px 20px
• Border Radius: 100px
• Font: 20px / weight 500
• 例: 「カフェ」「ミュージアムショップ」

Frame Badge（会期） — 唯一の矩形

• Background: #ffffff
• Text: #323131
• Border: 1px solid #a3a3a3
• Padding: 5px 16px
• Border Radius: 0px — サイト内で唯一の角ばった要素
• Font: 14px / weight 400
• 「会期」「場所」等のラベルにだけ使う。操作要素ではないことを形で示す

Status Circles（ステータス円）

• Border Radius: 50%（正円）
• Padding: 0
• Font: 16px / weight 500 / #ffffff
• バリエーション:
  • 開催中 / 申込受付中: 面 #027e73 / 文字 #ffffff
  • 開催予定: 面 #c7eae7 / 文字 #00675e
  • 開催終了: 面 #757575 / 文字 #ffffff
  • 申込不要: 面 #374c9f / 文字 #ffffff
• pill（横長）と円（正円）を役割で分ける。分類は pill、状態は円

Inputs

Search Input

• Background: #ffffff
• Border: なし（0px none）
• Border Radius: 25px
• Padding: 0 12px 0 0
• Font: 16px / weight 400 / Text Color: #444746
• 枠を持たず、pill の面だけで入力欄と分かる

Form Input

• Background: #f6f6f6（ページ地色と同じ）
• Border: 1px solid #f6f6f6
• Border (focus): 1px solid #027e73（ティール）
• Border Radius: 0px
• Padding: 16px 24px
• Font: 16px / weight 400 / Text Color: #323131
• 面色を地色と同じにして、白いカードの上で凹んで見せる

Select（カレンダーの年月）

• Background: #ffffff
• Border: 1px solid #027e73
• Border Radius: 31px
• Font: 30px / weight 700（数字を大きく見せる）

Cards

• Background: #ffffff（地の #f6f6f6 より明るい）
• Border: なし
• Border Radius: 0px（カードは角丸にしない。角丸は操作要素の記号）
• Shadow: 0 0 6px rgba(0,0,0,0.16)
• 構成: サムネイル → カテゴリ pill → タイトル（20px / weight 700）→ 会期（枠バッジ ＋ 日付）
• カードは矩形、中の操作要素は pill。この対比が設計の骨格

Today Block（当日情報）

• Background: #dbcea5（サンド）
• Border Radius: 0px
• Padding: 32px 40px 目安
• 構成: 日付（22px / weight 700 / ls 2px）→ 区切り罫 → 開館時間（20px / weight 500）
• 展覧会系の色をトップの当日情報にも当てる。サンド＝「今日ここで見られるもの」

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px 目安（サイトは max-width: 100% の流動レイアウトで、コンテナ幅を CSS 変数に持たない）
• 読み物カラム: 800px 目安
• Padding (horizontal): 24〜80px
• KV カルーセルは中央に寄せ、左右に余白を残す（全幅ブリードにしない）
• ヘッダーは全幅・白地・不透過。KV に重ねない
• 「本日開館」のフローティングバッジは右下に固定（position: fixed）

Grid

• Columns: トップのカレンダーは 2 カラム（当日情報 / 月間カレンダー）、展覧会一覧は 3 カラム、施設紹介は 2 カラム
• Gutter: 24px
• セクションの区切りは面色で作る: 地 #f6f6f6 の上に白いカードを置く。セクションごとに地色を変えない
• 絞り込み pill はリストの上に横 1 列で並べる
• カレンダーは 7 列の表組み。開館延長日は #c5d8f2、休館日は空白で示す

6. Depth & Elevation

実測の box-shadow は 1 段だけ。方向を持たない均等な影で、カードをわずかに浮かせる。

• 影に方向（オフセット）を持たせない。0 0 6px で上下左右に均等に広げる。「浮いている」ではなく「輪郭が柔らかい」表現
• 奥行きは主に 地 #f6f6f6 と面 #ffffff の 2 段で表現する
• ボタンに影を付けない。pill は完全にフラット
• バッジ・ステータス円にも影を付けない

7. Do's and Don'ts

Do（推奨）

• すべての操作要素を pill（border-radius: 100px）にする。ボタン・バッジ・タブ・絞り込みを形で統一する
• ステータスは正円（border-radius: 50%）にする。pill（分類）と円（状態）を役割で分ける
• 色を二軸で運用する。ティール #027e73 = 押せるもの、サンド #dbcea5 = 展覧会というコンテンツ
• 遷移はアウトライン pill（白地 ＋ 1px solid #027e73）、実行は塗り pill（面 #027e73 ＋ 白文字）
• バッジの枠を面と同色で置く（1px solid 面と同色）。高さを安定させる
• body に font-weight: 500（Medium）を置く。Regular にしない
• letter-spacing: 0.64px を body に置き、全要素に継承させる（px 固定）
• line-height は全要素 1.5 で通す。行間で階層を作らない
• ページ地色は #f6f6f6、カードは #ffffff。地より明るい面で浮かせる
• 主文字色は #323131（純黒を使わない）
• 「開催予定」の円は面 #c7eae7 ＋ 文字 #00675e のセットで作る（薄い面には濃い同系色の文字）
• 影は 0 0 6px rgba(0,0,0,0.16) の 1 段だけ。オフセットを持たせない
• 日付は weight 700 ＋ letter-spacing: 2px のセットで作る
• カードは矩形（radius 0）、中の操作要素は pill。この対比を保つ
• Noto Sans JP の 500 を必ず読み込む（body の weight が 500 のため）

Don't（禁止）

• 矩形のボタンを作らない。操作要素は必ず pill（唯一の例外は「会期」枠バッジ）
• カードを角丸にしない。角丸は操作要素の記号として温存する
• ティールとサンドの役割を入れ替えない（ティール＝操作、サンド＝展覧会）
• 遷移ボタンの面を塗らない（塗るのは「実行する」操作だけ）
• body の font-weight を 400 にしない（フォーム入力欄だけが例外）
• letter-spacing を要素ごとに上書きしない。0.64px の継承を壊さない
• 字間を 0.1em 以上に開くのは 1 行のステータス表示だけ（「本日開館」）。文章には当てない
• 行間を要素ごとに変えない（全要素 1.5）
• ページ地を純白 #ffffff にしない（#f6f6f6 でないとカードが浮かない）
• 純黒 #000000 を使わない（主文字は #323131）
• 影にオフセットを付けない（0 2px 8px のような方向を持つ影を作らない）
• ボタン・バッジ・ステータス円に影を付けない
• 新しい色を足さない。Warning は既存の Gold #c4aa5c、Success は既存の Teal #027e73 を流用する
• #c5d8f2（スカイ）をカレンダーの外に持ち出さない（開館延長日専用）
• palt を掛けない、字間を詰める方向に動かさない
• 游ゴシックへのフォールバックで weight 500 が Bold 合成されないよう、Noto Sans JP の読み込みを省略しない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。アウトライン pill は padding 10px 20px ＋ 18px / lh 1.5 で高さ 47px を確保する
• 絞り込みタブの padding: 5.4px 18px はモバイルで 10px 18px に広げる（既定のままでは高さが 40px を切る）
• ステータス円は直径 44px 以上にする（見た目が小さくても当たり判定を確保）
• カードはカード全体をタップ領域にする
• カレンダーのセルは 44px × 44px 以上。7 列が入らない場合は横スクロールさせる
• モバイルでは絞り込み pill の列を横スクロールさせ、折り返して 2 行にしない

フォントサイズの調整

• 本文 16px は据え置く（14px を下回らない）
• Exhibition Title 38px → モバイルでは 24〜26px。weight 700 は維持する
• 「本日開館」37px → 22〜24px。letter-spacing: 10px は 6px 程度に落とす（幅が収まらないため）
• Section Head 28px → 20〜22px
• Button 18px → 16px まで。pill の高さ 44px は維持する
• 日付 22px → 18px。letter-spacing: 2px と weight 700 は維持する
• letter-spacing: 0.64px の全体継承と行間 1.5 はモバイルでも維持する
• font-weight: 500 はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:      #f6f6f6   （ページ地色。純白ではない）
Surface:         #ffffff   （カード・アウトライン pill の面。地より明るい）
Teal:            #027e73   （主色。押せるもの＝検索・実行・枠・開催中）
Bright Teal:     #1bbc9b   （月タブ専用）
Mint:            #75cec6   （イベントバッジ）
Pale Mint:       #c7eae7   （開催予定の円。文字は #00675e）
Pale Green:      #e7eee7   （印刷するボタン）
Sand:            #dbcea5   （第 2 の主色。展覧会バッジ・当日情報ブロック）
Gold:            #c4aa5c   （サンドの濃版。罫・Warning に流用）
Apricot:         #ecb576   （お知らせバッジの枠のみ。面は白）
Navy:            #374c9f   （申込不要の円）
Sky:             #c5d8f2   （開館延長日のカレンダーセル専用）
Gray Legend:     #d4d4d4   （凡例・施設バッジ）
Mid Gray:        #757575   （開催終了の円・非活性）
Ink:             #323131   （主文字色。純黒は使わない）
Ink Muted:       #5e606e   （弱いラベル）
Border:          #a3a3a3   （会期の枠バッジ）
Font:            "Noto Sans JP", 游ゴシック体, "Yu Gothic",
                 "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3,
                 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
Body:            16px / weight 500 / lh 1.5 / ls 0.04em (0.64px)
Weight:          500（本文・UI）と 700（見出し・ボタン）の 2 段。400 は例外
Line Height:     全要素 1.5（例外は「本日開館」の 1.2 のみ）
Letter Spacing:  0.64px を body に置いて全要素に継承（px 固定）
                 例外: 「本日開館」10px / 日付 2px
Feature:         font-feature-settings: normal（palt を使わない）
Radius:          操作要素は pill 100px / ステータスは円 50% /
                 検索窓 20〜25px / セレクト 31px / カードと会期バッジは 0
Shadow:          0 0 6px rgba(0,0,0,0.16) の 1 段のみ（オフセットなし）
Container:       1280px 目安（読み物 800px）

プロンプト例

大分県立美術館（OPAM）のデザインシステムに従って、美術館の展覧会一覧ページを作成してください。
- フォントは "Noto Sans JP", 游ゴシック体, "Yu Gothic", "ヒラギノ角ゴ ProN W3",
  HiraKakuProN-W3, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif。
  ヒラギノは ProN と Pro の両方を並べる
- body に font-weight: 500（Medium）と letter-spacing: 0.64px を掛け、全要素に継承させる。
  Regular（400）に落とさない。字間は px 固定なので要素ごとに上書きしない
- line-height は全要素 1.5 で通す。見出しだけ締める・本文だけ広げる、をしない
- ウェイトは 500（本文・UI）と 700（見出し・ボタン）の 2 段だけ
- ページ地色は #f6f6f6、カードは #ffffff。地より明るい面でカードを浮かせる。
  主文字色は #323131 で、純黒 #000000 は使わない
- 色は二軸で運用する：ティール #027e73 = 押せるもの、サンド #dbcea5 = 展覧会というコンテンツ
- すべての操作要素を pill（border-radius: 100px）にする。矩形のボタンを作らない
  - 遷移ボタン：背景 #ffffff / 1px solid #027e73 / 文字 #323131 /
    padding 10px 20px / 18px weight 700
  - 実行ボタン：背景 #027e73 / 文字 #ffffff / 枠なし / padding 12px 40px / 18px weight 700
  - 絞り込みタブ：非選択は白地＋1px solid #027e73＋weight 500、
    選択中は面 #dbcea5＋weight 700
- カテゴリバッジも pill：展覧会系は面 #dbcea5、イベント系は面 #75cec6、
  文字 #323131 / padding 5px 16px / 16px weight 500 / 枠は面と同色の 1px solid
- 「お知らせ」バッジだけは面を持たず、白地＋1px solid #ecb576 で表す
- ステータスは正円（border-radius: 50%）にする。pill（分類）と円（状態）を形で分ける
  - 開催中：面 #027e73 / 白文字   開催予定：面 #c7eae7 / 文字 #00675e
  - 開催終了：面 #757575 / 白文字  申込不要：面 #374c9f / 白文字
- カードは矩形（border-radius: 0）にする。角丸は操作要素の記号として温存する。
  唯一の矩形バッジは「会期」（白地＋1px solid #a3a3a3＋14px weight 400）
- box-shadow は 0 0 6px rgba(0,0,0,0.16) の 1 段だけ。オフセットを付けない。
  ボタン・バッジ・ステータス円には影を付けない
- 日付は 22px / weight 700 / letter-spacing 2px のセットで作り、1 行に保つ
- 見出しサイズは 38 / 35 / 28 / 24 / 22 / 20 / 19 / 18 の階層から選ぶ
- 新しい色を足さない。Warning は #c4aa5c、Success は #027e73 を流用する
- コンテナ幅は 1280px 目安、読み物カラムは 800px
- font-feature-settings は normal（palt は掛けない）