Hand Drip Japanese Tea

Tokyo Saryo

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing — lorem ipsum dolor sit amet consectetur, Cardo lorem ipsum dolor sit amet consectetur, lorem editorial. computed style lorem(2026-06-28)lorem ipsum.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

Color Palette

Primary / Brand
Cream
#f3f0e0
lorem ipsum
Brass Gold
#b3873d
lorem ipsum / lorem ipsum
CTA Slate
#556677
CTA lorem ipsum
CTA Border
#445566
CTA lorem
Neutral / Text
Text Primary
#333333
lorem / lorem
Text Strong
#222222
lorem ipsum
Text Muted
#555555
lorem / lorem ipsum dolor
Ink Base
#000000
lorem / lorem ipsum
Surface Cool
#f4f6f8
lorem ipsum / lorem
Surface Grey
#efefef
lorem ipsum
Semantic(lorem)
Link
#3388bb
lorem
Error(lorem)
#c0392b
lorem / lorem
02 / Typography — lorem

Typography

lorem Latin lorem Cardo(lorem)＋ UI lorem Source Sans Pro, lorem ipsum dolor sit ProN(lorem ipsum). lorem ipsum dolor Cardo ＋ Source Sans 3 lorem ipsum, lorem Noto Sans JP lorem ipsum dolor.

Hand Drip Style — lorem ipsum dolor
Heading 1 (H2) — 44px / 400 / line-height: 1.2 / ls normalsection
lorem, lorem ipsum.
Lead / Quote — 35.2px / 400 / line-height: 1.2
lorem ipsum dolor sit amet.
Sub-Lead — 26.4px / 400 / line-height: 1.2
Heading 3 — lorem ipsum dolor sit
Heading 3 — 24px / 400 / line-height: 1.45
Heading 4 — Single Origin Sencha
Heading 4 (Accent) — 20px / 400 / color: #b3873d lorem ipsum
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem, lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Body — 14px / 400 / line-height: 1.45 / ls normal
ACCESS — lorem ipsum lorem ipsum dolor 5 lorem
Label (Gold) — 14px / 400 / color: #b3873d
Information — lorem ipsum / lorem ipsum dolor sit amet
Caption — 12px / 400 / color: #222222
03 / Journal — lorem ipsum dolor

Journal

Tokyo Saryo Journal — 2026.06.28

lorem ipsum dolor sit amet, lorem ipsum dolor.

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum, lorem ipsum — lorem ipsum dolor sit amet consectetur adipiscing.lorem ipsumlorem, lorem ipsum dolor sit amet“lorem ipsum dolor sit amet”lorem ipsum dolor sit.

lorem ipsum dolor sit, lorem ipsum dolor.

lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor sit amet consectetur.

04 / Tea — lorem ipsum dolor sit

Single Origin Sencha

lorem / Yabukita
Shizuoka
lorem ipsum lorem
¥ 1,400 / 50g
lorem / Saemidori
Kagoshima
lorem ipsum lorem
¥ 1,600 / 50g
lorem / Gyokuro
Kyoto
lorem lorem
¥ 2,200 / 50g
lorem / Hojicha
Original
lorem lorem
¥ 1,100 / 80g
05 / Buttons

Buttons

lorem ipsum dolor
Primary（#556677 / radius 0）
lorem ipsum
Outline(accent lorem / radius 0)
Secondary（#efefef）
06 / Forms

Forms

lorem ipsum — border: #d8d3bf, radius: 0
lorem ipsum — border: #b3873d(lorem ipsum)
lorem — border: #c0392b
07 / Elevation

Depth & Elevation

lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing.

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
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