SORANO HOTEL は、東京立川に誕生した新発想のホテルです。
コンセプトは、心にも体にも健やかであること「ウェルビーイング」。
トークンには金・茶・ベージュ・赤・橙まで並んでいるが、DOM を 1 周して数えると描画されるのは
#1a1a1a(832 要素)・#ffffff(206)・#5988c6(4)だけ。
面色も #274875(9)と #5988c6(21)に限られる。
紺は「押せるもの」、水色は「分類」——役割がはっきり分かれている。
宣言 ≠ 実装。CSS 変数の一覧を見て金や茶を配色に足すと、実サイトと別物になる。 使ってよいのは上段の8色だけ。
可視テキスト 292 要素のうち 194 要素が明朝(Noto Serif JP)。ゴシックは 18 要素しかなく、ナビ・ラベル・日付など「読ませない文字」に限られる。
字間は 0.1em を body に 1 回だけ書いて 1.4px として 736 要素に継承させ、ヒーロー見出しだけ 0.3em まで開く。
font-feature-settings: "palt" は可視 1046 要素中 1045 要素——実質グローバル。
0.3em を本文に広げないこと。ヒーローの 1 見出しだけに使う値で、長文に当てると読めなくなる。
また font-weight: 350 を 400 に丸めないこと——このサイトの「薄さ」はこの非整数ウェイトから来ている。
border-radius: 0 が可視 1008 要素、box-shadow: none が 1043 要素。
丸いのは円形の装飾(100%)35 個だけ。写真とカードは矩形のまま並べる。
塗りボタンはすべて #274875。フッターの導線だけ rgba(0,0,0,.12) の細枠アウトライン。
固定の予約ボタンは和文 14px / 0.05em と 欧文 Cardo 10px / 0.1em の2段組になっている。
既定・フォーカス・エラーの3状態。角丸は付けず、枠は rgba(0,0,0,.25)。
可視 1046 要素のうち 1043 要素が box-shadow: none。残る3つは値が透明のものと、外部チャットウィジェット由来のもの。
rgba(0,0,0,.12) / .06 / .25)、面(#f9f8f6 / #eeebe7 / #f4f2ef)、
そして100〜220px の余白で表す。カードやボタンに影を足すと、このサイトの静けさが失われる。
コンテナは 1860px(実測 14 箇所)、左右の余白は 6.25vw。
html { font-size: 10px } なので、--space-section-lg: 22rem は 220px を意味する。
ブレークポイントは max-width 方式。(max-width: 767px) が 499 箇所、(max-width: 1024px) が 493 箇所。
ホバー効果は (hover: hover) and (pointer: fine) で囲み、アニメーションは not (prefers-reduced-motion) で囲む。