UI Skillbook
2

東京茶寮（Tokyo Saryo） DESIGN.md

Japan

東京茶寮（Tokyo Saryo / https://www.tokyosaryo.jp/）のデザイン仕様書。 世界初のハンドドリップ日本茶専門店（東京・三軒茶屋）。煎茶をハンドドリップで一杯ずつ淹れる、静かな喫茶体験を提供する。 最大の特徴は 温かみのあるクリーム地（#f3f0e0）の余白 と くすんだゴールド（#b3873d）のアクセント、そして 欧文セリフ（Cardo）× 和文ゴシック を組み合わせた端正な editorial …

Raw DESIGN.md

At a glance

Group
Japan
Main color
#b3873dOrange design systems
Fonts
cardosource sans proHiragino Kaku Gothic ProN

Colors in this file

  • #b3873d

    と

  • #333333

    :

  • #f3f0e0

    :

  • #3388bb

    Link

  • #556677

    CTA (Slate Blue-Grey)

  • #445566

    スレートブルーグレー #556677 の塗り＋白文字

  • #ffffff

    On Accent / CTA

  • #000000

    Text / Link Base

  • #f4f6f8

    Surface (Cool)

  • #0000ee

    Link (Default)

東京茶寮（Tokyo Saryo / https://www.tokyosaryo.jp/）のデザイン仕様書。 世界初のハンドドリップ日本茶専門店（東京・三軒茶屋）。煎茶をハンドドリップで一杯ずつ淹れる、静かな喫茶体験を提供する。 最大の特徴は 温かみのあるクリーム地（#f3f0e0）の余白 と くすんだゴールド（#b3873d）のアクセント、そして 欧文セリフ（Cardo）× 和文ゴシック を組み合わせた端正な editorial デザイン。 角丸はボタンを含め基本 0px（直角）で、和の上品さとミニマルを両立する。 実サイト（Shopify ベース）の computed style 実測（2026-06-28 取得）に基づく。 ※ 欧文 Cardo・Source Sans は Google Fonts で表示可能。和文ヒラギノ角ゴは Web 表示不可のため preview.html では Noto Sans JP で代替する。

1. Visual Theme & Atmosphere

  • デザイン方針: クリーム/ベージュ地（#f3f0e0）× ダークグレーの墨（#333333） を基調にした、静謐でミニマルな editorial デザイン。色数を絞り、余白・写真・上質なタイポグラフィで「一服の静けさ」を語る。和の落ち着きと欧文セリフの気品を掛け合わせる
  • 東京茶寮について: 三軒茶屋にある、世界初のハンドドリップ日本茶専門店。煎茶を一杯ずつ丁寧に淹れる体験そのものを商品にしている。サイトもその所作と同じく、無駄を削いだ静かなトーンで構成される
  • 密度: 低密度。大きな余白、ゆったりした行送り、抑制された文字量。プロダクト（茶葉・喫茶体験）と写真を主役にする gallery / editorial 寄りの構成
  • キーワード: クリーム #f3f0e0、くすんだゴールド #b3873d、Cardo セリフ、和文ゴシック、角丸0、静謐、ミニマル、editorial
  • 特徴:
    • 基調は 温かいクリーム #f3f0e0 × 墨グレー #333333。純白・純黒の冷たさを避け、わずかに温度のある色で和の柔らかさを出す
    • アクセントは唯一、くすんだゴールド/真鍮 #b3873d。小見出し・強調・ラベルにのみ使い、真鍮の急須や茶道具を思わせる上品な差し色とする
    • 欧文（Latin）は Cardo（エレガントなセリフ）を見出し・本文すべてに使用。和文は ヒラギノ角ゴ ProN（ゴシック）。「欧文セリフ × 和文ゴシック」という非対称の組み合わせが端正な印象を生む
    • 見出しのウェイトは控えめ（400）。太字で主張せず、サイズ・余白・セリフの字形で階層を作る
    • CTA は スレートブルーグレー #556677 の塗り＋白文字、border 1px #445566、角丸 0px（直角）。茶寮の落ち着いた色調に馴染む唯一の有彩ボタン
    • リンクは水色寄りのブルー #3388bb。本文の墨グレーから浮かせて導線を示す
    • 全体に 角丸は 0px。ボタンも入力欄も直角で、端正でシャープな面構成を保つ

2. Color Palette & Roles

実サイトの computed style 実測値。基調はクリーム×墨グレー、差し色はくすんだゴールド。すべて hex 表記。

Primary（ブランドカラー）

  • Background (Cream) (#f3f0e0): ページ背景・メインキャンバス（出現最多）。温かみのあるクリーム/ベージュ。和紙のような落ち着いた地色
  • Accent (Brass Gold) (#b3873d): ブランドの差し色。くすんだゴールド/真鍮。小見出し（h4）・強調テキスト・ラベルに使用。茶道具の真鍮を思わせる上品なアクセント
  • CTA (Slate Blue-Grey) (#556677): 主要 CTA ボタンの地色（白文字）。落ち着いたスレートブルーグレー
  • CTA Border (#445566): CTA ボタンの枠線（1px）。地色よりわずかに濃いトーン

Semantic（意味的な色）

  • Link (#3388bb): リンク色。水色寄りのブルー（強調リンク／本文中リンク）
  • Link (Default) (#0000ee): ブラウザ既定リンク（一部の素の <a>）。基本は #3388bb に揃える
  • Error（推奨）(#c0392b): エラー・必須警告（実サイトに明示色がないため和のトーンに合わせた推奨値）

Neutral（ニュートラル）

  • Text Primary (#333333): 見出し（h2/h3）・本文主のテキスト色。墨に近いダークグレー
  • Text Strong (#222222): 濃いめの本文・強調本文
  • Text Muted (#555555): 補助テキスト・キャプション・リスト
  • Text / Link Base (#000000): 素のリンク・ナビ等の基本テキスト
  • Surface (Cool) (#f4f6f8): モーダル・告知（クッキー同意等）の面。クリームよりわずかに青みのある明面
  • Surface (Grey) (#efefef): 同意ボタン等の薄いグレー面
  • On Accent / CTA (#ffffff): CTA・アクセント面の上のテキスト

3. Typography Rules

実サイトは欧文（Latin）に Cardo（セリフ）、UI 一部に Source Sans Pro、和文に ヒラギノ角ゴ ProN（ゴシック）を使う。 Cardo・Source Sans Pro は Google Fonts で表示可能。和文ヒラギノは Web 表示不可のため preview.html では Noto Sans JP で代替する。

3.1 和文フォント

  • ゴシック体: ヒラギノ角ゴ ProN（Hiragino Kaku Gothic ProN） / ヒラギノ角ゴ Pro W3（ヒラギノ角ゴ Pro W3 / Hiragino Kaku Gothic Pro）
  • 明朝体: 使用しない（和文は一貫してゴシック。欧文セリフ × 和文ゴシックの組み合わせが東京茶寮の核）

3.2 欧文フォント

  • セリフ: Cardo（cardo）— エレガントなオールドスタイルセリフ。見出し・本文の Latin グリフに使用。フォールバックに Georgia
  • サンセリフ: Source Sans Pro（source sans pro / Source Sans Pro）— 一部の UI・リンク・補助テキストに使用

3.3 font-family 指定

css/* 見出し・本文（Latin はセリフ、和文はゴシック） */
font-family: cardo, georgia, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", sans-serif;

/* UI・一部リンク・補助テキスト */
font-family: "source sans pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

/* body（和文ゴシック単独指定の箇所） */
font-family: "Hiragino Kaku Gothic ProN";

フォールバックの考え方:

  • 欧文優先型。Cardo（または Source Sans Pro）を先頭に置き、Latin グリフの印象を最優先する。和文はヒラギノ角ゴに委ねる
  • 欧文セリフ（Cardo）の字形が見出し・本文の英字に効き、日本語部分はヒラギノ角ゴのゴシックで端正に表示される
  • 最後に generic family（sans-serif）を置く

preview.html での代替フォント:

  • Cardo → Cardo（Google Fonts に同名で存在。実サイトと同一書体をそのまま使用）
  • Source Sans Pro → Source Sans 3（旧 Source Sans Pro。Google Fonts）
  • ヒラギノ角ゴ ProN → Noto Sans JP（Web 表示可能なゴシック代替。weight 400 を基準に）

3.4 文字サイズ・ウェイト階層

RoleFontSizeWeightLine HeightLetter Spacing備考
Heading 1 (H2)Cardo / Hiragino44px4001.2 (52.8px)normalセクション大見出し（#333333）
Lead / QuoteCardo / Hiragino35.2px4001.2 (42.24px)normal大きめの引用的テキスト（#333333）
Sub-LeadCardo / Hiragino26.4px4001.2 (31.68px)normalリード文（#333333）
Heading 3Cardo / Hiragino24px4001.45 (34.8px)normal小見出し（#333333）
Heading 4 (Accent)Cardo / Hiragino20px4001.45 (29px)normal小見出し・ラベル（#b3873d ゴールド）
BodyCardo / Hiragino14px4001.45 (20.3px)normal本文・リンク（#333333 / #000000）
UI / LinkSource Sans16px400/7001.0〜1.45normalUI ラベル・リンク（#0000ee / #3388bb）
Label (Gold)Cardo / Hiragino14px4001.5 (21px)normalゴールドの小ラベル（#b3873d）
CaptionCardo / Hiragino12px4001.45 (17.4px)normalキャプション・注記（#222222 / #b3873d）
  • 見出し・本文ともウェイトは 400 が基調。強調 CTA・リンクの一部のみ 700
  • letter-spacing はすべて normal（実測 ls=normal）。和文を詰めず、ゆったり読ませる

3.5 行間・字間

  • 本文の行間 (line-height): 約 1.45（14px → 20.3px）。日本語本文としてはやや締まった行送りで、editorial の端正さを出す
  • 見出しの行間: 大見出し（44px / 35.2px / 26.4px）は約 1.2、中見出し（24px / 20px）は約 1.45
  • 本文の字間 (letter-spacing): normal（0em）
  • 見出しの字間: normal（0em）

ガイドライン:

  • 本文は line-height 1.45 を基準にする。長文の読み物（journal 記事）では 1.6〜1.8 まで広げてよい
  • letter-spacing は和欧ともに normal を維持し、Cardo セリフの字形と字間をそのまま活かす
  • 欧文見出しは Cardo のセリフが映えるよう、過度な字詰めをしない

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
  • 行頭禁止: ）」』】、。・：；？！
  • 行末禁止: （「『【

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は未適用 */
  • 実測では font-feature-settings: normal。palt は適用していない
  • 和文はゴシックで字幅をそのまま使い、字間 normal で素直に組む

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

Buttons

Primary（主要 CTA）

  • Background: #556677（スレートブルーグレー）
  • Text: #ffffff
  • Border: 1px solid #445566
  • Padding: 12px 18px
  • Border Radius: 0px（角丸なし・直角）
  • Font Size: 16px
  • Font Weight: 700
  • Font Family: "source sans pro", "ヒラギノ角ゴ Pro W3", sans-serif
  • 例: 「予約の日程をみる」

Secondary（薄グレー・同意系）

  • Background: #efefef
  • Text: #000000
  • Border: なし（border 0）
  • Padding: 8px 16px（実測の小ボタンは 0 のため、汎用に padding を補う）
  • Border Radius: 0px
  • Font Size: 12px
  • 例: 「承諾する」

Inputs

  • Background: #ffffff
  • Border: 1px solid #d8d3bf（クリーム地に馴染むベージュ寄りグレー枠／推奨）
  • Border (focus): 1px solid #b3873d（ゴールドでフォーカスを示す／推奨）
  • Border Radius: 0px
  • Padding: 12px 14px
  • Font Size: 14px
  • Font Family: cardo, georgia, "ヒラギノ角ゴ Pro W3", sans-serif

Cards

  • Background: #ffffff または クリーム面 #f3f0e0
  • Border: なし、または 1px solid #e3ddc8（クリームより一段濃い枠／推奨）
  • Border Radius: 0px
  • 写真を大きく、テキスト（小見出し・本文）は下に控えめに配置
  • 余白を広く取り、影は使わない（フラット）

5. Layout Principles

Spacing Scale

TokenValue
XS4px
S8px
M16px
L24px
XL40px
XXL80px

Container

  • Max Width: 約 1080〜1200px（ゆったりした editorial グリッド）
  • Padding (horizontal): 20〜40px

Grid

  • Columns: 記事・商品グリッドは 2〜3 カラム（デスクトップ）
  • Gutter: 24〜40px
  • 大きな余白で各要素を孤立させ、静かな間合いを作る

6. Depth & Elevation

東京茶寮はほぼフラット。影を多用せず、クリーム地 #f3f0e0 と明面 #ffffff / #f4f6f8 の色差で階層を表現する。

LevelShadow用途
0noneセクション・カード（基本フラット）
10 1px 2px rgba(0,0,0,0.06)ドロップダウン・控えめな浮き
20 8px 24px rgba(0,0,0,0.10)モーダル・クッキー同意（#f4f6f8 面）

7. Do's and Don'ts

Do（推奨）

  • 背景はクリーム #f3f0e0、テキストは墨グレー #333333 を使い、純白・純黒の冷たさを避ける
  • アクセントはくすんだゴールド #b3873d 一色に絞り、小見出し・ラベル・強調にのみ使う
  • 欧文（Latin）は Cardo のセリフ、和文はヒラギノ角ゴのゴシックを組み合わせる
  • 角丸は 0px に保ち、ボタン・入力欄を直角の端正な面にする
  • 余白を大きく取り、写真とタイポグラフィで静かな間合いを作る
  • letter-spacing は normal、palt は使わず、素直にゆったり組む

Don't（禁止）

  • 鮮やかな多色やグラデーションを足さない（静謐な世界観が崩れる）
  • 和文を明朝にしない（東京茶寮は和文ゴシック。欧文だけがセリフ）
  • 見出しを極太（700/800）にしない（基調ウェイトは 400）
  • ボタンを pill（radius 9999px）や大きな角丸にしない（直角 0px が基本）
  • ゴールド #b3873d を広い面の塗りに使わない（あくまで点の差し色）
  • テキストに純黒 #000000 を多用しない（本文は #333333 の墨グレー）

8. Responsive Behavior

Breakpoints

NameWidth説明
Mobile≤ 749px1 カラム、ナビはドロワー
Tablet750–989px1〜2 カラム
Desktop≥ 990px2〜3 カラムの editorial グリッド

タッチターゲット

  • 最小サイズ: 44px × 44px

フォントサイズの調整

  • 大見出し（44px）はモバイルで 28〜32px 程度に縮小する
  • 本文はモバイルでも 14px を基準に保つ

9. Agent Prompt Guide

クイックリファレンス

Primary (Accent): #b3873d (Brass Gold)
Background: #f3f0e0 (Cream)
Text: #333333 (墨グレー)
CTA: #556677 (Slate Blue-Grey) / 白文字 / border #445566 / radius 0
Link: #3388bb
Font (Latin serif × 和文ゴシック): cardo, georgia, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif
  /* 代替: "Cardo", "Source Sans 3", "Noto Sans JP" */
Body Size: 14px
Line Height: 1.45
Heading: weight 400 / letter-spacing normal / palt off
Radius: 0px（直角）

プロンプト例

東京茶寮のデザインシステムに従って、煎茶の紹介ページを作成してください。
- 背景: #f3f0e0（クリーム）、テキスト: #333333（墨グレー）。純白・純黒は使わない
- アクセント: #b3873d（くすんだゴールド）を小見出し・ラベルにのみ使う
- フォント: cardo, georgia, "ヒラギノ角ゴ Pro W3", sans-serif（代替 Cardo + Noto Sans JP）。欧文はセリフ、和文はゴシック
- 見出しは weight 400、letter-spacing normal、palt なし
- CTA は #556677 の塗り＋白文字、border 1px #445566、角丸 0px（直角）
- リンクは #3388bb。本文 line-height は 1.45
- 余白を大きく取り、写真とタイポグラフィで静かな editorial を作る。影なしのフラット

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/tokyosaryo.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "tokyosaryo" })

Related Design.md files

DDD HOTEL（ディーディーディー ホテル）

Japan · Cardo

DDD HOTEL（ディーディーディー ホテル / https://dddhotel.jp/）のデザイン仕様書。 東京・馬喰町に建つ、アート／ギャラリーを併設したミニマルなデザインホテル（旧 the b をリノベーション）。 最大の特徴は オフホワイト（#fafafa）× ニアブラック（#040404）のモノクローム に、 くすんだブロンズ（#856d47） をひと差しするアクセント、そして Cardo（Latin セリフ）× 明朝／…

ミツカン（Mizkan）

Japan · Hiragino Kaku Gothic ProN

ミツカン（https://www.mizkan.co.jp/）のデザイン仕様書。 1804年創業、半田の酢からはじまった食品メーカーのコーポレート＋レシピサイト。「やがて、いのちに変わるもの。」をタグラインに掲げる。 ブランド色は緑 1 色（#093 ＝ #009933）。CSS 上の実出現は 487 回で、他のどの色よりも桁違いに多い。この 1 色だけで「ミツカンの面」を作る #093 という 3 桁ショートハンドで書かれている。#…

OWNDAYS（オンデーズ）

Japan · Founders Grotesk

OWNDAYS（https://www.owndays.com/jp/ja）のデザイン仕様書。 メガネ・サングラスの製造小売チェーン。オンラインストアと店舗情報を統合した EC サイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

LIXIL

Japan · Hiragino Kaku Gothic ProN

LIXIL（https://www.lixil.co.jp/）のデザイン仕様書。 2026-05-22 取得の computed style に基づく。 LIXIL は日本最大の住宅設備・建材メーカー。INAX・TOSTEM・サンウエーブ等を統合し、トイレ・キッチン・浴室・窓・エクステリアを包括的に展開する。

石見銀山 群言堂（Iwamiginzan Gungendo）

Japan · Zen Old Mincho

石見銀山 群言堂（https://www.gungendo.co.jp/）のデザイン仕様書。 島根県大田市大森町——世界遺産・石見銀山の麓、人口 400 人ほどの集落に本社を置く衣料・生活用品のブランド。1989 年創業（株式会社石見銀山生活文化研究所）。「根のある暮らし」を掲げ、過疎の町に残ることそのものをブランドの主題にしている。 サイトの最大の特徴は 全ページが明朝体 1 書体（Zen Old Mincho）だけで組まれているこ…

BAPE (A Bathing Ape)

Japan · helveticaneue lt std

A BATHING APE（https://bape.com/）のデザイン仕様書。 1993年にNIGOが原宿で創業した日本発のストリートウェアブランド。カモ柄、エイプヘッドロゴ、シャークフーディーで知られる。Shopify ベースの EC サイト。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

All Design.md filesBrowse by font