本日の開館情報
濃色パネルの上に、左へ #1b854d の縦罫を引いた展示リストを置く。
CSS 変数は 0 個。構造は #2b2b2b、行動導線は #1b854d。テキストリンクだけが #2869dd で、ボタンには一切使わない。
状態は 色 + 記号(○ ☽ ▲ ×)の 2 系統で示す。色覚に依存しない設計になっている。
font-family は全体で 1 本だけ。見出し用・本文用の使い分けが存在しない。階層はサイズとウェイトだけで作る。
字間が px 固定であることの意味。 16px 本文では 0.0625em、40px 見出しでは 0.025em になる。サイズが大きいほど相対的に詰まって見える設計で、大見出しが締まり、本文がゆったりする。0.06em のような em 指定に置き換えると見出しがだらしなく開くので、必ず 1px で書くこと。
palt で括弧・句読点まわりのアキを詰め、そのうえで一律 1px 開き直す。片方だけ真似ないこと。 palt だけ入れると全体が詰まりすぎ、letter-spacing だけ入れると括弧の前後が空きすぎる。
濃色パネルの上に、左へ #1b854d の縦罫を引いた展示リストを置く。
padding の右が 56px と広いのは、右端に › シェブロンを置くため。この非対称パディングがボタンの型。
緑 #1b854d は汎用の success ではない。 チケット購入・通知登録・「注目」といった行動導線の専用色として使う。構造的な遷移ボタンは炭黒 #2b2b2b。
角丸ゼロ、影ゼロ。1px の罫線だけで区切る。
本館・東洋館ほか、通年で入れ替わる常設の展示
期間限定で開催する大規模な展覧会
代表的な収蔵品を高精細画像で公開
入力欄も角丸なし。枠は 1px solid #2b2b2b、font-size は 16px を下回らない(iOS のズーム回避)。
作品名・作者名などで検索できます
フォーカスリングは #1b854d
西暦を半角数字でご入力ください
セレクトも同じ枠・角丸なし
可視要素の box-shadow は実測 0 件。奥行きは「白地 / 炭黒パネル / 写真」の 3 層と 1px の罫線だけで表現する。
box-shadow: noneカードやモーダルに影を足すと、このサイトの平面的な整理感が崩れる。
コンテナは 1280px。トップは左「開館情報」+右「カレンダー」の 2 カラム。
| Token | Value | 用途 |
|---|---|---|
| XS | 5px | インライン |
| S | 8px | バッジ内 |
| M | 16px | 最頻。カード間・グリッドの gutter(22箇所) |
| L | 30px | セクション内 |
| XL | 50px | セクション間 |
| Breakpoint | Width | 説明 |
|---|---|---|
| 主 | ≤ 768px | 2 カラムが縦積みになる(57箇所) |
| Narrow | ≤ 1120px / 1200px | ナビの折り返し調整 |
| Desktop | > 1280px | コンテナ 1280px で頭打ち |
| Radius | Value | 出現 |
|---|---|---|
| 既定 | 0 | ボタン・カード・バッジ・入力欄すべて |
| ページネーション | 2px | 数字ボタンのみ |
| Language | 3px | 1 件のみ |
| SNS アイコン | 50% | 8 件 |