時代を超え 人が集う場に輝きを

01 / Colors
PALETTE

金茶1色で格を出す

白と淡いグレーの余白を大きく取り、彩度を持つのは #856c34 だけ。

Imperial Gold
#856c34
--COLOR_BRAND_PRIMARY。CTA・見出しの差し色。実測 18 件
Gold Hover
#755f2d
--COLOR_BRAND_PRIMARY_HOVER
Gold Muted
#927f56
小さな「詳細を見る」リンク
Gold Dark
#4d422a
スクロールトップボタン
Background
#ffffff
--COLOR_BACKGROUND_LIGHT。body に明示指定
Surface
#f5f5f5
--COLOR_BACKGROUND_LIGHT_2。下層で 19 件
Surface Dark
#1a1a1a
ヘッダー・フッター。本文色も同値
Text Disabled
#707070
--COLOR_FOREGROUND_DISABLED
Outline
#7a7a7a
主要な罫線・カルーセルの非アクティブドット
Outline Light
#e6e6e6
テーブル・カードの淡い区切り線
Outline Dark
#4d4d4d
黒地の上の罫線
On Dark 2
#cccccc
黒地の上の小さな注記

宣言 ≠ 実装（トークンにあるが 0 件だった値）

変数値実測
--COLOR_BACKGROUND_LIGHT_3#faf6ee0 件（アイボリーとして使ってはいけない）
--COLOR_OUTLINE_GOLD#ccbe9f0 件
--COLOR_BRAND_SECONDARY#b895480 件
--FONT_FAMILY_SANS_ENJost0 件（欧文サンセリフは出てこない）
--BOX_SHADOW0 5px 6px #7d7d7d330 件
--BORDER_RADIUS_SMALL / LARGE5px / 10px1 件 / 8 件（主要 CTA は 0）
--LINER_GRADIENT#ade6ff → #dbb2ff0 件（ブランドと無関係のパステル）
uniqueBackgrounds に出る #3860be / #27455c / #468254 はブランド色ではない。 すべて OneTrust の Cookie 同意バナー由来。_textPreview に OK / Apply / クッキー設定 / 全てのクッキーを受け入れる が並ぶことで判別できる。
02 / Typography
TYPOGRAPHY

見出しもボタンも明朝

本文だけがゴシック（ヒラギノ角ゴ Pro）。それ以外の階層は Noto Serif JP が担う。

Page Title (h1)
Noto Serif JP / 40px / 600
lh 2.0 / ls .05em
進化するグランドホテル
Page Title (sub)
Noto Serif JP / 32px / 600
lh 1.8 / ls .15em
レストラン・バーラウンジ
Section Heading (EN)
Judson / 34px / 700
lh 1.6 / ls .2em / #856c34
DESTINATION
Section Heading (h2)
Noto Serif JP / 28px / 600
lh 1.8 / ls .05em
人に、地球に、未来にやさしく
Sub Heading (h3)
Noto Serif JP / 20px / 600
lh 1.8 / ls .05em
館内ショッピングエリア
Card Title
ヒラギノ角ゴ Pro / 28px / 400
lh 2.0 / ls .05em
帝国ホテル 東京
Lead
Noto Serif JP / 22px / 500
lh 2.0 / ls .05em
ゆっくりとお過ごしいただくために
Eyebrow (EN)
Judson / 16px / 700
lh 1.6 / ls .2em / #856c34
SUSTAINABILITY
Body（基準）
ヒラギノ角ゴ Pro / 16px / 400
lh 2.0 / ls normal
1890年の開業以来、日本の迎賓館としての役割を担ってきました。本文だけは字間を入れず、行間 2.0 の余白で読みやすさを確保しています。見出しの字間が広いぶん、本文はあえて素のまま組むという設計です。
Nav
Noto Serif JP / 16px / 500
lh 2.0 / ls .05em
宿泊　レストラン・バー　宴会・ウエディング
Table Header (th)
Noto Serif JP / 14px / 600
lh 2.0 / ls .05em / #856c34
営業時間
Caption
ヒラギノ角ゴ Pro / 14px / 400
lh 2.5 / ls normal
※ 料金には消費税およびサービス料が含まれます
Micro
ヒラギノ角ゴ Pro / 12px / 400
lh 1.4 / ls .12em / #856c34
IMPERIAL CLUB
Footer Small
ヒラギノ角ゴ Pro / 10px / 400
lh 1.5 / ls .16em / #cccccc
法定公告　プライバシーポリシー　利用規約

「日本語の見出しは 0.05em、英字の飾りは 0.2em」という二層構造が帝国ホテルの字間設計。palt は 0 件で、字面の調整は letter-spacing だけで行う。

03 / Restaurant
RESTAURANTS

レストラン情報の組版

FRENCH

レ セゾン

季節ごとに表情を変える食材を、正統なフランス料理の技法で仕立てます。開業以来受け継いできた味わいと、いまの感覚を重ねた一皿をお楽しみください。

営業時間ランチ 11:30〜14:30（L.O. 14:00）／ ディナー 17:30〜21:30（L.O. 20:30）
定休日不定休
席数48席（個室 2室）
ドレスコードスマートカジュアル

テーブルの th は Noto Serif JP 14px / 600 / #856c34。罫線は 1px solid #e6e6e6。

04 / Buttons
BUTTONS

主要 CTA は角丸なし

ラベルのフォントが明朝であることが、このサイトの格の源。

詳しく見る ご予約 条件を変更する 満室 TOP

Primary は padding: 14px 20px / 14px / 600 / letter-spacing: .05em、ホバーで #755f2d。
Large は 19px 32px / 16px / 600。スクロールトップだけ letter-spacing: .2em。

05 / Cards
DESTINATION

Cards

枠も角丸も影も持たない。写真とテキストを 24px の余白で並べるだけ。

帝国ホテル 東京

日比谷。1890年の開業から続く、日本の迎賓館。

上高地帝国ホテル

日本初の本格的な山岳リゾートホテル。

帝国ホテル 大阪

大川のほとりに建つ、水辺のグランドホテル。

06 / Forms
RESERVATION

Forms

入力欄も角丸なし。枠は 1px solid #7a7a7a、フォーカスで金茶に変わる。

1室あたりの人数をご入力ください

フォーカスリングは #856c34

メールアドレスの形式が正しくありません

セレクトも同じ枠・角丸なし

Success — ご予約を承りました
Danger — 入力に誤りがあります
Warning — 残りわずかです
Info — 館内改装のお知らせ
07 / Elevation
ELEVATION

Depth & Elevation

影の色は黒ではなく #1a150a（わずかに温かい黒）を 10% で使う。

Level 0 — なしbox-shadow: none
Level 1 — 内影（最多12件）inset 0 20px 20px -20px rgba(26,21,10,.1)
Level 2 — 固定ヘッダー0 -2px 20px rgba(26,21,10,.1)
Level 3 — 浮くパネル1px 2px 8px rgba(61,63,69,.24)

宣言されている --BOX_SHADOW: 0 5px 6px #7d7d7d33 は実測 0 件。トークンから拾って実装しないこと。

08 / Layout
LAYOUT

Layout

外枠 1440px、本文コンテンツ 984px。セクション間は 64px、入れ子は 24px。

max-width: 1440px（外枠）
max-width: 984px（本文）
1 / 3
2 / 3
3 / 3
TokenValue由来 / 用途
XS4px—
S10px入力欄の縦 padding
M14pxボタンの縦 padding
L24px--SIZE_NESTED_MODULE_MARGIN
XL32px大型ボタンの左右 padding
XXL64px--SIZE_MODULE_MARGIN（セクション間）
Z-IndexValue用途
Modal500モーダル
Navigation490グローバルナビ
Dialog480ダイアログ
Popover470ポップオーバー
Overlay / Sticky460オーバーレイ・固定要素
Modules100通常のモジュール
BreakpointWidth説明
Mobile≤ 767px1カラム。下部タブナビゲーション
Tablet768–1023px2カラム
Laptop1024–1259px3カラム
Desktop≥ 1260pxmax-width 1440px / 本文 984px