lorem ipsum, lorem ipsum, lorem ipsum dolor.

BASE FOOD lorem ipsum dolor sit
lorem ipsum dolor sit amet

lorem ipsum dolor / lorem ipsum dolor computed style lorem ipsum dolor, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

BASE FOOD lorem ipsum lorem ipsum dolor
01 / Colors — lorem

lorem ipsum dolor

Brand
Brand Yellow
#fac83c
--bf-surface-brand / --bf-accent-brand / lorem CTA lorem
Button Hover
orange
--bf-button-primary-bg-hover
Button Active
#ea8900
--bf-button-primary-bg-active
Swiper Pagination
#ff9b00
lorem ipsum dolor sit amet consectetur / lorem ipsum dolor
Accent / Semantic
Notice (Pink)
#f05e88
--bf-accent-notice / lorem / lorem
Error (Red)
#ff4a24
--bf-accent-error / lorem ipsum dolor sit
Success
#16a34a
lorem / lorem(lorem)
Text
Text Primary
#2a2a2a
--bf-text-primary / lorem / lorem
Text Secondary
#5a5a5a
--bf-text-secondary / lorem ipsum dolor
Placeholder
#a8a8a8
--bf-text-placeholder / lorem ipsum dolor sit amet
Disabled
#c8c8c8
--bf-text-disabled / lorem ipsum dolor
Surface
Base
#ffffff
--bf-surface-base / lorem / lorem
Neutral
#f0f1eb
--bf-surface-neutral / lorem(lorem ipsum dolor)
Inverse
#2a2a2a
--bf-surface-inverse / lorem ipsum
Hero BG
#000000
lorem ipsum dolor sit amet
Divider
High
#2a2a2a
--bf-divider-high / lorem ipsum
Middle
#c8c8c8
--bf-divider-middle / lorem ipsum dolor
Low
#f0f0f0
--bf-divider-low / lorem ipsum
Button Disabled BG
#ffe89f
--bf-button-disabled-bg / lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit, lorem ipsum. — Large Heading
48px / 700 / line-height 1.5 / letter-spacing normallorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing — Section Heading
22px / 700 / line-height 1.45 / letter-spacing normallorem ipsum dolor
BASE BREAD lorem ipsum dolor — Sub Heading
18px / 700 / line-height 1.33 / letter-spacing normallorem / lorem ipsum
lorem ipsum dolor — 1 lorem 1 lorem ipsum dolor sit 1/3 lorem ipsum dolor sit amet. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing 10 lorem ipsum dolor sit amet consectetur. font-feature-settings lorem normal(palt lorem).
16px / 400 / line-height 1.5 / letter-spacing normal / font-feature-settings: normallorem
lorem ipsum — Nav Caption Bold
14px / 700 / line-height 1.43 / letter-spacing normallorem / lorem
lorem ipsum dolor — ※ lorem ipsum dolor sit amet consectetur, lorem / lorem ipsum / lorem ipsum / lorem ipsum dolor sit, lorem ipsum dolor 1 lorem ipsum dolor 1/3 lorem ipsum.
14px / 400 / line-height 1.5 / color #5a5a5alorem
Small — lorem ipsum. lorem ipsum 20%OFF. ※ lorem ipsum dolor sit amet consectetur.
12px / 400 / line-height 1.5 / color #5a5a5a
03 / Product — lorem ipsum dolor sit amet

lorem ipsum dolor

lorem ipsum, lorem ipsum,
lorem ipsum dolor.

1 lorem 1 lorem ipsum dolor sit 1/3 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet 10 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

BASE BREAD lorem ipsum

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

lorem ipsum dolor

26 lorem ipsum dolor&lorem ipsum, lorem ipsum, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur 30%lorem.

lorem ipsum:lorem ipsum dolor sit amet 20%OFF. lorem ipsum dolor sit amet consectetur. 2 lorem ipsum dolor sit amet / lorem ipsum dolor.

※ lorem ipsum dolor sit amet consectetur. lorem / lorem ipsum / lorem ipsum / lorem ipsum dolor.

04 / Buttons — Pill lorem

lorem ipsum dolor sit

BASE FOOD lorem ipsum
Primary — Pill / #fac83c / 16px 24px
lorem ipsum dolor
Secondary — Pill / border #c8c8c8
lorem
Neutral — Pill / #f0f1eb
lorem ipsum
Neutral — Pill / #f0f1eb
Button States
lorem ipsum
Default — #fac83c
lorem
Hover — orange
lorem ipsum
Active — #ea8900
lorem
Disabled — bg #ffe89f / text #5a5a5a
Pills / Badges
lorem ipsum 20%OFF SALE lorem NEW
05 / Cards — lorem ipsum

lorem ipsum dolor sit

🍞
lorem No.1

BASE BREAD lorem ipsum dolor

¥184 /lorem(lorem)

lorem ipsum dolor sit amet consectetur. 1 lorem 1 lorem 1/3 lorem ipsum dolor.

lorem ipsum dolor
🍝
NEW

BASE PASTA lorem ipsum

¥390 /lorem(lorem)

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

lorem ipsum dolor
🍪
lorem ipsum dolor

BASE Cookies lorem

¥170 /lorem(lorem)

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

lorem ipsum
Feature Cards
🏋️

26 lorem ipsum dolor&lorem ipsum

1 lorem 1 lorem ipsum dolor sit 1/3 lorem ipsum. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
🌾

lorem ipsum dolor

lorem ipsum dolor sit, lorem ipsum dolor sit 10 lorem ipsum dolor sit amet.

lorem ipsum →
📦

lorem ipsum dolor / lorem OK

lorem ipsum dolor sit amet consectetur. lorem / lorem / lorem ipsum dolor sit amet consectetur.

lorem ipsum →
06 / Forms

lorem ipsum dolor

Default — border #c8c8c8 / radius 8px
Focus — border #fac83c / shadow brand 25%
Error — border #ff4a24 / shadow 12%
lorem ipsum dolor sit amet consectetur
07 / Elevation — lorem

Depth & Elevation

Level 0: Flat
lorem — lorem
Elevation 1
0 2px 8px rgba(0,0,0,0.06)
Elevation 2
0 8px 24px rgba(0,0,0,0.08)
Elevation 3
0 16px 40px rgba(0,0,0,0.10)
08 / Layout — Spacing & Radius

lorem ipsum dolor & lorem ipsum

Spacing Scale(8px lorem)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px
Medium
8px
Large
16px
Pill
9999px