Maison KOSE Design System

Design System Preview
KOSE -- lorem ipsum, lorem ipsum dolor.

maison.kose.co.jp lorem ipsum dolor sit amet consectetur. lorem ipsum dolor CTA, Josefin Sans 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
KOSE Coral
#ee696f
CTA, lorem, lorem ipsum
Dark Accent
#3b4043
lorem ipsum / lorem ipsum CTA
Semantic
Info / Reservation
#56bbdc
lorem ipsum dolor
Pagination Blue
#4493c8
lorem ipsum dolor sit
Promo Yellow
#fbd10b
lorem / lorem ipsum dolor sit
Neutral
Background
#ffffff
lorem ipsum
Surface
#f3f3f3
lorem ipsum dolor sit
Surface Subtle
#f7f7f7
lorem ipsum dolor sit amet
Neutral Button
#efefef
lorem ipsum dolor
Border
#c8c8c8
lorem ipsum / lorem
Footer Background
#3b4043
lorem ipsum dolor
02 / Typography

Typography

Trend Item -- Section Display
Josefin Sans / 28px / 300 / letter-spacing: 0.18emsection heading
Information -- Sub Display
Josefin Sans / 20px / 300 / letter-spacing: 0.18emsub section
lorem ipsum dolor -- Heading 2
Yu Gothic / 24px / 400 / line-height: normalcontent h2
lorem ipsum dolor -- Body. KOSE lorem ipsum dolor 16px / weight 500 lorem ipsum dolor sit. EC lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. letter-spacing lorem normal, palt lorem ipsum dolor.
Yu Gothic / 16px / 500 / line-height: normal / letter-spacing: normal / palt: lorembody
lorem ipsum dolor -- Product Name(lorem lorem lorem ipsum dolor lorem ipsum dolor sit)
Yu Gothic / 14px / 400 / letter-spacing: 0.03emproduct name
¥3,520 (lorem) -- Product Price
Yu Gothic / 14px / 500 / letter-spacing: 0.03emproduct price
DECORTE -- Brand Label
Yu Gothic / 12px / 600 / letter-spacing: 0.03embrand label
lorem ipsum dolor -- CTA Button
Yu Gothic / 13px / 600 / bg: #ee696fCTA
lorem ipsum dolor -- Nav Links
Yu Gothic / 12px / 500 / letter-spacing: 0.04-0.1emnav
lorem ipsum dolor -- Tag Chip
Yu Gothic / 11px / 500 / border: 1px solid #c8c8c8 / radius: 18px (pill)tag chip

Web lorem ipsum dolor:Josefin Sans(Google Fonts)lorem ipsum dolor sit amet consectetur. loremNoto Sans JP(Google Fonts)lorem ipsum dolor sit.
lorem DESIGN.md §3.2 lorem ipsum.

03 / Article & Product

Article & Product

Beauty Column

lorem ipsum dolor, lorem ipsum dolor.

2026.05.09 / Maison KOSE Editorial / Reading time: 3 min

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

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor lorem ipsum UV lorem lorem lorem ipsum dolor lorem
SKINCARE
DECORTE
lorem ipsum lorem ipsum dolor lorem ipsum dolor
¥8,250 (lorem／30mL)
MAKEUP
VISEE
lorem lorem ipsum dolor lorem ipsum dolor sit
¥1,210 (lorem)
BASE
ESPRIQUE
lorem ipsum dolor lorem lorem
¥2,860 (lorem)
FRAGRANCE
JILL STUART
lorem ipsum dolor sit lorem ipsum dolor
¥5,500 (lorem／30mL)
lorem ipsum dolor
04 / Buttons

Buttons

CTA lorem ipsumborder-radius: 0px lorem ipsum dolor. lorem ipsum dolorborder-radius: 18px lorem pill lorem ipsum dolor sit amet.

lorem ipsum dolor
Primary CTA (Coral)
13px / 600 / radius: 0
lorem ipsum dolor
Secondary (Dark)
14px / 500 / radius: 0
lorem ipsum
Secondary Alt
14px / 500 / radius: 2px
lorem ipsum
Neutral
14px / 500 / radius: 0
lorem ipsum
Info (Reservation)
13px / 600 / radius: 0
lorem ipsum
Outline
14px / 400 / radius: 0
lorem ipsum
Tag Chip (Pill)
11px / 500 / radius: 18px
05 / Cards

Cards

SKINCARE
Beauty Tips

lorem ipsum dolor, 5 lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
MAKEUP
New Arrival

2026 lorem ipsum dolor, lorem ipsum dolor

VISEE, ESPRIQUE, FASIO lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
BRAND
Brand Story

DECORTE lorem ipsum

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

lorem ipsum →
06 / Forms

Forms

lorem ipsum dolor, 44px lorem ipsum dolor sit amet consectetur. lorem ipsum dolor border lorem#3b4043(Dark Accent)lorem ipsum, lorem ipsum KOSE Coral lorem ipsum dolor sit.

lorem ipsum -- border: 1px solid #c8c8c8 / radius: 0px / height: 44px
lorem ipsum -- border: 1px solid #3b4043(Dark Accent)
lorem -- border: 1px solid #ee696f(KOSE Coral)
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 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).