Design System Preview
PLST — lorem ipsum

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary / CTA
Primary Default
#000000
CTA lorem ipsum
Primary Hover
#2a2a2a
lorem ipsum
Primary Pressed
#3e3e3e
lorem ipsum
Accent / Semantic
Accent Blue
#005db5
lorem / lorem ipsum
Promotional Red
#c93141
SALE / lorem(PLST lorem)
Attention Red
#ee0000
lorem / lorem ipsum
Positive Green
#00ab0f
lorem / lorem
Badge / Seasonal
Cookie Badge
#3860be
Cookie lorem ipsum dolor
Seasonal Green
#468254
lorem ipsum dolor
Dark Blue-Gray
#27455c
lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor(PLST = lorem ipsum dolor)
Text Secondary
#6a6a6a
lorem ipsum dolor
Text Disabled
#ababab
lorem ipsum dolor
Placeholder
#767676
lorem ipsum dolor
Surface / Border
Background
#ffffff
lorem ipsum
Surface Tertiary
#f4f4f4
lorem ipsum dolor / lorem ipsum(lorem)
Border / Divider
#dadada
lorem ipsum / lorem ipsum
Tertiary Hover
#fafafa
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit — Hero (32px / 300)
32px / weight 300 / line-height: 1.4 / letter-spacing: normallorem ipsum
lorem ipsum dolor — H2 Section (24px / 300)
24px / weight 300 / line-height: 1.4 / letter-spacing: normallorem ipsum
lorem ipsum — H2 Nav (20px / 300)
20px / weight 300 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Span Nav (17px / 400)
17px / weight 400 / line-height: 1.2 / letter-spacing: normallorem
lorem ipsum — H3 (16px / 700)
16px / weight 700 / line-height: 1.3 / letter-spacing: normallorem ipsum
lorem ipsum dolor — P Sub (17px / 300). PLST lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur weight 300 lorem ipsum dolor.
17px / weight 300 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — P Body (14px / 300). lorem ipsum dolor sit amet consectetur. weight 300 lorem ipsum, PLST lorem ipsum dolor sit. ABCabc 123 lorem ipsum.
14px / weight 300 / line-height: 1.5 / letter-spacing: normallorem
Cookie lorem — H4 (14px / 700)
14px / weight 700 / line-height: 1.5lorem ipsum
lorem ipsum dolor — A (16px / 400)
16px / weight 400 / line-height: normallorem
03 / Product — lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit, lorem ipsum dolor sit amet.

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

lorem: lorem ipsum dolor 50%, lorem ipsum 50%. lorem ipsum dolor sit amet. lorem ipsum: XS–XL.

¥5,990 (lorem)
lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA (radius 2px)
lorem ipsum
Outline (radius 2px)
SALE lorem ipsum
Promotional (#c93141)
lorem ipsum
Category Pill (999px)
lorem
Category Pill (999px)
Search Pill (999px)
Cookie Filter
Badge (#3860be / 17px)
SEASON
Seasonal (#468254 / 17px)
SALE
SALE Badge (#c93141)
05 / Cards — lorem ipsum

lorem ipsum dolor sit

480 x 640

lorem ipsum dolor sit amet

¥5,990
480 x 640
SALE

lorem ipsum dolor sit amet consectetur

¥2,990¥4,990
480 x 640

lorem ipsum dolor sit amet consectetur

¥3,990
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dadada, radius: 2px
lorem ipsum — border: #005db5 (Accent Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #ee0000 (Attention Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Elevation 1
lorem ipsum dolor
Elevation 2
lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum
Focus Ring
#005db5 (Accent Blue)
08 / Layout — Spacing Scale

lorem ipsum dolor

4px
8px
16px
24px
32px
48px
64px

Content Widths

Main Content 1200px
Product Grid 1040px
Product Detail 620px