design system preview

Unlock the Power
of Your Radiance

Cle de Peau Beaute(cledepeau-beaute.com)lorem ipsum dolor sit amet consectetur adipiscing. Noto Sans JP / Weight 300, lorem ipsum dolor sit, lorem ipsum dolor sit. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / colors

Color Palette

text
Dark Navy
#081f2c
lorem / lorem ipsum dolor
Body Text
#505050
lorem / h4
Secondary
#6d717a
lorem ipsum dolor / lorem
Placeholder
#979797
lorem ipsum dolor sit
Disabled
#bfc2c6
lorem ipsum dolor
surface
Background
#ffffff
lorem ipsum dolor
Warm Cream
#fdf9f3
lorem ipsum dolor sit
Disabled Surface
#f7f8f9
lorem ipsum dolor
Dark Navy Surface
#081f2c
lorem ipsum / lorem
02 / typography

Typography

lorem ipsum, lorem.
Noto Sans JP / 34px / 300 / line-height: 1.18 / letter-spacing: 0.08emHeading 1
lorem ipsum dolor sit
Noto Sans JP / 20px / 300 / line-height: 1.1 / letter-spacing: 0.08emHeading 2
lorem / lorem
Noto Sans JP / 17px / 300 / line-height: 1.5 / letter-spacing: 0.04emCard Heading
lorem ipsum dolor sit
Noto Sans JP / 14px / 400 / line-height: 1.6 / letter-spacing: 0.08emHeading 4 / Label
lorem / lorem / lorem lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor.
Noto Sans JP / 14px / 300 / line-height: 1.5 / letter-spacing: 0.03em / color: #6d717aBody
2026 lorem lorem ipsum dolor
Noto Sans JP / 12px / 300 / line-height: 1.5 / color: #6d717aCaption / Small
lorem ipsum dolor
Noto Sans JP / 12px / 500 / letter-spacing: 0.08em / color: #081f2cButton Label
03 / product

Product Cards

Le Serum
Skincare

lorem / lorem

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

27,500 lorem(lorem)
La Creme
Skincare

lorem / lorem ipsum

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

55,000 lorem(lorem)
Teint Naturel
Base Makeup

lorem ipsum dolor lorem ipsum

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

13,200 lorem(lorem)
04 / buttons

Buttons

lorem ipsum dolor
Primary (radius 3px)
lorem ipsum
Secondary (radius 3px)
lorem ipsum
Disabled
lorem ipsum dolor
Footer CTA
05 / forms

Forms

lorem
Search Input / 24px / weight 300 / underline only
Default / radius 0 / border rgba(8,31,44,0.2)
Focus / border #081f2c
lorem ipsum dolor sit amet consectetur adipiscing
Error / border #c45050
06 / elevation

Depth & Elevation

Flat (Level 0)
box-shadow: none
Cream Surface (Level 1)
background: #fdf9f3
Hover Card (Level 2)
box-shadow: 0 2px 8px rgba(8,31,44,0.06)
07 / layout

Spacing & Width

Spacing Scale

8px
16px
24px
32px
48px
80px

Content Widths

Full Bleed Hero 100vw
Content Area 1200px
Body Text 600px