SWEETNESS FOR ALL

LOTTE lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor computed style lorem(2026-06-18 lorem)lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit lorem ipsum dolor
01 / Colors
Color Palette
Brand
Lotte Red
#dd1d18
lorem ipsum / lorem ipsum / CTA / lorem ipsum
Lotte Red Dark
#c6130e
lorem / lorem / lorem ipsum dolor
Neutral
Text Primary
#333333
lorem / lorem / lorem
Text Secondary
#6b6b6b
lorem ipsum dolor sit / lorem ipsum dolor
Text Tertiary
#666666
lorem ipsum dolor sit amet
Black
#000000
lorem ipsum dolor sit
Surfaces
White
#ffffff
lorem ipsum / lorem ipsum dolor
Surface Warm
#efece7
"lorem" "lorem ipsum dolor" lorem ipsum dolor
Surface Light
#f5f4f0
ABOUT lorem ipsum dolor
Semantic -- lorem ipsum
Danger
#dc2626
lorem / lorem(lorem)
Success
#16a34a
lorem / lorem(lorem)
Warning
#d97706
lorem / lorem(lorem)
02 / Typography
Typography
Campaign lorem ipsum dolor
EN: 30px / 900 / 0.06em / #dd1d18 • JP: 16px / 700 / 0.24em / #6b6b6blorem ipsum dolor sit
ABOUT LOTTE lorem ipsum dolor
EN: 30px / 900 / 0.06em / white • JP: 16px / 700 / 0.24em / whitelorem ipsum dolor sit
lorem -- H1 (Logo Area)
28px / 700 / line-height 1.15 / letter-spacing normallorem
lorem ipsum dolor -- H2 Section Title
21px / 700 / line-height 1.15 / letter-spacing normallorem ipsum
lorem ipsum -- H3 Product Title
16px / 700 / line-height 1.15 / letter-spacing 0.06emlorem
lorem ipsum dolor sit amet -- H3 Product Card
14px / 700 / line-height 1.15 / letter-spacing 0.04emlorem ipsum
lorem ipsum dolor -- lorem ipsum dolor sit amet 700. line-height 1.15 lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.
14px / 700 / line-height 1.15 / letter-spacing normal / color #333333Body
ABOUT lorem ipsum dolor -- lorem ipsum line-height 2.0 lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
16px / 700 / line-height 2.0 / letter-spacing normalABOUT lorem
lorem ipsum dolor -- lorem ipsum dolor sit. line-height lorem 1.5 lorem ipsum dolor. lorem #6b6b6b.
14px / 700 / line-height 1.5 / letter-spacing 0.06em / color #6b6b6bBrand Desc
lorem ipsum dolor sit
16px / 700 / line-height 1.15 / letter-spacing 0.12em / color white (on red bg)Nav Link
lorem ipsum -- lorem ipsum(lorem weight 400)
16px / 400 / line-height 1.15 / letter-spacing normalTab
lorem ipsum dolor -- 13px / 700
13px / 700 / line-height 1.15 / letter-spacing normalFooter
03 / Product
New Products
CHOCO PIE
NEW

lorem ipsum lorem ipsum

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

GHANA
BEST SELLER

lorem ipsum dolor sit amet

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

XYLITOL

lorem ipsum dolor

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

KOALA

lorem ipsum dolor

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

04 / Article
About Lotte

1948 lorem ipsum dolor, “lorem ipsum”lorem ipsum dolor, lorem ipsum dolor, lorem, lorem ipsum dolor sit, lorem ipsum dolor sit / lorem ipsum dolor sit amet. lorem ipsum dolor sit, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. 2030 lorem ipsum dolor sit amet consectetur 25%lorem ipsum dolor sit amet.

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing 100%lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

lorem ipsum dolor:lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.
ABOUT LOTTE

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

lorem ipsum dolor sit amet
05 / Buttons
Buttons
lorem ipsum dolor sit
Primary / #dd1d18 / radius 5px
lorem ipsum dolor
Outline / border 2px / radius 5px
lorem ipsum dolor
SNS lorem ipsum dolor sit
Outline White / border 2px solid white / radius 5px
Carousel Controls
‹
›
Arrow: bg #dd1d18 / radius 5px • Dot active: bg #dd1d18 • Dot inactive: white + border #dd1d18
Tabs
lorem ipsum
lorem ipsum dolor
IR lorem
lorem ipsum
Active: #333333 + red underline / Inactive: #666666 / 16px / 400
06 / Cards
Find Brands
CHOCOLATE
lorem ipsum dolor
ICE CREAM
lorem
GUM & CANDY
lorem / lorem ipsum
BISCUIT
lorem ipsum
07 / Forms
Forms
Default -- border #cccccc / radius 5px
Focus -- border #dd1d18 / shadow 3px
lorem ipsum dolor sit amet consectetur
Error -- border #dc2626 / shadow 3px
08 / Elevation
Depth & Elevation
Level 0: Flat
lorem -- lorem ipsum dolor
Level 1 (lorem)
0 2px 8px rgba(0,0,0,0.08)
Level 2 (lorem)
0 4px 16px rgba(0,0,0,0.10)
lorem ipsum dolor box-shadow: none. lorem ipsum dolor sit(lorem / #efece7 / #f5f4f0 / #dd1d18)lorem
09 / Layout
Layout
Spacing Scale(8px lorem)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
None
0px
Small
5px
Circle
100%