Design System Preview
DECORTE — Luxury Cosmetics

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

SHOP NOW DESIGN.md
01 / Colors

lorem ipsum dolor

Brand / CTA
Black
#000000
lorem ipsum dolor
Dark Gray
#333333
CTA lorem ipsum
Accent
Soft Pink
#ffebea
lorem ipsum dolor sit
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#999999
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f0f0f0
lorem ipsum dolor
Border
#d3d3d3
lorem ipsum dolor
Border Strong
#999999
lorem ipsum dolor
Dot Inactive
#dbdbdb
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Heading 2
Noto Sans JP / 20px / 700 / line-height: 1.7 / letter-spacing: 0.05em / palt: loremSans
lorem ipsum — Heading 3
Noto Sans JP / 18px / 700 / line-height: 1.7 / letter-spacing: 0.05em / palt: loremSans
lorem ipsum — Heading 4
Noto Sans JP / 16px / 700 / line-height: 1.7 / letter-spacing: 0.05em / palt: loremSans
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem weight 300 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur. letter-spacing: 0.05em lorem palt lorem ipsum dolor sit amet consectetur.
Noto Sans JP / 14px / 300 / line-height: 1.5 / letter-spacing: 0.05em / palt: loremSans
SKINCARE   MAKEUP   BASE MAKEUP   FRAGRANCE
Noto Serif JP / 13px / 400 / line-height: 1.0 / letter-spacing: 0.05emSerif / Nav
CATEGORY LABEL — lorem ipsum dolor
Noto Sans JP / 9px / 400 / letter-spacing: 0.05emSans / Label
03 / Article

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet

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

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

lorem ipsum dolor sit amet, lorem ipsum dolor sit Noto Serif JP lorem. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

ADD TO CART
Primary CTA
VIEW DETAILS
Outline
VIEW MORE
Ghost
SEARCH
Small
Carousel Indicators

border-radius: 0 - lorem ipsum dolor sit amet

lorem / lorem ipsum dolor sit

05 / Cards

lorem ipsum dolor sit

PRODUCT IMAGE
SKINCARE

lorem ipsum lorem ipsum dolor lorem ipsum dolor

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

¥12,100 (tax included)
PRODUCT IMAGE
MAKEUP

lorem lorem ipsum lorem ipsum

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

¥4,400 (tax included)
PRODUCT IMAGE
BASE MAKEUP

lorem lorem lorem ipsum dolor sit

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

¥6,600 (tax included)
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #999999, radius: 0
lorem ipsum — border: #000000
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #c53030
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Elevation 1
lorem ipsum dolor, lorem ipsum dolor
Elevation 2
lorem ipsum, lorem ipsum dolor

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

08 / Layout

lorem ipsum dolor sit amet

Spacing Scale
4px
8px
16px
24px
40px
64px
Content Widths
Max Container 1200px
Content Area 960px
Article / Text 640px
Accent Color

Soft Pink — lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod #ffebea. lorem ipsum dolor sit amet consectetur adipiscing elit.