本日は 開館日 10:00 – 18:00

Design System Preview — 東京都庭園美術館

DESIGN.md から抽出したデザイントークンのカタログ。ページ地色・字間・角丸・札の面色まで、computed style の実測値に基づく。

チケットのご購入 DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Teien Green
#00695b
ロゴ・文字・線・小さな面
Teien Mint
#7fbaaa
帯・区切りの面
Ink
#000000
本文・主要CTAの面
Surface — ページ地色は白ではない
Page Background
#ede8e2
ページ地色。最重要
Surface White
#ffffff
カード面
Surface Warm
#f9f7f3
開館情報の面
Surface Mint
#f2f7f7
トピックス系の面
Surface Pink
#f7f1f0
展覧会系の面
Surface Gray
#c6d3d5
フッターの面
Category / Label — 展示種別の札
展覧会
#f0df9d
文字は #000
トピックス
#b5cbed
文字は #000
重要なお知らせ
#d82112
文字は #fff
イベント
#efbecd
角丸3pxの札
開館日
#d8d065
開館ステータス
Semantic & Border
Attention
#b25300
開催中。線と文字のみ
Heading Gold
#9b8821
セクション見出しの金
Border
#707070
ボタン・入力の枠
Border Light
#d9d9d9
カードの枠
Divider
#c6c6c6
リセットボタンの面
02 / Typography — 実測値

タイポグラフィ階層

letter-spacing は全要素 0.07em で統一されている。例外は下層ページの見出し（0.12em）と、 Josefin Sans の欧文ラベル（0.05em）の2つだけ。font-feature-settings は normal（palt を使わない）。

展覧会 — Page Heading
32px / 500 / line-height: 1.43 / letter-spacing: 0.12em下層ページのタイトル。字間の例外
ルーシー・リー展 — Section Heading
24px / 500 / line-height: 1.5 / letter-spacing: 0.07em一覧の展覧会名
東西をつなぐ優美のうつわ — Feature Heading
22px / 500 / line-height: 1.5 / letter-spacing: 0.07emトップの主展覧会名
正門横スペースにおける特別展示 — Card Title
18px / 500 / line-height: 1.5 / letter-spacing: 0.07emカード見出し
東京都庭園美術館（本館＋新館） — Lead / Description
17px / 400 / line-height: 1.5 / letter-spacing: 0.07em会場名などの説明
本文 — 旧朝香宮邸として建てられたアール・デコ建築を、そのまま美術館として公開しています。
16px / 400 / line-height: 1.5 / letter-spacing: 0.07em本文の基準
展覧会・美術館・建物 — Navigation
16px / 500 / line-height: 1.31 / letter-spacing: 0.07emグローバルナビ
「フラットデー」実施に伴う入館者数の制限について — List Title
15px / 500 / line-height: 1.53 / letter-spacing: 0.07emお知らせの見出し
2026年7月4日土曜日 — Caption
13px / 400 / line-height: 1.5 / letter-spacing: 0.07em日付・住所
開催中 — Tag
12px / 400–500 / line-height: 1.5 / letter-spacing: 0.07em札・タグ
Copyright © Tokyo Metropolitan Teien Art Museum — Copyright
10px / 400 / line-height: 1.8 / letter-spacing: 0.07em最小テキスト
Language / Follow Us — Latin Label
Josefin Sans / 12px / 500 / line-height: 1.25 / letter-spacing: 0.05em欧文だけのUIラベル
03 / Exhibition

組版サンプル — 展覧会詳細

展覧会 開催中

ルーシー・リー展―東西をつなぐ優美のうつわ―

会期 2026年7月4日（土）– 9月13日（日）
会場 東京都庭園美術館（本館＋新館）

ウィーンに生まれ、ロンドンで独自の陶芸を確立したルーシー・リー。
東西の造形感覚が溶け合ったうつわを、アール・デコの空間で展観します。 旧朝香宮邸の各室が持つ光と、薄手のフォルムが響き合う構成としました。

チケットのご購入 展覧会一覧
04 / Buttons & Tabs

ボタン・タブ・札

Buttons — 角丸 5px
チケットのご購入 お知らせ一覧 東京都庭園美術館とは リセット
Utility — 左端だけ丸い特殊形状（50px 2px 2px 50px）
サイト内検索 Language
Tabs — 角丸 60px
開催中・開催予定 これまでの展覧会
Category Chips — ピル（角丸 50px）
展覧会 トピックス 重要なお知らせ 会期
Labels & Status — 角丸 3px
イベント 展覧会関連プログラム 茶室行事 開館日
Status Tags — 面を塗らず、文字と枠を同色に
開催中 募集中 開催予定
05 / Cards

カード

カードは角丸を付けない。面の分離は地色（#ede8e2）と白の差でつける。

トピックス
2026年7月28日

庭園の芝生養生に伴う立入制限のお知らせ

展覧会
2026年7月4日

正門横スペースにおける特別展示「ランドスケープ」

重要なお知らせ
2026年6月20日

「フラットデー」実施に伴う入館者数の制限について

Link Card — 角丸 5px / 枠 1px #d9d9d9
次回の展覧会
06 / Forms

フォーム — 3状態

Default — 枠 1px solid #707070 / 角丸 5px
Focus — 枠 #00695b ＋ リング rgba(0,105,91,.18)
Error — 枠 #d82112 ＋ リング rgba(216,33,18,.15)
07 / Elevation

影 — 2段しかない

Level 0
none
Level 1
0 0 12px rgba(0,0,0,.1)
08 / Layout

レイアウト

Spacing Scale
5
10
20
30
50
80
Container
Content
max-width: 1248px
Wide（メインビジュアル）
max-width: 1366px
Border Radius — 3系統だけ
5px — ボタン 3px — 札 50–60px — ピル・タブ