Direct Trade Community

Meet the
Producers & Roasters

コーヒー生産者とロースターを、まっすぐつなぐ。

DESIGN.md から抽出したデザイントークンのカタログ。温かいクリーム地に多色アクセントを散らし、巨大なセリフ・ディスプレイ見出しで組む editorial な世界観。computed style 実測値（2026-06-28）に基づく。

オファーを見るロースターを探す DESIGN.md を読む

01 / Colors

Color Palette

Brand / Core

Cream

#f4efe5

ページ背景

Yellow / Olive

#cbc741

Primary・CTA

Blue / Teal

#1b6688

Secondary

Purple

#7a318d

アクセント

Green

#0f7e58

アクセント

Surface / Dark

Cream Tint

#dfdad2

国名タグ・面

Navy

#27455c

ダーク面

Dark

#1e181c

反転タブ地

Near-Black

#151415

最深反転面

Charcoal

#342f32

フッター面

Border

#d8d8d8

区切り・枠

Text / Semantic

Text Primary

#000000

本文・見出し

Text Muted

#696969

サブ見出し

Text Disabled

#828282

非アクティブ

Error

#e34837

エラー

Success

#346e4a

同意・許可

02 / Typography — 実測値

Typography

原典は和文＝中ゴシックBBB Pr6N、英字本文＝Clother、英字ディスプレイ＝restra（いずれも Adobe Fonts）。本プレビューは代替の Zen Kaku Gothic New / Jost / Playfair Display で表示。全体に font-feature-settings: "palt" を適用。

Origin 89

Display (XL) — restra 110px / 700 / lh 1.0 / 各ブランドカラーディスプレイ

Meet the Producers

Display (L) — restra 89px / 400–700 / lh 1.0

コーヒー生産者とつながる

Heading (和文 L) — 中ゴシックBBB 40px / 400 / lh 1.58 / ls 4.8px(0.12em)

和文小見出し — ダイレクトトレードという選択

Heading (和文 S) — 20px / 400 / lh 1.5

A community of coffee lovers

Lead (英字) — Clother 26px / 400 / ls 1.82px(0.07em)

本文（大）テキスト — TYPICA は、コーヒー生産者とロースターを仲介者なしで直接つなぐプラットフォームです。生豆のオファーを通じて、つくり手の物語とともにコーヒーが届きます。ABCabc 123

Body (L) — 中ゴシックBBB 20px / 400 / lh 1.55 / ls 1.4px(0.07em)

本文（小）・注記テキスト — 2026年2月1日より利用規約が変更になりました。詳細は各オファーの説明をご確認ください。

Body — 13px / 400 / lh 1.5 / ls 0.91px(0.07em)

OFFER LISTS

Label (英字) — Clother 15px / 500 / ls 1.05px(0.07em) / #cbc741

03 / Stories — editorial グリッド