六 月
30
菖蒲華
あやめはなさく
料理人の知恵と技を、家庭の食卓へ。
季節のうつろいとともに、ていねいな出汁の一杯を。

01 / COLORS

色彩

萱色(オリーブ)と濃褐を軸に、コンテンツ面は黒文字×白地。区分は金茶、限定強調は朱を最小限あてる。

Brand / 地
萱色 Moss
#5b5d22
ブランド地
濃褐 Brown
#1c130a
ヴェール・塗り
White
#ffffff
コンテンツ地
Accent / Text
金茶 Khaki Gold
#8f7e4b
区分ラベル
朱 Vermilion
#9f0e14
限定バッジ
Ink
#000000
本文・見出し
Border Gray
#827e7a
CTA 枠
Muted
#bbbbbb
非アクティブ

02 / TYPOGRAPHY — 実測値

組版

原典は本文・見出し・ナビすべて筑紫明朝(FOT-筑紫明朝 Pr6)。日付の大数字のみ Baskerville、機能ラベルのみ游ゴシック。本プレビューは代替の Shippori Mincho / Libre Baskerville / Zen Kaku Gothic New で表示。font-feature-settings: normal(palt なし)。

30
Hero Date — Baskerville / 160px / lh 1.0(白 #fff)ヒーロー
茅乃舎
H1 — 明朝 32px / 400 / lh 1.7 / ls 0.02em
定番のだし/お知らせ
H2 — 明朝 M 24px / 400 / lh 1.5 / ls normal
菖蒲華
季節語(候)— 明朝 24px / 400 / ls 7.2px (0.3em)
本文テキスト — 私たち茅乃舎は、料理人の知恵と技を家庭の食卓にお届けします。素材を活かし、ていねいにとった出汁の一杯を、季節のうつろいとともに。ABCabc 0123
Body — 明朝 16px / 400 / lh 1.7 (27.2px) / ls 0.32px (0.02em)
トップページ オンラインショップ お問い合わせ
Nav — 明朝 M 18px / 400 / lh 1.7 / ls 0.32px (0.02em)
イベント  店舗限定
Label(区分・ゴシック)— 游ゴシック 12px / 400 / lh 2.0(金茶 #8f7e4b / 朱 #9f0e14)

03 / PRODUCTS — 写真主役のグリッド

商品のご紹介

写真を大きく置き、その下に明朝の品名と区分ラベル(金茶・朱)を添える。角丸は持たず、写真と余白・直線で面を分ける。

茅乃舎だし
定番のだし
茅乃舎だし
8g×30袋
野菜だし
定番のだし
野菜だし
8g×24袋
茅乃舎の和食
店舗限定
煮干しだし
8g×18袋
久原本家
地域限定
茅乃舎 黄金比だし
9g×20袋

04 / BUTTONS

ボタン

角丸なし(radius 0)。ヒーローは濃褐ヴェール地+細枠の明朝、コンテンツ面は黒地+白文字。

茅乃舎が大切にしていること
Hero Veil(#1c130a/0.5+枠 #827e7a)
もっと見る
Content Dark(#000 地・白文字)
オンラインショップへ
Moss(萱色 #5b5d22)
詳しく見る
Ghost(白地+枠 #827e7a)

05 / FORMS

フォーム

角丸なし。フォーカスは枠 #1c130a(濃褐)+薄いリング。エラーは朱 #9f0e14。

デフォルト — border: #827e7a, radius: 0
フォーカス — border: #1c130a + 薄いリング
エラー — border: #9f0e14(朱)

06 / ELEVATION

奥行き

影はほぼ使わず、写真・濃褐ヴェール・余白・直線で階層をつくる。影を使う場合も濃褐ベースの墨色にする。

Level 0: Flat
影なし、写真と余白で分ける(基本)
Level 1
0 1px 3px rgba(28,19,10,0.10)
Level 2
0 8px 24px rgba(28,19,10,0.16)

07 / LAYOUT — Spacing

余白

大きな写真と広い余白で「間」をつくる。セクション間は 80〜120px の縦余白。

8
16
24
40
64
96
120