ブランド色は Nara Green #198479。導線は #2e2e2e のチャコール、会期は #e71337 の赤。金 #c57f23 と紫 #6f3e8f は「奈良博を数字で知る」ブロック専用で、通常の UI には出さない。本文色は純黒ではなく #323131。
Cookie バナー(STRIGHT by IIJ)もブランド緑を使っている。ただし同じ緑がロゴ・丸ボタン・タブ・展覧会バッジにも出ているので、サイトの色と判定してよい。border-radius: 18px と #004d8a のリンク色だけは CMP のものなので採用しない。
ルートは 10px(html { font-size: 10px }、1.4rem = 14px)。字間は normal、palt も無し。代わりに可視 194 要素のうち 167 要素が font-weight: 500で、行間は 1.80 が全ページで一様(下層は 67/67 要素)。
letter-spacing を em に読み替えないこと。このサイトは px で直書きしており、サイズとの比も揃っていない(27px に 2px = 0.074em、24px に 4px = 0.167em)。字間を足すのは 24 要素だけで、残り 170 要素は normal。
font-feature-settings: "palt" は 1 要素も使っていない(実測 0 件)。鉤括弧・ダーシの多い展覧会名でも詰めない。密度はウェイトで出している。
font-family に游ゴシック・ヒラギノを足さないこと。チェーンは "Noto Sans JP", sans-serif の2段だけ。OS フォントを挟むと、Medium(500)の見え方が環境ごとに変わる。
導線はすべて border-radius: 100px のピル。カード状のリンクは 1px solid #707070 + 角丸なし。会期バッジの枠は border ではなく box-shadow: inset 0 0 0 1pxで描かれている(レイアウトが 1px もずれない)。
btn-dark の padding は 10px 70px 10px 60px と左右非対称。左にアイコン、右に矢印の場所を空けている。border-radius: 18px は Cookie バナー専用なので採用しない。
このサイトの角丸は「全部丸める」のではなく、1〜2 隅だけ 60px 落とす。ロゴパネルは右下だけ 15px。
border-radius: 60px 0 0
左上だけ 60px
border-radius: 0 0 60px
右下だけ 60px
border-radius: 60px 0
左上・右下
数字だけ font-size: 24px / font-weight: 400 / letter-spacing: 4px に落とし、金・紫で色分けする。この 2 色を通常の UI に持ち込まない。
面は #f5f5f5、角丸 0px、影なし。会期バッジとカテゴリバッジを頭に並べる。
枠は 1px solid #707070、角丸 0px。フォーカスとエラーは、バッジと同じ内側リング(box-shadow: inset)で示す。
区別は「緑・チャコールの塗り」「1px solid #707070 の枠」「#f5f5f5 / #f9f8f4 / #e8e3de の淡い面」で作る。
記事カラムは 1000px、ヘッダー・フッターは 1120px。gap をかなり詰めるのがこのサイトの型。
ブレークポイントの主役は screen and (max-width: 767px)(実測 217 回)。ほかに min-width: 767px(18 回)、max-device-width: 1024px(17 回・device-width である点に注意)、Gutenberg 既定の 600px / 782px。