彩度を持つのはブランドグリーン 1 色。黒は #000000 ではなく赤みのある #221715。
#40b87c(23 回)は 1 箇所も描画されていない。
WordPress プラグインの既定値なので使わない。同じく #dee5ec は WOVN 言語切替ウィジェット、#d22d3b はミシュランのロゴ、
#27313b / #bf2318 / #0970af などはブロックエディタの既定パレット(未使用)。
欧文は Lato に 0.16em、和文は游ゴシック Medium に 0.04〜0.12em。本文は normal。
本文の font-weight は 500。400 に落とすと Windows で游ゴシック Regular が当たり極端に細くなる。
font-feature-settings の宣言は 0 個(= palt を使わない)で、字間はすべて letter-spacing で作る。
「画像 → 日付(Lato・ピリオド区切り)→ タイトル → チップ」。枠も影も付けない。
チップは rgba(226,226,226,.5) の半透明グレー、border-radius: 0、13px / 700 / padding: 2px 12px。カテゴリは #MARKET のようにハッシュタグ表記でも使う。
全部 border-radius: 0。面と同色の 2px solid 枠を持たせ、ホバーで面を透明にすればアウトラインへ変わる。
① プライマリ #009b4c / 白文字 / 2px solid #009b4c / radius 0 / 14px 700 / ls 0.04em / padding 16px 16px 15px(小: 11px 16px/大: 16px・22px 10px)
② アウトライン(写真・暗い面の上)transparent / 白文字 / 2px solid #009b4c / radius 0 / 13px 700
③ ダークバー #221715 / 白文字 / radius 0 / 14px 500 / padding 23px 36px 20px。写真の上に置くお知らせ枠。
Default / Focus / Error。角丸は付けない。
1px solid #969696 / radius 0outline: 2px solid #009b4c| フロア | 店舗 | 営業時間 |
|---|---|---|
| 1F | GOOD NATURE MARKET | 10:00 – 20:00 |
| 2F | RESTAURANT & CAFE | 11:00 – 22:00 |
| 3F | COSME / NEMOHAMO・RAU | 11:00 – 20:00 |
| 4–9F | GOOD NATURE HOTEL KYOTO | チェックイン 15:00 |
セルは 16px / 500 / line-height: 29px(1.81)。行見出しの面は #efefef。
影はほとんど使わない。階層はグリッドと余白で作る。
カード・ボタン・チップはすべて影なし0 2px 4px 0 rgba(0,0,0,.2)(CSS 8 回)ページ全体でランタイムに描画されている影は 2 種類だけ。カードは余白とグリッドだけで分離する。
外枠 1440px、内枠 1288px(左右 76px パディング)、カードは 4 列。
| 用途 | 値 | 備考 |
|---|---|---|
| 外枠 | 1440px | max-width。実測 18 要素 |
| 内枠 | 1288px | 左右 76px パディング |
| 2 カラム分割 | 720px | ヒーローの 2×2 タイル |
| ハンバーガー | 76 × 76px | #221715 の正方形・角丸なし |
| ユーティリティバー | 高さ 56px | #f2f2f2 |
| 値 | 用途 |
|---|---|
| 0 | ボタン・チップ・カード・入力欄・バナー — 全部 |
| 50% | 丸アイコン(ユーティリティバーのグリーンの丸)のみ |
1 箇所でも角丸を入れると、施設の直角の印象が崩れる。