Beauty Healthcare Food

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit computed style lorem ipsum dolor, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum / lorem / lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum lorem ipsum lorem ipsum dolor →
01 / Colors — lorem

lorem ipsum dolor

Brand — lorem ipsum dolor sit amet consectetur adipiscing
Brand Yellow
#ffd500
lorem CTA / lorem ipsum dolor sit amet
Brand Pink
#ffa8e2
lorem ipsum dolor / lorem ipsum dolor(lorem ipsum dolor sit)
Brand Blue
#248cff
lorem ipsum dolor / lorem ipsum
Brand Lime
#b2ff53
lorem ipsum dolor / lorem ipsum dolor sit amet
Brand Orange
#ffa646
lorem ipsum dolor / lorem ipsum
Orange Dark
#ff8c00
lorem ipsum dolor sit amet consectetur
Brand Purple
#6c55f0
lorem ipsum dolor / lorem ipsum dolor sit amet
Text & Neutral
Text Primary
#272727
lorem ipsum dolor / lorem / CTA lorem ipsum
Text Secondary
#585858
lorem ipsum dolor / lorem ipsum dolor
Text Dark
#2b2e38
lorem ipsum dolor / lorem ipsum dolor
Background & Surface
Page Background
#fafaef
lorem ipsum(lorem ipsum dolor)
Surface Light
#f8f8f8
lorem ipsum / lorem ipsum
Surface Beige
#f0f0e2
lorem ipsum dolor / lorem ipsum
White
#ffffff
lorem ipsum / lorem ipsum
Footer Dark
#272727
lorem ipsum dolor
Semantic — lorem ipsum
Danger
#dc2626
lorem / lorem(lorem)
Success
#16a34a
lorem / lorem(lorem)
Warning
#d97706
lorem / lorem(lorem)
02 / Typography — lorem

lorem ipsum dolor sit

font-feature-settings: "palt" — body lorem ipsum dolor sit
lorem ipsum dolor — H2 title-lv1
35px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onlorem
lorem ipsum / lorem ipsum dolor — H2 title-lv2
24px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onlorem
lorem / lorem / lorem ipsum — H3 title-lv3
16px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onlorem
lorem ipsum dolor — lorem ipsum“lorem ipsum dolor”lorem ipsum dolor sit amet consectetur, lorem ipsum, lorem ipsum dolor, lorem ipsum 3 lorem ipsum dolor sit. lorem ipsum dolor 13px / line-height 1.8 lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet palt(lorem ipsum dolor sit amet consectetur)lorem, lorem ipsum dolor sit amet consectetur adipiscing.
13px / 400 / line-height 1.8 / letter-spacing 0.05em / palt:onlorem
lorem ipsum dolor — lorem ipsum / lorem ipsum / IR
13px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onlorem
lorem ipsum dolor — Copyright, lorem ipsum dolor sit, lorem ipsum dolor
13px / 500 / line-height 1.8 / letter-spacing 0.05em / palt:onlorem ipsum
CTA lorem ipsum dolor
15px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onCTA
03 / Product — lorem ipsum / lorem ipsum / lorem

lorem ipsum dolor sit

🌸
Beauty

lorem

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

lorem ipsum dolor
💊
Healthcare

lorem

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

lorem ipsum dolor
🍦
Food

lorem ipsum dolor

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

lorem ipsum dolor
04 / Article — lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor sit“lorem ipsum dolor”lorem ipsum dolor sit amet consectetur, lorem ipsum, lorem ipsum dolor, lorem ipsum 3 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

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

lorem ipsum dolor sit amet consectetur

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

lorem ipsum:lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor 9:00–17:00 lorem.

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

05 / Buttons — Yellow Pill lorem

lorem ipsum dolor sit

lorem ipsum
Primary CTA — Pill / #ffd500 / radius 50px
lorem ipsum
Secondary — White Pill + Border
lorem ipsum dolor →
Text Link — #272727
Hamburger Button
Hamburger — Circle / #ffd500 / radius 50%
Pills / Badges — lorem ipsum dolor sit amet consectetur
Beauty Campaign Healthcare Wellness Food Special Default
06 / Cards — lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit

lorem ipsum dolor

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

lorem ipsum dolor sit amet

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

lorem ipsum dolor

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

lorem ipsum

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

CSR / lorem ipsum dolor

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

lorem ipsum

lorem ipsum dolor, lorem ipsum“lorem”lorem ipsum. lorem / lorem ipsum dolor sit amet consectetur.

07 / Forms — Pill Inputs

lorem ipsum dolor

Default — border #f0f0e2 / radius 50px
Focus — border #ffd500 / shadow yellow 3px
Error — border #dc2626 / shadow 3px
Search Input(lorem ipsum dolor)
Search — bg #f8f8f8 / radius 50px / border transparent
08 / 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)
09 / 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
50px
Circle
50%