Biotop
menu
Tokyo
Osaka
Fukuoka
Kobe
Sapporo
-News
01 / Colors

Color Palette

有彩色はディープグリーン #354443 ただ一色。それ以外は白・黒・グレーに絞り、写真の色を邪魔しない。フッターだけはブランドグリーンを 15% 敷いた淡いグレーグリーンになる。

Brand
Biotop Green
#354443
唯一のブランドカラー。特集パネルのベタ地
Green Tint 15%
rgba(53,68,67,.15)
フッター地 ≒ #e1e3e3
Neutral
White
#ffffff
ページ背景 / 写真上のテキスト
Panel Grey
#eaeaea
二次パネルの地。黒文字と組む
Black
#000000
白・グレー地の本文テキスト

02 / Typography — 実測値

Typography

原典は din-2014, 游ゴシック, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif。din-2014 は Adobe Fonts のため、本プレビューでは DIN 系グロテスクの Barlow(Google Fonts)で代替している。font-feature-settings: "palt"letter-spacing: 0.05em がグローバル適用。ウェイトは 300 / 400 の二択で、Bold は使わない。

Biotop People
Display / Feature Title — 72px(≒5vw)/ 400 / lh 1.0 / ls 0.045em特集大見出し
Biotop
Display Light — 60px / 300 / lh 1.0 / ls 0.045em
Pick Up — 今季のピックアップ
Heading 1 — 29px / 300 / lh 1.2 / ls 0.045em
News — 新着のお知らせ
Heading 2 — 21px / 300 / lh 1.2 / ls 0.045em
All Topics Tokyo
Heading 3 / Nav — 19.9px / 400 / lh 1.0 / ls 0.033emナビ見出し
(LATEST POST: 14.07.2026) — リード・キャプション
Lead / Caption — 18px / 300 / lh 1.6 / ls 0.04em / 色 #354443
BIOTOP はアパレル、フラワーショップ、カフェ、ギャラリーが同居する複合ショップです。異なる文化が一つの場所で混ざり合う、その関係性そのものを店名に置きました。ABCabc 0123
Body / Base — 13px / 400 / lh 1.8 / ls 0.05em / palt本文
Event
Tag / Pill — 13px / 400 / lh 1.0 / ls 0.05em / radius 1.5em
Latest Post: 20.05.2026 No.51 Mari Okamoto
Small / Meta — 9.1px / 400 / lh 1.0–1.2 / ls 0.071em

03 / Article — フルブリード・パネル

Feature Panels

写真・グリーン・グレーのパネルを gutter 0 で隙間なく敷き詰める。max-width は設けず、面の色と写真の切り替わりだけが区切りになる。テキストは白抜きの大文字英字+ドット区切りの日付。

Biotop
People
20.05.2026
No.51
Mari Okamoto
Flower
12.07.2026
No.08
Zero Two Three
Biotop
Side-B
28.10.2024
No.2
Hisashi Ohta
Biotop
Online
14.07.2026
Shop All
Store
03b / Product

Web Store

商品も同じ作法。radius 0 の大判ビジュアルを隙間なく並べ、その下にブランド名(9.1px 大文字)、商品名(15px / Light)、価格(13px)を添える。

Image
Birkenstock for Biotop
Kyoto Suede Sandal
¥27,500
Image
Biotop Exclusive
Linen Wide Shirt
¥34,100
Image
Keep Green Biotop
Recycled Wool Knit
¥29,700
Image
Bw Biotop
Garment Dyed Trousers
¥38,500

04 / Buttons

Buttons

塗りつぶしボタンは存在しない。CTA は「透明地+1px 白枠・radius 1.5em の完全なピルタグ」か、パネル全体をリンクにするかの二択。

Event
Pill Tag — 透明地 + 1px solid #ffffff / radius 1.5em / 13px
#BIRKENSTOCK for BIOTOP
Pill Tag (L) — 19.6px / radius 27.5px
Online Store
Panel Link — #354443 地・白文字・radius 0・padding 30px
Shop All
Panel Link (grey) — #eaeaea 地・黒文字

05 / Cards

Cards

カードは影も枠も持たない。地色(グリーン / グレー / 写真)だけで面を分け、padding 20px 30px 30px の中にテキストを置く。

Green
#354443 地・白文字
radius 0 / shadow none
Grey
#eaeaea 地・黒文字
radius 0 / shadow none
Photo
写真全面・白抜き文字

06 / Forms

Forms

実サイトのフォームは検索窓のみでブラウザ既定のまま(font-family: Arial)。以下は BIOTOP のトーンに沿った推奨実装 — 角丸なし、枠は持たず下線 1 本、フォーカスは下線を太らせる。

デフォルト — border-bottom: 1px solid #354443 / radius 0
フォーカス — border-bottom: 2px solid #354443(リングは使わない)
エラー — border-bottom: 2px solid #b23b32(実サイトに定義なし。最小限の差し色)

07 / Elevation

Depth & Elevation

実測でも全要素が box-shadow: none。影を一切使わず、面の色と写真の明度差だけで階層をつくる完全フラット設計。オーバーレイメニューだけは全面の暗幕で前後を分ける。

Level 0 — Flat
box-shadow: none(全コンポーネントの基本)
Level 1 — Tone
#eaeaea のベタ地で面を起こす(影は使わない)
Level 2 — Brand
#354443 のベタ地。最前面の特集パネル
Overlay
rgba(0,0,0,0.4–0.85) の全面暗幕(メニュー)

08 / Layout

Layout & Spacing

基本単位は本文サイズ 13px とその倍数。パネル内側は 30px、ヘッダー左右は 35px。コンテナに max-width は設けず、gutter 0 の不等分割グリッドをフルブリードで敷く。

6.5
13
20
26
30
35
Grid — 不等分割 / gutter 0 / full bleed
2fr
1fr
1fr