出会いと五感のミュージアム

DESIGN.md から抽出したデザイントークンのカタログ。カラー、タイポグラフィ、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

展覧会年間スケジュール この条件で絞り込む
01 / Colors

カラーパレット — ティール（操作）と サンド（展覧会）の二軸

Brand
Teal
#027e73
主色。押せるもの＝検索・実行・枠・開催中
Bright Teal
#1bbc9b
月タブ専用
Mint
#75cec6
イベントバッジ
Pale Mint
#c7eae7
開催予定の円（文字 #00675e）
Pale Green
#e7eee7
印刷するボタン
Sand
#dbcea5
第 2 の主色。展覧会バッジ・当日情報
Gold
#c4aa5c
サンドの濃版。罫・Warning に流用
Apricot
#ecb576
お知らせバッジの枠のみ（面は白）
Navy
#374c9f
申込不要の円
Calendar
Sky
#c5d8f2
開館延長日のセル専用
Pale Slate
#e2e5ec
カレンダーの枠・区切り
Gray Legend
#d4d4d4
凡例・施設バッジ
Mid Gray
#757575
開催終了の円・非活性
Neutral
Background
#f6f6f6
ページ地色。純白ではない
Surface
#ffffff
カード・アウトライン pill の面
Surface 2
#eef0ee
フッター上部の面
Ink
#323131
主文字色。純黒を使わない
Ink Muted
#5e606e
弱いラベル
Border
#a3a3a3
「会期」枠バッジ
02 / Typography — 実測値

タイポグラフィ階層 — body に weight 500 と ls 0.64px

ラブ! ヴァンガード!! 前衛を愛した、あるコレクターの眼
38px / 700 / line-height: 1.5 / letter-spacing: 0.64px (0.017em)展覧会タイトル
本日開館
37px / 700 / line-height: 1.2 / letter-spacing: 10px (0.27em)唯一の極端な字間
展覧会
35px / 500 / line-height: 1.5 / letter-spacing: 0.64pxページタイトル（h1）
カレンダー
28px / 700 / line-height: 1.5 / letter-spacing: 0.64px (0.023em)セクション見出し
café Charité（カフェ シャリテ）
28px / 500 / line-height: 1.5 / letter-spacing: 0.64px施設名（weight 500）
2026年8月12日（水曜日）
22px / 700 / line-height: 1.5 / letter-spacing: 2px (0.09em)日付（字間の例外）
トークセッション「東勝吉をめぐって ― 由布院と一人の画家」
20px / 700 / line-height: 1.5 / letter-spacing: 0.64pxサブ見出し
10時から19時まで（入場は閉館の30分前まで）
20px / 500 / line-height: 1.5 / letter-spacing: 0.64px開館情報
本文テキスト — 大分県立美術館は、大分県の芸術文化の拠点として 2015 年に開館しました。県民の暮らしのなかに美術を届け、出会いと五感を通じて作品と向き合う場をつくっています。body には font-weight: 500 と letter-spacing: 0.64px が掛かっています。
16px / 500 / line-height: 1.5 (24px) / letter-spacing: 0.64px (0.04em)body の基準
会期・場所などのラベル（400 が現れる数少ない箇所）
14px / 400 / line-height: 1.5 / letter-spacing: 0.64px枠バッジ・フォーム入力欄のみ
03 / Exhibition — 展覧会の組版

当日情報ブロックとカレンダー

2026年8月12日（水曜日）
10時から19時まで（入場は閉館の30分前まで）
企画展
ラブ! ヴァンガード!! 前衛を愛した、あるコレクターの眼 ―草間彌生、ヘイター and more
コレクション展
Hello Kitty 展 － わたしが変わるとキティも変わる －
イベント
トークセッション「東勝吉をめぐって」
日月火水木金土
2627282930311
2345678
9101112131415
16171819202122

水色のセル（ #c5d8f2）は開館延長日（20時まで）。この色はカレンダーの外に持ち出さない。

04 / Buttons & Badges

すべて pill（radius 100px）— 矩形のボタンは存在しない

もっと見る
Outline — 遷移
この条件で絞り込む
Filled — 実行
印刷する
Soft — 副次操作
開催予定
Tab — 非選択
展覧会
Tab — 選択中（面を塗り 700 に）

バッジ（pill）

企画展 コレクション展 MAPO イベント お知らせ NEW カフェ 会期

「お知らせ」は面を持たない唯一のバッジ（白地＋1px solid #ecb576）。「会期」はサイト内で唯一の矩形（radius 0）。

ステータス円（radius 50%）— pill（分類）と円（状態）を形で分ける

開催中
開催予定
開催終了
申込不要
05 / Cards

カードは矩形（radius 0）、中の操作要素は pill

展覧会ポスター
企画展

ラブ! ヴァンガード!! 前衛を愛した、あるコレクターの眼

会期2026年7月17日〜9月23日
展覧会ポスター
コレクション展

Hello Kitty 展 － わたしが変わるとキティも変わる －

会期2026年7月17日〜9月23日
イベント写真
イベント

トークセッション「東勝吉をめぐって ― 由布院と一人の画家」

会期2026年8月23日
06 / Forms

フォーム要素

border: なし / radius: 25px
デフォルト — 面を地色 #f6f6f6 と同じにして白いカードの上で凹ませる
フォーカス — border: #027e73（ティール）
エラー — border: #b3312a（実装目安）
07 / Elevation — 実測値（1 段・オフセットなし）

Depth & Elevation

Level 0: Flat
ボタン・バッジ・ステータス円・入力欄のすべて
Level 1
0 0 6px rgba(0,0,0,0.16) — カード・フローティングバッジ
地 #f6f6f6
ページ地色。カードの白より暗い
Focus Ring
#027e73

影に方向（オフセット）を持たせない。「浮いている」ではなく「輪郭が柔らかい」表現。

08 / Layout

スペーシングとコンテンツ幅

XS 5
S 10
M 16
L 24
XL 40
XXL 64
XXXL 96
Main Container 1280px 目安
Article 800px 目安

実サイトは max-width: 100% の流動レイアウトで、コンテナ幅を CSS 変数に持たない。上記は実装時の目安。