こちらをお探しですか? オンラインショップ GOOD NATURE HOTEL ✕
信じられるものだけを、美味しく、楽しく。
人も地球も元気にする
“GOOD NATURE”なモノ・コトが集まる場所
01 / Colors

COLORS

彩度を持つのはブランドグリーン 1 色。黒は #000000 ではなく赤みのある #221715。

GOOD NATURE Green
#009b4c
主 CTA・アウトラインの枠・丸アイコン。CSS 13 回
Green Dark
#009249
ホバー・プレスの暗い対。CSS 12 回
Ink
#221715
本文・見出し・パンくず・ハンバーガー。赤みを持つ黒
Utility Bar
#f2f2f2
最上部の「こちらをお探しですか?」帯
Table Head
#efefef
フロアガイドの行見出し
Chip
rgba(226,226,226,.5)
カテゴリチップ。半透明なので写真の上でも使える
Border
#969696
セレクトボックス・アウトラインの枠
Muted
#9a9a9a
ナビの非選択・補助テキスト
⚠️ CSS 上で緑として最多の #40b87c(23 回)は 1 箇所も描画されていない。 WordPress プラグインの既定値なので使わない。同じく #dee5ec は WOVN 言語切替ウィジェット、#d22d3b はミシュランのロゴ、 #27313b / #bf2318 / #0970af などはブロックエディタの既定パレット(未使用)。

TYPOGRAPHY

欧文は Lato に 0.16em、和文は游ゴシック Medium に 0.04〜0.12em。本文は normal。

Section H2(英字)
Lato / 48px / 700
lh 1.33 / ls 0.16em
TOPICS
Page H2(和文)
42px / 700
lh 1.5 / ls 0.12em
営業時間・フロアガイド
Date(大きく見せる)
Lato / 26px / 700
lh 1.81 / ls 0.05em
2026.06.18
Hero Lead
22px / 500
lh 1.5 / ls 0.1em
人も地球も元気にする場所
Card Title
18px / 700
lh 1.67 / ls normal
街中のビルに宿る里山を体感「中庭グリーンウォールウォッチング」
Body
16px / 500
lh 1.5 / ls normal
オーガニックや自然由来にこだわった食材、コスメ、そして宿泊。京都・河原町の一棟に、心地よい暮らしのための選択肢を集めました。
Table Cell
16px / 500 / lh 1.81
1F / GOOD NATURE MARKET / 10:00–20:00
Nav(英字)
Lato / 13px / 700
lh 2.38 / ls 0.16em
MARKET RESTAURANT HOTEL
Small
13px / 500 / lh 1.69
営業時間・定休日は店舗により異なります
Meta(英字)
Lato / 12px / 400 / ls 0.06em
2026.08.17 EXPERIENCE
Caption(英字)
Lato / 10px / 400 / ls 0.05em
© BIOSTYLE Co.,Ltd.

本文の font-weight は 500。400 に落とすと Windows で游ゴシック Regular が当たり極端に細くなる。 font-feature-settings の宣言は 0 個(= palt を使わない)で、字間はすべて letter-spacing で作る。

03 / Cards — 4 列グリッド

TOPICS

「画像 → 日付(Lato・ピリオド区切り)→ タイトル → チップ」。枠も影も付けない。

2026.06.18
街中のビルに宿る里山を体感「中庭グリーンウォールウォッチング」
experience
2026.06.18
植物園のヤシの葉で編む「小さなかご作り」
experience
2026.04.02
ベジフルバッグ <8/15>
event
2026.07.03
7/18(土)<いととめのぼたもち>販売方法について
shop

チップは rgba(226,226,226,.5) の半透明グレー、border-radius: 0、13px / 700 / padding: 2px 12px。カテゴリは #MARKET のようにハッシュタグ表記でも使う。

BUTTONS

全部 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。写真の上に置くお知らせ枠。

05 / Forms

FORMS

Default / Focus / Error。角丸は付けない。

Default: 1px solid #969696 / radius 0
Focus: outline: 2px solid #009b4c
電話番号を正しく入力してください

FLOOR GUIDE

フロア店舗営業時間
1FGOOD NATURE MARKET10:00 – 20:00
2FRESTAURANT & CAFE11:00 – 22:00
3FCOSME / NEMOHAMO・RAU11:00 – 20:00
4–9FGOOD NATURE HOTEL KYOTOチェックイン 15:00

セルは 16px / 500 / line-height: 29px(1.81)。行見出しの面は #efefef。

07 / Elevation

ELEVATION

影はほとんど使わない。階層はグリッドと余白で作る。

none(既定)カード・ボタン・チップはすべて影なし
浮くパネル0 2px 4px 0 rgba(0,0,0,.2)(CSS 8 回)

ページ全体でランタイムに描画されている影は 2 種類だけ。カードは余白とグリッドだけで分離する。

LAYOUT

外枠 1440px、内枠 1288px(左右 76px パディング)、カードは 4 列。

外枠 1440px / 内枠 1288px(左右 76px)
288px
288px
288px
288px
用途値備考
外枠1440pxmax-width。実測 18 要素
内枠1288px左右 76px パディング
2 カラム分割720pxヒーローの 2×2 タイル
ハンバーガー76 × 76px#221715 の正方形・角丸なし
ユーティリティバー高さ 56px#f2f2f2

Radius Scale

値用途
0ボタン・チップ・カード・入力欄・バナー — 全部
50%丸アイコン(ユーティリティバーのグリーンの丸)のみ

1 箇所でも角丸を入れると、施設の直角の印象が崩れる。