地は純白 #ffffff、テキストとCTAはインクの黒 #231815。純黒 #000000 は使わない。#231815 は日本のDTPでスミベタに使われる標準値そのもので、焙煎豆の色でもある。有彩色はクリーム #fcf6e9 だけ。
和文は Noto Sans JP、欧文ラベルは Roboto。字間は letter-spacing で開かず palt で詰めて作り、欧文だけ 0.1〜0.12em に開く。行間は見出し 1.4〜1.5 → 本文 2.0 → リード文 2.5。サイズと太さが反比例するのがこのサイトの階層設計。
丸山珈琲は美味しさで癒しと幸せを創る会社です
1991 年、長野県軽井沢に小さな喫茶店として始まりました。いま私たちがしていることは、当時とほとんど変わりません。美味しいコーヒーを探し、焙煎し、淹れる。それだけです。
バイヤーは年間を通じて産地を回ります。エチオピア、ケニア、コロンビア、ボリビア、パナマ。農園主と直接話し、その年のロットを自分たちの舌で選んで買い付ける。品評会を通さない取引だからこそ、生産者に正当な対価を返せます。
本文の行間は 2.0、リード文だけ 2.5 まで開きます。字間は letter-spacing ではなく palt で詰めて揃えます。私たちの取り組みを見る。
画像 → 焙煎度バッジ(#4e4e4e / radius 4px)→ 商品名 15px/500 → フレーバータグ(クリーム面 / radius 0)→ 価格。カードは枠線も影も持たない。
主要 CTA は border-radius 16000px の完全ピル + 3px solid #231815。面と枠が同色なので、hover で面を白に抜くと枠だけが残る。暗い面の上では矩形アウトラインに切り替える。中間の角丸(8px 等)は使わない。
デフォルト / フォーカス / エラーの3状態。radius 4px(バッジに揃える)、罫は #dddddd、フォーカスは #231815。入力中も palt を掛けて字面を揃える。
box-shadow の実測は 0 件。前後関係は面色の 3 段(純白 → 暖白 #f7f6f4 → 黒 #262626)で作り、唯一の「厚み」は CTA の 3px の枠だけ。
4 / 8 / 12 / 20 / 40 / 80 / 120px。コンテナは最大 1200px、読み物カラムは 720px。1セクション1メッセージで、セクション間は 80〜120px 空ける。