Design System
lorem lorem ipsum dolor sit amet consectetur

lorem, lorem ipsum, lorem.

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.

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

lorem ipsum dolor

Brand
Kagome Red
#ee1d23
lorem ipsum dolor / lorem ipsum dolor / lorem ipsum
Category Purple
#a768bd
lorem ipsum dolor“lorem”
Sustainability Gold
#e6b710
lorem ipsum dolor“lorem ipsum dolor”
Campaign Crimson
#cd2245
lorem ipsum dolor“CM / lorem ipsum dolor”
Text
Text Primary
#333333
lorem ipsum dolor / lorem ipsum dolor
Text Black
#000000
lorem ipsum dolor / lorem ipsum
Text Secondary
#909090
lorem ipsum dolor / ENGLISH PAGE
Text Muted
#646464
lorem ipsum
Date Gray
#858584
lorem ipsum dolor
Semantic
Success
#388e3c
lorem / lorem
Danger
#d32f2f
lorem / lorem
Warning
#f57c00
lorem / lorem
Surface & Background
White
#ffffff
lorem ipsum / lorem ipsum
Section BG
#f6f6f6
lorem ipsum dolor
Search Field BG
#e7e7e7
lorem ipsum dolor
Slider Inactive
#cccccc
lorem ipsum dolor sit amet consectetur
Cookie BG
#666666
Cookie consent lorem
02 / Typography

lorem ipsum dolor sit

Mission
Inter / 22px / 700 / letter-spacing: 0.12em / color: #ee1d23lorem ipsum dolor
lorem ipsum
Inter / 30px / 700 / line-height: 1.6 / color: #ee1d23H2 lorem ipsum(lorem)
lorem, lorem ipsum, lorem.
Inter / 40px / 700 / line-height: 2.0Display(lorem ipsum dolor)
lorem ipsum dolor sit amet consectetur
Zen Maru Gothic / 30px / 700 / line-height: 1.4H2 MVV(lorem ipsum)
lorem ipsum dolor
Inter / 30px / 700 / line-height: 1.6 / color: #333333H2 lorem ipsum
lorem ipsum dolor sit
Helvetica Neue lorem / 32px / 700 / line-height: 1.6 / color: #000000H2(lorem ipsum)
lorem
Helvetica Neue lorem / 24px / 700 / line-height: 1.6 / color: #000000H3(lorem ipsum)
lorem / lorem ipsum dolor sit
Inter / 18px / 700 / line-height: 1.6lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit, lorem ipsum dolor. lorem ipsum“lorem, lorem ipsum, lorem. ”lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit.
Inter / 18px / 400 / line-height: 1.6 / letter-spacing: normalBody
lorem ipsum dolor — Caption (14px Bold)
Inter / 14px / 700 / line-height: 1.6
ENGLISH PAGE
Inter / 12px / 700 / color: #909090lorem ipsum dolor
lorem ipsum dolor
Inter / 10px / 700 / color: #646464lorem ipsum
lorem ipsum dolor — Helvetica Neue lorem ipsum dolor sit
Helvetica Neue lorem / 14px / 400 / line-height: 1.6lorem ipsum
03 / Article

lorem ipsum dolor sit amet

Nutrition & Health
lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

lorem ipsum dolor sit, lorem ipsum dolor 1 lorem 350g lorem ipsum dolor 280g lorem, lorem 70g lorem ipsum dolor. lorem ipsum“lorem ipsum dolor sit amet”lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor, 2025 lorem ipsum dolor sit“lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur”lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum / lorem ipsum / lorem ipsum dolor sit
Primary Pill CTA
lorem ipsum dolor sit amet
Outline Pill CTA
Search Combo(lorem + lorem)
Cookie Consent
Slider Dots
ENGLISH PAGE
Language Pill Badge
lorem
Category: lorem
lorem ipsum dolor
Category: lorem ipsum dolor
CM / lorem ipsum dolor
Category: CM / lorem ipsum dolor
05 / Cards

lorem ipsum dolor sit

Product / Recipe Card(shadow lorem)
🍅
lorem

lorem ipsum dolor lorem ipsum

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor.
🥦
lorem

lorem ipsum 100

21 lorem ipsum dolor 3 lorem ipsum dolor sit. lorem ipsum dolor sit.
🥕
lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur. 350g lorem ipsum dolor sit.
Attempt Tile(shadow lorem, lorem ipsum)
🌱

lorem ipsum dolor sit amet

lorem ipsum dolor sit, lorem ipsum dolor sit amet.
🏭

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing.
🎁

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur.
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 8px
lorem ipsum — border: #ee1d23 (Kagome Red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #d32f2f (Danger)
Search Field(lorem ipsum)
lorem #e7e7e7 + lorem #ee1d23 lorem ipsum dolor
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem CTA, lorem ipsum dolor)
Level 1: Card
2px 2px 5px #cccccc(lorem / lorem / lorem ipsum)
Level 2: Hover
0 4px 12px rgba(0,0,0,0.10)(lorem ipsum)
Level 3: Modal
0 8px 24px rgba(0,0,0,0.15)(lorem ipsum)
Overlay
rgba(0,0,0,0.6)(lorem ipsum dolor)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
5px
10px
15px
20px
32px
45px
64px
80px
Border Radius
0px
10px
24px
100px (pill)
50% (circle)
Content Widths(lorem)
Main Content 960px
Article 680px
Card Grid (3-col) 860px