有彩色はディープグリーン #354443 ただ一色。それ以外は白・黒・グレーに絞り、写真の色を邪魔しない。フッターだけはブランドグリーンを 15% 敷いた淡いグレーグリーンになる。
原典は 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 は使わない。
写真・グリーン・グレーのパネルを gutter 0 で隙間なく敷き詰める。max-width は設けず、面の色と写真の切り替わりだけが区切りになる。テキストは白抜きの大文字英字+ドット区切りの日付。
商品も同じ作法。radius 0 の大判ビジュアルを隙間なく並べ、その下にブランド名(9.1px 大文字)、商品名(15px / Light)、価格(13px)を添える。
塗りつぶしボタンは存在しない。CTA は「透明地+1px 白枠・radius 1.5em の完全なピルタグ」か、パネル全体をリンクにするかの二択。
カードは影も枠も持たない。地色(グリーン / グレー / 写真)だけで面を分け、padding 20px 30px 30px の中にテキストを置く。
実サイトのフォームは検索窓のみでブラウザ既定のまま(font-family: Arial)。以下は BIOTOP のトーンに沿った推奨実装 — 角丸なし、枠は持たず下線 1 本、フォーカスは下線を太らせる。
実測でも全要素が box-shadow: none。影を一切使わず、面の色と写真の明度差だけで階層をつくる完全フラット設計。オーバーレイメニューだけは全面の暗幕で前後を分ける。
基本単位は本文サイズ 13px とその倍数。パネル内側は 30px、ヘッダー左右は 35px。コンテナに max-width は設けず、gutter 0 の不等分割グリッドをフルブリードで敷く。