Design System Preview
SHISEIDO — 1872 lorem ipsum dolor sit

shiseido.co.jp lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

DESIGN.md lorem lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Brand
Shiseido Red
#c80421
lorem. lorem ipsum dolor / lorem ipsum
Brand Text
#45433e
lorem / lorem ipsum dolor(lorem ipsum DG)
Neutral
Background
#ffffff
lorem ipsum dolor sit
Border / Surface Subtle
#d3d2cf
lorem ipsum / lorem ipsum dolor sit
Border Strong
#45433e
lorem ipsum dolor
Footer Background
#3d3d3d
lorem ipsum dolor sit amet
Text Inverse
#ffffff
lorem ipsum dolor sit
Semantic
Danger / Important
#c80421
Shiseido Red lorem
Warning
lorem
lorem ipsum(DESIGN.md §2)
Success
lorem
lorem ipsum(DESIGN.md §2)
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit — Heading 1
28px / 700 / line-height: 1.18 (33/28) / letter-spacing: normalheader
lorem ipsum, lorem ipsum dolor — Heading 2 (lead)
22px / 700 / line-height: 1.45 (32/22)service__lead
lorem ipsum dolor — Heading 2 (alert)
22px / 700 / line-height: 1.36 / color: #c80421attention__title
INFORMATION — Heading 2 (news)
22px / 700 / line-height: 1.0 / lorem ipsum dolornews__title
lorem ipsum dolor — Heading 2 (section)
21px / 700 / line-height: 1.24 (26/21)main h2
lorem ipsum — Heading 3 / 4
18px / 700 / line-height: 1.22 (22/18)service-s__title / service__sub__title
lorem ipsum dolor sit — Heading 2 (aside)
18px / 700 / line-height: 1.0info__title
lorem ipsum dolor sit — Heading 3 (small)
16.38px / 700 / line-height: 1.305service__content__title
lorem ipsum dolor — Body Emphasis(lorem / lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. )
16px / 500 / line-height: 1.5 (24/16)service__text
lorem ipsum dolor — Body. lorem ipsum dolor sit 14px / line-height 1.5 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. letter-spacing lorem normal, palt lorem ipsum dolor.
14px / 400 / line-height: 1.5 (21/14) / letter-spacing: normal / palt: lorembody / p / a / li
lorem ipsum dolor — Caption(lorem ipsum dolor sit amet consectetur / lorem)
12px / 500 / line-height: 1.5 (18/12)small p

Web lorem ipsum dolor:Inter（Google Fonts）+ Noto Sans JP(Google Fonts)lorem ipsum, lorem ipsum dolor OS lorem ipsum dolor sit amet consectetur adipiscing.
lorem DESIGN.md §3.2 lorem ipsum.

03 / Article & Product

lorem ipsum dolor sit amet

lorem ipsum dolor
SKINCARE STORY

lorem ipsum dolor, lorem ipsum dolor.

2026.05.05 ／ Beauty Editorial ／ Reading time: 4 min

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit“lorem ipsum dolor sit”lorem. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur—— lorem, 1872 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum, lorem ipsum dolor sit amet

lorem ipsum dolor, lorem ipsum, lorem ipsum dolor sit(NMF)lorem ipsum dolor sit amet consectetur. lorem ipsum 0.02mm lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit. lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum—— lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

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

SKINCARE
Lotion
Treatment Softener
lorem ipsum dolor lorem ipsum
¥6,600 (lorem／150mL)
SERUM
Essence
Ultimune Power Infusing Concentrate
lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
¥12,100 (lorem／50mL)
MAKEUP
Lipstick
ModernMatte Powder Lipstick
lorem ipsum dolor lorem ipsum lorem ipsum dolor
¥4,400 (lorem)
lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolorborder-radius: 0px lorem. lorem ipsum dolor sit, lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum
Primary(lorem / lorem)
16px / 700
lorem ipsum dolor sit
Secondary(lorem ipsum)
16px / 500
lorem ipsum dolor
Outline Strong(lorem)
14px / 400
lorem ipsum
Outline(lorem)
14px / 400
lorem ipsum dolor
Danger(lorem ipsum)
16px / 700
05 / Cards

lorem ipsum dolor sit

BEAUTY METHOD

lorem ipsum dolor, 3 lorem ipsum dolor

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

lorem ipsum
PRODUCT GUIDE

lorem ipsum dolor

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

lorem ipsum
BRAND STORY

1872 lorem, lorem ipsum dolor

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

lorem ipsum
06 / Forms

lorem ipsum dolor(3 lorem)

lorem ipsum dolor sit, 44px lorem ipsum dolor sit amet consectetur. lorem ipsum dolor border lorem#45433e(Border Strong)lorem ipsum, lorem ipsum Shiseido Red lorem ipsum dolor sit.

lorem ipsum — border: 1px solid #d3d2cf / radius: 0px / height: 44px
lorem ipsum — border: 1px solid #45433e(Border Strong)
lorem — border: 1px solid #c80421(Shiseido Red)／lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1(lorem)
0 1px 2px rgba(0,0,0,0.06)
Level 2(lorem)
0 4px 12px rgba(0,0,0,0.08)

lorem ipsum dolorbox-shadow: none. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. Level 1 / 2 lorem“lorem ipsum dolor sit amet consectetur”lorem.

08 / Layout

lorem ipsum dolor sit amet

Spacing Scale(8px lorem)
XS
8px
S
16px
M
24px
L
40px
XL
58px
XXL
80px
Container & Content Widths
Container Max 1280px
Main Content 940px
Article(lorem)680px
Footer Padding(lorem)80px
Breakpoints

Mobile: ≤ 767px ／ Tablet: 768 – 1024px ／ Desktop: > 1024px
lorem ipsum dolor sit 44px × 44px lorem(WCAG lorem.--swiper-navigation-size: 44px lorem ipsum).