Wacoal Design System

Design System Preview
WACOAL -- lorem ipsum, lorem ipsum.

wacoal.jp lorem ipsum dolor sit amet consectetur. lorem ipsum dolor CTA, lorem ipsum dolor sit, lorem ipsum dolor sit amet. computed style lorem ipsum dolor.

DESIGN.md lorem lorem ipsum dolor sit
01 / Colors

Color Palette

Brand
Wacoal Rose
#e67f95
CTA, lorem ipsum dolor, lorem ipsum
Wacoal Burgundy
#920b3b
lorem ipsum dolor
Neutral
Text Primary
#323334
lorem ipsum dolor / lorem / lorem
Background
#ffffff
lorem ipsum
Surface
#f6f6f6
lorem ipsum / lorem ipsum(91 lorem)
Surface Alt
#f7f7f7
lorem ipsum dolor sit amet
Section BG
#ededed
lorem ipsum dolor sit
Border
#e0e0e0
lorem ipsum dolor / lorem ipsum
Footer BG
#323334
lorem ipsum dolor(lorem ipsum dolor)
02 / Typography

Typography

lorem ipsum dolor sit -- Section Heading
Yu Gothic / 32px / 400 / line-height: 1.7section heading
lorem ipsum dolor -- Heading 2
Yu Gothic / 24px / 400 / line-height: 1.7content h2
lorem ipsum -- Heading 2 Bold
Yu Gothic / 24px / 700 / line-height: 1.7h2 bold
lorem ipsum dolor sit -- Span Section
Yu Gothic / 20px / 500 / line-height: 1.7span
lorem ipsum dolor -- Body. lorem ipsum dolor sit amet consectetur line-height: 1.7 lorem ipsum dolor. body lorem font-weight lorem 500 lorem, lorem ipsum dolor sit amet consectetur adipiscing. letter-spacing lorem normal, palt lorem ipsum dolor sit.
Yu Gothic / 16px / 500 / line-height: 1.7 / letter-spacing: normal / palt: lorembody
lorem ipsum dolor -- Small
Yu Gothic / 14px / 500 / line-height: 1.7small
lorem ipsum -- Login CTA
Yu Gothic / 18px / 500 / bg: #e67f95 / radius: 0pxCTA
lorem ipsum dolor -- Nav Header
Yu Gothic / 24px / 500 / line-height: 1.7nav header
lorem ipsum dolor / lorem ipsum -- Nav Footer / Copyright
Yu Gothic / 12px / 500 / line-height: 1.7footer
lorem ipsum dolor(lorem ipsum dolor)--lorem ipsum dolor
Yu Gothic / 16px / 500 / color: #920b3b (Wacoal Burgundy)link

Web lorem ipsum dolor: loremNoto Sans JP(Google Fonts)lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
lorem: lorem ipsum dolorline-height: 1.7 lorem.font-weight: 500 lorem body lorem.
lorem DESIGN.md §3 lorem.

03 / Article & Product

Article & Product

Wacoal Body Book

lorem ipsum dolor sit amet consectetur

2026.05.09 / Wacoal Editorial / Reading time: 5 min

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

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsumlorem ipsum dolor sit ametlorem, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum dolor lorem
LINGERIE
WACOAL
lorem ipsum 3/4 lorem ipsum
¥6,490 (lorem)
COMFORT
WING
lorem ipsum dolor lorem ipsum
¥3,520 (lorem)
SPORTS
CW-X
lorem ipsum dolor HTY168
¥5,280 (lorem)
NIGHTWEAR
WACOAL
lorem ipsum dolor lorem ipsum
¥16,500 (lorem)
lorem ipsum dolor sit
04 / Buttons

Buttons

CTA lorem ipsumborder-radius: 0px lorem ipsum dolor. HOME lorem ipsumborder-radius: 30px. lorem ipsum3px。

lorem ipsum
Primary CTA (Rose)
18px / 500 / radius: 0
WEB STORE
Secondary (Outline)
14px / 500 / radius: 0
lorem ipsum
Burgundy
14px / 500 / radius: 0
lorem ipsum
Outline Rose
14px / 500 / radius: 0
HOME
Pill (HOME only)
14px / 500 / radius: 30px
lorem ipsum
Disabled
14px / 500 / opacity: 0.5
05 / Cards

Cards

FITTING
Service

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor →
BODY BOOK
Column

lorem ipsum dolor sit Body Book

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

lorem ipsum dolor →
SUSTAINABILITY
CSR

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor →
06 / Forms

Forms

lorem ipsumborder-radius: 3px, lorem#f6f6f6, 44px lorem ipsum dolor sit amet. lorem ipsum dolor Wacoal Burgundy, lorem ipsum Wacoal Rose.

lorem ipsum -- bg: #f6f6f6 / border: 1px solid #323334 / radius: 3px / height: 44px
lorem ipsum -- border: 1px solid #920b3b(Wacoal Burgundy)
lorem -- border: 1px solid #e67f95(Wacoal Rose)
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1
0 2px 4px rgba(0,0,0,0.06)
Level 2
0 4px 12px rgba(0,0,0,0.08)
Level 3
0 8px 24px rgba(0,0,0,0.12)

lorem ipsum dolor. lorem(#f6f6f6)lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet Level 1 lorem ipsum dolor sit. Level 2 / 3 lorem ipsum / lorem ipsum dolor sit.

08 / Layout

Layout

Spacing Scale
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
64px
Container & Content Widths
Container Max 1200px
Main Content 940px
Article 680px
Breakpoints

Mobile: ≤ 767px / Tablet: 768 -- 1024px / Desktop: > 1024px
lorem ipsum dolor sit 44px × 44px lorem(WCAG lorem).