Hand Drip Japanese Tea

Tokyo Saryo

世界初のハンドドリップ日本茶専門店。三軒茶屋の小さな茶寮で、煎茶を一杯ずつ丁寧に淹れる。DESIGN.md から抽出したデザイントークンのカタログ — クリームの余白とくすんだゴールド、Cardo セリフと和文ゴシックを軸にした、静かな editorial。computed style 実測値(2026-06-28)に基づく。

予約の日程をみる DESIGN.md を読む

01 / Colors

Color Palette

Primary / Brand
Cream
#f3f0e0
ページ背景
Brass Gold
#b3873d
アクセント・小見出し
CTA Slate
#556677
CTA ボタン地
CTA Border
#445566
CTA 枠
Neutral / Text
Text Primary
#333333
本文・見出し
Text Strong
#222222
濃い本文
Text Muted
#555555
補助・キャプション
Ink Base
#000000
リンク・ナビ基本
Surface Cool
#f4f6f8
モーダル・告知面
Surface Grey
#efefef
薄グレー面
Semantic(最小限)
Link
#3388bb
リンク
Error(推奨)
#c0392b
エラー・必須

02 / Typography — 実測値

Typography

原典は Latin に Cardo(セリフ)+ UI に Source Sans Pro、和文にヒラギノ角ゴ ProN(ゴシック)。本プレビューは Cardo + Source Sans 3 をそのまま、和文は Noto Sans JP で代替して表示。

Hand Drip Style — 一服の静けさ
Heading 1 (H2) — 44px / 400 / line-height: 1.2 / ls normalsection
煎茶を、一杯ずつ。
Lead / Quote — 35.2px / 400 / line-height: 1.2
三軒茶屋の小さな茶寮から。
Sub-Lead — 26.4px / 400 / line-height: 1.2
Heading 3 — お茶の淹れ方について
Heading 3 — 24px / 400 / line-height: 1.45
Heading 4 — Single Origin Sencha
Heading 4 (Accent) — 20px / 400 / color: #b3873d ゴールド
本文テキスト — 東京茶寮では、淹れ手が一杯ずつ丁寧にハンドドリップで煎茶を抽出します。一煎目、二煎目、三煎目と移ろう香りと味わいを、静かな時間のなかで楽しんでいただく喫茶体験です。ABCabc 123
Body — 14px / 400 / line-height: 1.45 / ls normal
ACCESS — 三軒茶屋駅 南口より徒歩 5 分
Label (Gold) — 14px / 400 / color: #b3873d
Information — 営業時間・ご予約に関するお知らせ
Caption — 12px / 400 / color: #222222

Journal

Tokyo Saryo Journal — 2026.06.28

ハンドドリップで淹れる、日本茶という選択。

コーヒーのように、日本茶もまた一杯ずつ淹れられる。東京茶寮は、その当たり前を静かに問い直す場所です。

三軒茶屋の路地裏にある小さなカウンター。ここでは淹れ手が、産地や品種の異なる煎茶を、専用のドリッパーで一杯ずつ抽出します。湯の温度、注ぐ速度、待つ時間 — そのすべてがお茶の表情を変えていきます。予約ページから、二種の煎茶を飲み比べる「ハンドドリップ煎茶セット」をお選びいただけます。

一煎目から三煎目へ、移ろう味わい。

同じ茶葉でも、一煎目は旨味と甘み、二煎目は渋みと香り、三煎目はすっきりとした後味へと変化します。淹れ手の所作を眺めながら、静かに移ろう味の階調をお楽しみください。器も、淹れ方も、すべてはお茶のために設えられています。


04 / Tea — ギャラリーグリッド

Single Origin Sencha

煎茶 / Yabukita
Shizuoka
やぶきた 煎茶
¥ 1,400 / 50g
煎茶 / Saemidori
Kagoshima
さえみどり 煎茶
¥ 1,600 / 50g
玉露 / Gyokuro
Kyoto
玉露 宇治
¥ 2,200 / 50g
焙じ茶 / Hojicha
Original
深煎り 焙じ茶
¥ 1,100 / 80g

05 / Buttons

Buttons

予約の日程をみる
Primary(#556677 / radius 0)
もっと見る
Outline(accent 枠 / radius 0)
Secondary(#efefef)

06 / Forms

Forms

デフォルト — border: #d8d3bf, radius: 0
フォーカス — border: #b3873d(ゴールド)
エラー — border: #c0392b

07 / Elevation

Depth & Elevation

東京茶寮はほぼフラット。クリーム地と明面の色差で階層を表現する。

Level 0: Flat
影なし、ボーダーのみ(基本)
Level 1
0 1px 2px rgba(0,0,0,0.06)
Level 2
0 8px 24px rgba(0,0,0,0.10)

08 / Layout — Spacing Scale

Spacing

XS 4
S 8
M 16
L 24
XL 40
XXL 80