Design System Preview
CHOYA -- lorem ipsum

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

lorem ipsum→ DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
CHOYA Green
#16ae41
lorem ipsum dolor / lorem
Button Green
#2dae37
lorem ipsum CTA
Category Accent
Gold
#ccac38
CRAFT CHOYA
Red
#e14141
lorem
Blue
#3d9cc8
lorem ipsum dolor
Orange
#ee9303
lorem ipsum dolor
Pink
#fb5e82
lorem
Neutral
Text Dark
#333333
lorem ipsum dolor
Text Primary
#666666
lorem / lorem ipsum
Border Light
#cccccc
lorem ipsum dolor
Surface Light
#f5f5f5
lorem ipsum dolor
Background
#ffffff
lorem ipsum
Surface Dark
#323232
CM/MOVIE lorem ipsum
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- H2 Section
Noto Serif JP / 36px / 600 / line-height: 1.3 / letter-spacing: 0.15em / color: #16ae41lorem ipsum dolor
lorem ipsum dolor -- H1 Page Title
Noto Serif JP / 31px / 400 / line-height: 1.3 / letter-spacing: 0.075emlorem ipsum
lorem ipsum dolor -- H3 Recommend
Noto Serif JP / 25px / 700 / line-height: 1.3 / letter-spacing: 0.15emlorem ipsum dolor sit
CTA lorem ipsum -- Button Text
Noto Serif JP / 20px / 500 / line-height: 1.3 / letter-spacing: 0.1emlorem ipsum dolor
lorem -- H3 Product Name
Noto Sans JP / 16px / 400 / line-height: 1.3 / letter-spacing: 0.1emlorem ipsum
lorem ipsum dolor -- lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum 1914 lorem ipsum dolor, 100 lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Noto Sans JP / 14px / 400 / line-height: 2.0 / letter-spacing: normallorem
lorem ipsum dolor / lorem ipsum dolor -- Caption (10px)
Noto Sans JP / 10px / 400 / line-height: 1.3lorem ipsum dolor
03 / Article -- lorem ipsum

lorem ipsum dolor

lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit

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

lorem ipsum dolor

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

lorem, lorem, lorem lorem

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum→
Ghost CTA (Primary)
lorem, 20 lorem ipsum
Pill CTA (Age Gate)
EN
Language Selector
Category Buttons
lorem
lorem
CRAFT
CRAFT CHOYA
lorem ipsum
lorem ipsum dolor
lorem ipsum
lorem ipsum dolor
lorem
lorem
lorem
lorem
05 / Cards

lorem ipsum dolor sit

lorem
CRAFT CHOYA

The CHOYA SINGLE YEAR

lorem ipsum dolor sit amet consectetur. 1 lorem ipsum dolor sit amet consectetur.

lorem ipsum→
lorem
lorem

lorem ipsum dolor

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

lorem ipsum→
lorem
lorem ipsum dolor

lorem ipsum The CHOYA

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

lorem ipsum→
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #cccccc, radius: 0px
lorem ipsum -- border: #16ae41 (CHOYA Green)
20 lorem ipsum dolor sit amet consectetur
lorem -- border: #e14141 (Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor(lorem)
Elevation 1
0px 2px 8px rgba(0,0,0,0.08)
Elevation 2
0px 4px 16px rgba(0,0,0,0.12)
Focus Ring
#16ae41 (CHOYA Green)
08 / Dark Surface

CM / MOVIE lorem ipsum

Surface Dark (#323232) lorem ipsum dolor sit amet consectetur. CM lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing.

CM lorem→
09 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Container 1200px
Content Area 1000px
Article 680px