Your Personal
Healthy Food

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

今日からはじめる メニューをみる

01 / Colors

Color Palette

Brand & CTA
Primary Green
#1f8d61
CTA・ブランドカラー
Mint Green
#b4d9ca
ハンバーガーメニュー
Accent
Orange-Red
#db5331
HOW TO USE・スライダー
Deep Blue
#003c73
新着セクション背景
Food Category
和食 Japanese
#bee4e4
ティール系バッジ
洋食 Western
#f3daaa
ゴールド系バッジ
中華 Chinese
#eec1bc
ピンク系バッジ
エスニック Ethnic
#f5d03e
イエロー系バッジ
Text
Text Primary
#1f1f1f
本文テキスト
Text Secondary
#b6b6b6
ナビ・ログイン
Text Olive
#7b785b
サイドメニュー
Surface & Background
Page Background
#fbfbf6
ページ背景(アイボリー)
Surface Alt
#f8f7ee
セクション背景
Footer BG
#252525
フッター背景
Footer Text
#fbfbf6
フッター上テキスト

02 / Typography

Typography Hierarchy

Your Personal Food
Display / Cormorant Garamond (Riviera alt) / 80px / 400 / line-height: 1.1 / letter-spacing: normalヒーロー見出し
Section Heading
Section Heading / 40px / 400 / line-height: 1.3セクション見出し
Sub Heading / サブ見出し
Sub Heading / 32px / 400 / line-height: 1.3サブ見出し
商品カテゴリタブ
Product Tab / 游ゴシック / 28px / 400 / line-height: 1.3タブナビ
あなたの体と生活に合わせて、管理栄養士がパーソナライズしたヘルシーフードをお届けします。
Body Lead / 游ゴシック / 28px / 700 / line-height: 1.78 / letter-spacing: 0.05emリード文
野菜たっぷりのスムージー、スープ、サラダ。管理栄養士が監修した200種類以上のメニューから、あなたにぴったりの組み合わせをお届けします。Body Large は letter-spacing: -0.1em でタイトに組む。
Body Large / 游ゴシック / 16px / 400 / line-height: 2.0 / letter-spacing: -0.1em本文(大)
標準の本文テキスト。フルピッチで組まれた游ゴシック体。line-height 2.0 のゆったりとした行間で、長文でも疲れにくい読書体験を提供します。palt は適用しない。
Body / 游ゴシック / 14px / 400 / line-height: 2.0 / letter-spacing: 0.1em本文
Small Body: 補足テキスト、成分情報
Small Body / 13px / 400 / line-height: 1.0補足
Caption: 注釈、キャプション、フッターリンク
Caption / 11px / 400 / line-height: 1.8 / letter-spacing: 0.1em
Nav Link: MENU / HOW TO USE / PLAN
Nav Link / 14px / 400 / line-height: 1.3 / color: Text Secondary

Food Content Sample

Personalized Nutrition

あなたの体と生活に合わせた、パーソナルフードを。

GREEN SPOON は、管理栄養士が監修した200種類以上のヘルシーフードから、あなたにぴったりのメニューをパーソナライズしてお届けするサブスクリプションサービスです。スムージー、スープ、サラダ、メインディッシュまで、瞬間冷凍で届く野菜たっぷりのメニューで毎日の食事をもっと豊かに。

Fresh Ingredients

甘酒、ケール、アボカド、マンゴー、チアシード、ビーツ。厳選された素材を瞬間冷凍し、栄養価をそのままにお届けします。化学調味料、保存料、着色料は一切不使用。自然の力だけで、おいしさと栄養を両立させています。

忙しい毎日でも、レンジで5分。水や牛乳を加えてミキサーにかけるだけ。手軽に本格的なヘルシーフードを楽しめます。


04 / Buttons

Button Variations

今日からはじめる
Primary CTA (pill)
メニューをみる
Cookie Consent size
詳しく見る
Outline (pill)
LOG IN
Login (ghost pill)
Hamburger (mint)
Social (dark)

05 / Cards

Product Cards

🍽
和食

鯛と春菊の柚子おろし煮

国産鯛と春菊を柚子おろしで仕上げた和風メニュー。やさしい味わいで体の芯から温まります。

¥980 / 1食
🍦
洋食

トマトとビーツのミネストローネ

完熟トマトとビーツの鮮やかなスープ。10種類の野菜がたっぷり入った食べるスープです。

¥980 / 1食
🍜
中華

海老と豆腐の豆乳担々スープ

豆乳ベースのクリーミーな担々スープ。花椒と白ごまが香り、体をぽかぽかに。

¥980 / 1食
🌶
エスニック

チキンとパクチーのトムヤム

レモングラスとナンプラーが香るトムヤムスープ。パクチーとチキンで満足感のある一杯。

¥980 / 1食

06 / Forms

Form Elements

デフォルト --- border: #d9d9d0, radius: 8px
フォーカス --- border: #1f8d61 (Primary Green)
正しいメールアドレスを入力してください
エラー --- border: #c0392b (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
0 2px 8px rgba(0,0,0,0.08) --- 商品カード
Level 2
0 4px 16px rgba(0,0,0,0.12) --- ホバー時カード
Level 3
0 8px 32px rgba(0,0,0,0.16) --- モーダル
Focus Ring
#1f8d61 + shadow rgba(31,141,97,0.15)

08 / Layout

Spacing & Container

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Max Container 1200px
Content Area 1000px
Article / Text 680px
Form / Input 400px