Bean to Bar Chocolate

チョコレートを、新しくする。

Minimal（mini-mal.tokyo）から抽出したデザイントークンのカタログ。Poppins + 游ゴシック体の欧文優先二層フォント、body weight 600、palt 未使用、#333333 ダーク CTA + radius 2px、#fcfcfc オフホワイト背景。computed style 実測値に基づく。

Shop Chocolate Our Story
01 / Colors
Colors
Color Palette
Dark
Dark Primary
#262626
ダーク面・CTA 背景
Dark Secondary
#333333
CTA ボタン・テキスト
Brand Accent
Blue-Green
#366b93
Products ヒーロー背景
Teal
#6eaab4
セクション背景・プロモ面
Green
#578a3d
素材訴求セクション
Text
Text Primary
#000000
本文テキスト
Text Secondary
#707070
キャプション・価格
Text Disabled
#d8d8d8
無効状態テキスト
Text on Dark
#ffffff
ダーク背景上の白テキスト
Surface
Surface
#fcfcfc
標準背景（オフホワイト）
Surface Light
#eeeeee
タグ・フィルター背景
Surface Gray
#eaeaea
ボーダー・区切り線
02 / Typography
Typography
Typography -- Poppins + YuGothic / body weight 600 / palt off
チョコレートを、新しくする。
Poppins + YuGothic / 36px / 600 / line-height: 1.4 / letter-spacing: normalHero Title
Products
Poppins / 36px / 600 / line-height: 1.4 / letter-spacing: 3.24px (0.09em)Section Header EN
カカオの個性を引き出す
Poppins + YuGothic / 24px / 600 / line-height: 1.4 / letter-spacing: normalHeading 2
素材と製法について
Poppins + YuGothic / 20px / 600 / line-height: 1.4 / letter-spacing: normalHeading 3
インドネシア産カカオ
Poppins + YuGothic / 16px / 700 / line-height: 1.4 / letter-spacing: normalHeading 4
Chocolate Bar
Poppins / 12.8px / 700 / line-height: 1.4 / letter-spacing: 1px (0.078em)Heading 5 / Label
カカオ豆からチョコレートになるまでのすべての工程を、東京の工房で行っています。産地ごとに異なるカカオの個性を最大限に引き出すため、焙煎温度や時間を一つひとつ調整。余計なものを加えず、カカオ本来の風味をお届けします。
Poppins + YuGothic / 14px / 400 / line-height: 1.6 / letter-spacing: normalBody
Minimal Works Nutty
Poppins + YuGothic / 16px / 700 / line-height: 1.4 / letter-spacing: normalProduct Name
¥1,350 (tax incl.)
Poppins + YuGothic / 13px / 400 / line-height: 1.6 / color: #707070Price / Caption
03 / Product
Product
Product Page Sample -- accent surface #366b93
Chocolate Bar

Minimal Works Nutty

カカオ豆からチョコレートになるまでのすべての工程を東京の工房で行う Bean to Bar チョコレート。産地ごとに異なるカカオの個性を最大限に引き出し、余計なものを加えず、素材の力だけで仕上げています。

素材について
Ingredients

インドネシア・スラウェシ島のカカオ豆を使用。ナッツのような香ばしさと、ほのかな酸味が特徴です。カカオニブ、砂糖、カカオバターのみで構成。乳化剤・香料不使用。

カートに入れる 詳しく見る
04 / Buttons
Buttons
Buttons -- 5 variants / radius 2px micro-rounded or 0px flat or 100px pill
カートに入れる
Primary / filled #333 / radius 2px
詳しく見る
Outline Dark / border #333 / radius 0
Shop All
Pill / border #000 / radius 100px
ナッティ
Tag / bg #eee / radius 0
Dark Surface
Shop Chocolate
Outline White / border #fff / radius 0
購入する
Inverted / bg #fcfcfc / radius 2px
05 / Cards
Cards
Product Cards -- shadow none / radius 0 / dark image
Product Image
Chocolate Bar

Minimal Works Nutty

¥1,350
Product Image
Chocolate Bar

Minimal Works Fruity

¥1,350
Product Image
Chocolate Spread

チョコレートスプレッド

¥1,620
Product Image
Gift Set

ギフトボックス 3枚セット

¥4,050
06 / Forms
Forms
Forms -- radius 2px / focus: border #333333
Default
正しい電話番号を入力してください
Focus
07 / Elevation
Elevation
Depth & Elevation -- shadow none / color surface contrast
Level 0 -- Surface
標準背景 #fcfcfc。影なし
Level 1 -- Dark
ヒーロー・CTA・フッター #262626
Level 2 -- Accent
プロダクトアクセント面 #366b93
Level 3 -- Light
タグ・フィルター面 #eeeeee
08 / Layout
Layout
Layout -- spacing scale & grid
4px
8px
10px
16px
20px
30px
DARK #262626
ACCENT #366b93
SURFACE #fcfcfc