Your Personal
Healthy Food

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor lorem ipsum dolor
01 / Colors

Color Palette

Brand & CTA
Primary Green
#1f8d61
CTA / lorem ipsum dolor
Mint Green
#b4d9ca
lorem ipsum dolor sit
Accent
Orange-Red
#db5331
HOW TO USE / lorem ipsum
Deep Blue
#003c73
lorem ipsum dolor sit
Food Category
lorem Japanese
#bee4e4
lorem ipsum dolor
lorem Western
#f3daaa
lorem ipsum dolor
lorem Chinese
#eec1bc
lorem ipsum dolor
lorem ipsum Ethnic
#f5d03e
lorem ipsum dolor
Text
Text Primary
#1f1f1f
lorem ipsum dolor
Text Secondary
#b6b6b6
lorem / lorem ipsum
Text Olive
#7b785b
lorem ipsum dolor
Surface & Background
Page Background
#fbfbf6
lorem ipsum(lorem ipsum)
Surface Alt
#f8f7ee
lorem ipsum dolor
Footer BG
#252525
lorem ipsum dolor
Footer Text
#fbfbf6
lorem ipsum dolor sit
02 / Typography

Typography Hierarchy

Your Personal Food
Display / Cormorant Garamond (Riviera alt) / 80px / 400 / line-height: 1.1 / letter-spacing: normallorem ipsum dolor
Section Heading
Section Heading / 40px / 400 / line-height: 1.3lorem ipsum dolor
Sub Heading / lorem ipsum
Sub Heading / 32px / 400 / line-height: 1.3lorem ipsum
lorem ipsum dolor
Product Tab / lorem ipsum / 28px / 400 / line-height: 1.3lorem ipsum
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
Body Lead / lorem ipsum / 28px / 700 / line-height: 1.78 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor sit amet, lorem, lorem. lorem ipsum dolor sit 200 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. Body Large lorem letter-spacing: -0.1em lorem ipsum dolor.
Body Large / lorem ipsum / 16px / 400 / line-height: 2.0 / letter-spacing: -0.1emlorem(lorem)
lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur. line-height 2.0 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. palt lorem ipsum dolor.
Body / lorem ipsum / 14px / 400 / line-height: 2.0 / letter-spacing: 0.1emlorem
Small Body: lorem ipsum dolor, lorem ipsum
Small Body / 13px / 400 / line-height: 1.0lorem
Caption: lorem, lorem ipsum dolor, lorem ipsum dolor
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
03 / Article

Food Content Sample

Personalized Nutrition

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit.

GREEN SPOON lorem, lorem ipsum dolor sit 200 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut. lorem ipsum, lorem, lorem, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

Fresh Ingredients

lorem, lorem, lorem ipsum, lorem ipsum, lorem ipsum, lorem. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem, lorem ipsum dolor sit. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor, lorem ipsum 5 lorem. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

Button Variations

lorem ipsum dolor
Primary CTA (pill)
lorem ipsum dolor
Cookie Consent size
lorem ipsum
Outline (pill)
LOG IN
Login (ghost pill)
Hamburger (mint)
Social (dark)
05 / Cards

Product Cards

🍽
lorem

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

¥980 / 1 lorem
🍦
lorem

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur. 10 lorem ipsum dolor sit amet consectetur adipiscing.

¥980 / 1 lorem
🍜
lorem

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor.

¥980 / 1 lorem
🌶
lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

¥980 / 1 lorem
06 / Forms

Form Elements

lorem ipsum --- border: #d9d9d0, radius: 8px
lorem ipsum --- border: #1f8d61 (Primary Green)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border: #c0392b (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 2px 8px rgba(0,0,0,0.08) --- lorem ipsum
Level 2
0 4px 16px rgba(0,0,0,0.12) --- lorem ipsum dolor
Level 3
0 8px 32px rgba(0,0,0,0.16) --- lorem ipsum
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