熊本県熊本地方で発生した地震に伴う配送への影響について →
水出し煎茶と、宇治の夏

Colors

面色は #333333 と生成り #fffef8 だけ。差し色はランキングバッジの金茶のみ。

墨 / Sumi
#333333
--color-foreground / --color-button。文字・ボタン面・罫のすべて
生成り / Kinari
#fffef8
scheme-3。商品一覧・商品詳細の地色
Paper
#ffffff
scheme-1。トップ・ヘッダーの地色
金茶 / Kincha
#c7b385
ランキングバッジのみ。サイト唯一の差し色
Text Secondary
rgba(51,51,51,.75)
補助テキスト・ナビの下層項目・フォームラベル
Nav Parent
#666666
グローバルナビの親項目
Panel
#f8f8f8
お知らせブロックの面
Border
#dddddd
一般の罫。カードは rgba(51,51,51,.1)、メディアは .05

色スキームは 3 つだけ。1 と 3 の違いは地色(#ffffff#fffef8)のみ。

scheme-1
fg #333333 / bg #ffffff
既定。トップ・ヘッダー
scheme-3
fg #333333 / bg #fffef8
商品一覧・商品詳細
scheme-4
fg #ffffff / bg #000000
反転ブロック(写真上の帯)

実サイトに現れる緑(#0f571e / #72a95a)と #222222 は Shopify アプリの既定色で、テーマには存在しない。「茶商だから緑がブランド色」と推測せず、ボタンは墨 #333333 を使う。

Typography

明朝 Light(300) が既定。自己ホストは 300 / 500 の 2 ウェイトだけ。階層は太さではなく「大きさ + 字間」で作る。行間は本文 1.8、見出し 1.3font-feature-settingsnormal(palt を使わない)。1rem = 10px

28px / w300 / lh 1.3
ls 14px = 0.5em
季節を味わう
18px / w300 / lh 1.3
ls 18px = 1.0em
中村銘茶
28px / w300 / lh 1.8
ls 4.2px = 0.15em
(生成り面の見出し)
おすすめ商品
24px / w300 / lh 1.3
ls 0.6px
I n s t a g r a m
16px / w300 / lh 1.3
ls 0.6px
濃いめの抹茶チョコレート
15px / w300 / lh 1.8
ls 0.6px = 0.04em
(body の既定)
宇治の地で茶を扱ってきた百七十年のあいだに、私たちが学んだことはひとつです。茶は、飲む人の時間に合わせて姿を変える——そのために、摘む時期も、火の入れ方も、包み方も変えていきます。
14px / w300 / lh 1.3
ls 2px = 0.143em
お買いもの
13px / w300 / lh 1.3
ls 1px = 0.077em
2026.07.30 お知らせ(オンラインストア)
16px / w500 / lh 1.25
ls 0.6px
再入荷通知を受け取る
30px / w500 / lh 1.2
(原典は 700 指定 → 合成 / 500)
0120-137-555
12px / w300 / lh 1.8
ls 0.6px

0.5em 以上の字間は最後の 1 文字の後ろにもアキが付く。中央揃えにするときは margin-right: -0.5em1.0em なら -1em)で補正する。このプレビューの見出しはその補正を入れている。

おすすめ商品

地色は生成り #fffef8(scheme-3)。カードは罫なし・radius 0・影なし・テキスト左揃え。グリッドのガターは 8px。

すべてを表示する

お茶のはなし

中村銘茶

宇治の茶畑は、朝の霧が引いていく時間がいちばん美しい。摘み手の背より低く仕立てられた木の列が、斜面に沿ってゆるやかに折れていくのを、初代はきっと同じ角度から見ていたはずです。

茶を売るという仕事は、畑と湯呑みのあいだに立つことだと思っています。畑の側には気候があり、土があり、摘む手があります。湯呑みの側には、その日の気分と、隣に座っている人がいます。どちらにも寄りすぎないところに、商いの居場所があります。

だから私たちは、味の説明を長く書きません。かわりに、湯の温度と待つ時間だけをお伝えします。あとは、飲む方の側で決まることです。

Buttons

radius は 0--buttons-radius: 0px)、影なし--buttons-shadow-opacity: 0.0)。ウェイトは 300。

写真の上(scheme-4 相当)。

詳しく見る →

角丸を持つのは例外の 3 つだけ。検索フィールド(100px)・ランキングバッジ(50%)・バリアントピル(40px)。

1

お知らせ

Forms

Default

全角でご入力ください

Focus

罫が墨に変わる(radius 0・影なし)

Error

郵便番号を 7 桁でご入力ください

入力欄は 16px / w400(iOS の自動ズーム回避)、罫 1px solid rgba(51,51,51,.55)、radius 0。ラベルは 16px / w300 / rgba(51,51,51,.75) / ls 1px

Elevation

テーマ変数レベルで影を全部切っている--buttons- / --inputs- / --media- / --product-card- / --popup- / --drawer- / --variant-pills-shadow-opacity がすべて 0.0)。階層は罫の濃度差と地色の差で作る。

media
1px rgba(51,51,51,.05)
card / popup
1px rgba(51,51,51,.1)
rule
1px #dddddd
地色の差
#ffffff ↔ #fffef8

実サイトで観測される影(0 0 25px rgba(0,0,0,.2) 等)はすべて第三者アプリが持ち込んだもの。テーマの設計は影ゼロ。

Layout

コンテナは --page-width: 130rem = 1300pxセクション間の隙間は 0--spacing-sections-desktop: 0px)で、余白は各ブロックの内側で取る。

4px — グリッド(モバイル)
8px — グリッド(デスクトップ)
10px — ヘッダーの左右
15px — 入力欄
20px — お知らせの行
40px — ナビの項目間
72px — フッターの左右
120px — フッターの上

角丸。全域 0。例外は 100px(検索)/ 50%(ランキング)/ 40px(バリアントピル・バッジ)。

ブレークポイントは Shopify Dawn 由来の min-width: 750px / 990px が主軸。独自追加(768 / 960 / 600 / 480 / 400px)が併存するので、移植時は 750 / 990 に寄せるのが素直。h1 のみ clamp(56px, 14vw, 72px) の流体で、他は段切り。本文 15px は変えない。