DESIGN SYSTEM PREVIEW

lorem ipsum dolor.

Vermicular(vermicular.jp)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor＋Crimson Pro lorem, Yu Gothic lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum computed style lorem ipsum dolor.

ONLINE SHOP VERMICULAR VILLAGE
01 / Colors

lorem ipsum dolor

Brand / Foreground
Text Primary
#222426
lorem ipsum dolor
Charcoal Brown
#46413c
lorem / lorem ipsum dolor
Dark Brown
#413c37
lorem ipsum dolor
Soft Gray
#beb9b4
lorem ipsum dolor / lorem ipsum dolor
Vermicular Red
#c11920
lorem ipsum(lorem ipsum)
Surface / Background
Warm Off-white
#faf7f5
lorem ipsum
Warm Surface
#ecebe7
lorem ipsum
Light Gray
#f2f2f2
lorem ipsum dolor sit
Pure White
#ffffff
lorem / lorem ipsum dolor
02 / Typography(lorem)

lorem ipsum dolor

lorem ipsum dolor,
lorem, lorem ipsum dolor
lorem ipsum.
A1 Mincho (→ Shippori Mincho) / 37.8px / 300 / line-height: 1.67 / letter-spacing: 0.2emHERO H2
lorem ipsum dolor sit amet consectetur
A1 Mincho / 25.2px / 300 / line-height: 1.67 / letter-spacing: 0.2emSECTION H2
lorem ipsum
A1 Mincho / 12.6px / 300 / letter-spacing: 0.1emOVERLINE LABEL
Oven Pot 2
Crimson Pro / 21.6px / 300 / line-height: 1.25 / letter-spacing: 0.025emPRODUCT H3
Repair Program
Crimson Pro / 19.8px / 300 / line-height: 1.42SUB H3
lorem ipsum dolor, lorem ipsum dolor 1936 lorem ipsum dolor sit amet consectetur adipiscing elit sed. “lorem ipsum dolor. ”lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.
A1 Mincho / 13.5px / 300 / line-height: 1.67 / letter-spacing: 0.04emBODY
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur.
Yu Gothic Medium / 13px / 300 / line-height: 1.67 / letter-spacing: normalBODY GOTHIC
VERMICULAR VILLAGE( lorem / lorem )
Crimson Pro / 12.6px / 300 / color: #beb9b4CAPTION EN
lorem ipsum dolor sit,
lorem ipsum dolor sit
VERMICULAR LIFETIME REPAIR GUARANTEE
ONLINE SHOP
03 / Products

lorem ipsum dolor

Oven Pot 2

Oven Pot 2

lorem ipsum dolor 2

lorem ipsum dolor sit amet, lorem ipsum dolor
Frying Pan

Frying Pan

lorem ipsum

lorem ipsum dolor sit amet, lorem ipsum dolor
Rice Pot

Rice Pot

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem ipsum
04 / Buttons

lorem

ONLINE SHOP
PILL CTA
radius 27px / Crimson Pro 10.8px
VIEW DETAIL
PILL DARK
bg #46413c / radius 27px
SOLD OUT
DISABLED
muted border + text
05 / Forms

lorem ipsum

DEFAULT — border #beb9b4
FOCUS — border #46413c
ERROR — border #c11920
06 / Elevation & Radius

lorem ipsum

Vermicular lorem ipsum dolor sit amet. lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor ONLINE SHOP lorem pill lorem(radius 27px).

RADIUS 0
lorem / lorem ipsum(lorem ipsum)
RADIUS 27
CTA lorem(pill lorem)
FLAT SURFACE
lorem ipsum dolor sit amet
07 / Layout

lorem ipsum

8px
16px
24px
32px
40px
64px
96px