lorem ipsum dolor

lorem ipsum dolor.
lorem ipsum dolor, lorem ipsum.

Yakult lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit(yakult.co.jp)lorem computed style lorem(2026-05-31 lorem)lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit lorem ipsum dolor sit amet
01 / Colors

lorem ipsum dolor

Brand
Yakult Red
#e60039
lorem CTA / h2 lorem / lorem ipsum dolor
Blue Accent
#3f7ac3
lorem / lorem ipsum dolor sit amet
Category Surfaces
Warm Cream
#fbf6ec
lorem / lorem ipsum dolor
Warm Pink
#fff2f5
lorem ipsum dolor
Neutral
Black
#000000
h3 lorem ipsum dolor
Primary Text
#323232
lorem ipsum dolor
Secondary Text
#6e6e6e
lorem / lorem ipsum dolor
Tertiary Text
#333333
lorem / lorem ipsum
Neutral Surface
#f2f2f2
lorem / lorem ipsum dolor
White
#ffffff
lorem ipsum / lorem ipsum
Semantic
Danger
#cc0033
lorem / lorem(lorem)
Success
#16a34a
lorem / lorem(lorem)
Warning
#d97706
lorem / lorem(lorem)
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor. -- Section H2
36px / 700 / line-height 1.5 / color #e60039lorem ipsum dolor
lorem ipsum dolor sit amet -- Sub H3
24px / 700 / line-height 1.5 / color #000 / border-left 4px solid #e60039lorem ipsum dolor
lorem / lorem ipsum dolor -- Nav Mega
19px / 700 / line-height 1.58 / letter-spacing -0.067em / color #6e6e6elorem ipsum dolor
lorem ipsum dolor -- lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. “lorem ipsum”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit weight 500(Medium)lorem ipsum dolor sit amet consectetur adipiscing.
16px / 500 / line-height 1.5 / color #323232lorem
lorem ipsum dolor -- Nav Link
14px / 700 / line-height 2.14 (30px) / color #6e6e6elorem
2026.05.31 -- Date
14px / 500 / line-height 1.5 / color #333333lorem
lorem ipsum -- Label Badge
13px / 600 / line-height 30px / color #fff / bg #e60039 / radius 4px 4px 0 0lorem
03 / Product

lorem ipsum dolor

lorem ipsum dolor.

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

lorem ipsum dolor sit

lorem lorem ipsum(L. paracasei Shirota)lorem, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

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

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

※ lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor yakult.co.jp lorem ipsum dolor.

04 / Product Cards

lorem ipsum

🥛
lorem

Yakult 1000

1 lorem(100ml)lorem ipsum lorem ipsum 1000 lorem. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

lorem ipsum →
🍶
lorem

lorem

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

lorem ipsum →
✨
lorem

lorem ipsum

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

lorem ipsum →
05 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit
Primary CTA -- Pill / #e60039 / r50
lorem ipsum
Primary Small -- Pill / #e60039 / r20
lorem ipsum dolor sit amet
Ghost -- Outline Pill / r40
Tags / Badges
lorem ipsum lorem lorem lorem NEW
06 / Cards -- Category Surfaces

lorem ipsum dolor

lorem / lorem

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

lorem ipsum dolor →

lorem

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

lorem ipsum dolor →

lorem ipsum

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

lorem ipsum →
07 / Forms

lorem ipsum dolor

Default -- border #ccc / radius 4px
Focus -- border #e60039 / shadow 3px
lorem ipsum dolor sit amet consectetur
Error -- border #cc0033 / shadow 3px
08 / Elevation

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

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
CTA Small
20px
CTA Medium
40px
CTA Large
50px