Direct Trade Community

Meet the
Producers & Roasters

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor.

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

lorem ipsum dolor lorem ipsum dolor DESIGN.md lorem
01 / Colors

Color Palette

Brand / Core
Cream
#f4efe5
lorem ipsum
Yellow / Olive
#cbc741
Primary・CTA
Blue / Teal
#1b6688
Secondary
Purple
#7a318d
lorem ipsum
Green
#0f7e58
lorem ipsum
Surface / Dark
Cream Tint
#dfdad2
lorem ipsum / lorem
Navy
#27455c
lorem ipsum
Dark
#1e181c
lorem ipsum
Near-Black
#151415
lorem ipsum
Charcoal
#342f32
lorem ipsum
Border
#d8d8d8
lorem / lorem
Text / Semantic
Text Primary
#000000
lorem / lorem
Text Muted
#696969
lorem ipsum
Text Disabled
#828282
lorem ipsum dolor
Error
#e34837
lorem
Success
#346e4a
lorem / lorem
02 / Typography — lorem

Typography

lorem ipsum＝lorem ipsum BBB Pr6N, lorem ipsum＝Clother, lorem ipsum dolor＝restra(lorem ipsum Adobe Fonts). lorem ipsum dolor sit Zen Kaku Gothic New / Jost / Playfair Display lorem. loremfont-feature-settings: "palt" lorem.

Origin 89
Display (XL) — restra 110px / 700 / lh 1.0 / lorem ipsum dolorlorem ipsum dolor
Meet the Producers
Display (L) — restra 89px / 400–700 / lh 1.0
lorem ipsum dolor sit amet
Heading (lorem L) — lorem ipsum BBB 40px / 400 / lh 1.58 / ls 4.8px(0.12em)
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur
Heading (lorem S) — 20px / 400 / lh 1.5
A community of coffee lovers
Lead (lorem) — Clother 26px / 400 / ls 1.82px(0.07em)
lorem(lorem)lorem ipsum — TYPICA lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Body (L) — lorem ipsum BBB 20px / 400 / lh 1.55 / ls 1.4px(0.07em)
lorem(lorem) / lorem ipsum dolor — 2026 lorem 2 lorem 1 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.
Body — 13px / 400 / lh 1.5 / ls 0.91px(0.07em)
OFFER LISTS
Label (lorem) — Clother 15px / 500 / ls 1.05px(0.07em) / #cbc741
03 / Stories — editorial lorem ipsum

Meet the Producers

01
Brazil
lorem 1,200m lorem ipsum dolor sit amet consectetur
Producers Story / 2026.06
02
Indonesia
lorem ipsum dolor, lorem ipsum dolor
Roasters Story / 2026.05
03
lorem
lorem ipsum dolor sit amet consectetur
Community / 2026.05
04
Ethiopia
lorem ipsum dolor sit amet consectetur
Producers Story / 2026.04
04 / Buttons — pill

Buttons

lorem ipsum dolor
Yellow(lorem)
lorem ipsum dolor
Blue(lorem ipsum dolor)
lorem ipsum
Purple(lorem)
READ MORE
Outline(lorem)
Tab(lorem pill)
05 / Forms

Forms

lorem ipsum — border: #d8d8d8, radius: 4px
lorem ipsum — border: #1b6688 + lorem
lorem — border: #e34837
06 / Elevation

Depth & Elevation

TYPICA lorem ipsum dolor sit amet. lorem ipsum dolor.

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
0 2px 8px rgba(0,0,0,0.08)
Level 2
0 8px 24px rgba(0,0,0,0.12)
07 / Layout — Spacing Scale

Spacing

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