Design System Preview

KEYUCA

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.

lorem ipsum DESIGN.md lorem
01 / Colors
Color Palette

lorem ipsum dolor

Brand
Primary
#aa9977
lorem ipsum dolor(lorem ipsum dolor)
Secondary
#c28358
lorem ipsum(lorem ipsum / lorem ipsum)
Text
Text Primary
#323333
lorem ipsum dolor
Dark Grey
#707070
lorem ipsum dolor
Grey
#878787
lorem / CTA lorem
Grey Scale
Black
#000000
Text Primary
#323333
Dark Grey
#707070
Grey
#878787
Light Grey
#c6c6c6
Silver White
#e2e2e2
Surface & Background
White
#ffffff
lorem ipsum
Off-White
#f9f9f9
lorem ipsum
BG Primary
#f3f3f3
lorem ipsum dolor
BG Secondary
#f1f1f1
lorem ipsum
Semantic
Error
#ee2200
lorem / lorem
Carousel
Active Dot
#c28358
lorem ipsum dolor
Inactive Dot
#f3f3f3
lorem ipsum dolor
02 / Typography
Typography Hierarchy

lorem ipsum dolor sit

ENGLISH SECTION LABEL
font-en (Lato) / 16px / 500 / line-height: 1.375 / letter-spacing: 0.05em / color: #878787lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet
font-ja / 28px / 500 / line-height: 2.0 / letter-spacing: 0.05em / palt: loremH2 lorem
lorem ipsum dolor — KEYUCA lorem ipsum line-height: 2.0 lorem ipsum dolor. lorem ipsum dolor 2.0 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
font-ja / 13px / 500 / line-height: 2.0 / letter-spacing: 0.05em / palt: loremlorem(lorem ipsum dolor sit amet)
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur 3 lorem ipsum
font-ja / 13px / 500 / line-height: 1.7 / letter-spacing: 0.05emlorem
lorem ipsum dolor sit amet consectetur — lorem ipsum / lorem ipsum / lorem / lorem / lorem / lorem ipsum
font-ja / 11px / 500 / line-height: 2.0 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor sit — lorem ipsum dolor sit amet
"Hiragino Sans" / 12px / 400 / letter-spacing: 0.1emInput
¥12,800 (tax included)
font-en (Lato) / 14px / 400 / letter-spacing: 0.03emlorem ipsum
KEYUCA
font-en (Lato) / 18px / 700 / letter-spacing: 0.12emlorem ipsum
03 / Product
Product Sample

lorem ipsum dolor sit amet

lorem ipsum, lorem ipsum dolor

KEYUCA lorem“Simple & Natural”lorem ipsum dolor, lorem ipsum, lorem ipsum dolor, lorem ipsum, lorem / lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

Kitchen
lorem ipsum dolor sit amet 2 lorem lorem ipsum dolor
¥8,690 (tax included)
Curtain
lorem 1 lorem lorem ipsum dolor sit lorem ipsum dolor sit
¥6,490 (tax included)
Storage
lorem ipsum dolor sit amet lorem ipsum M lorem ipsum
¥2,190 (tax included)
Bath
lorem ipsum dolor L lorem lorem
¥3,990 (tax included)

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

04 / Buttons
Button Variations

lorem ipsum dolor sit

lorem ipsum dolor
Primary (radius: 6px)
lorem ipsum dolor
Outline (radius: 6px)
lorem ipsum
Secondary / Brand
lorem ipsum
Pill / Login (radius: 20px)
lorem ipsum dolor
Pill / Register
lorem ipsum
Outline Small
05 / Cards
Card Components

lorem ipsum dolor sit

640 x 640
Kitchen

lorem ipsum dolor sit amet consectetur 3 lorem ipsum

¥3,290
640 x 640
Curtain

lorem 1 lorem ipsum dolor sit amet

¥6,490
640 x 640
Storage

lorem ipsum dolor sit amet lorem ipsum M

¥2,190
06 / Forms
Form Elements

lorem ipsum dolor

lorem ipsum — border: #c6c6c6, radius: 4px, font: Hiragino Sans 12px
lorem ipsum — border: #aa9977 (primary / warm gold)
lorem ipsum dolor sit amet consectetur
lorem — border: #ee2200 (error)
Textarea — lorem ipsum dolor
07 / Elevation
Depth & Elevation

lorem ipsum

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 1px 4px rgba(0,0,0,0.06)
Level 2
0 2px 8px rgba(0,0,0,0.1)
Level 3
0 4px 16px rgba(0,0,0,0.12)
08 / Layout
Spacing & Layout

lorem ipsum dolor

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

Content Widths

Full Width 1120px
Main Content 940px
Product Grid (4 col) 1040px
Article / Form 620px
Product Card 280px