Design System Preview
lorem lorem — ito-ya.co.jp

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
ITOYA Red
#c70b17
lorem ipsum dolor sit / lorem ipsum dolor
Warm Brown
#a57658
lorem / lorem ipsum dolor
Warm Beige
#decbac
lorem / lorem ipsum dolor sit
Green Accent
#73ba66
lorem ipsum / lorem
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#999999
lorem ipsum dolor / lorem
Text on Dark
#ffffff
lorem ipsum dolor sit amet consectetur
Surface & Background
Header Dark
#333333
lorem ipsum / lorem ipsum
Content BG
#f0f0f0
lorem ipsum dolor
Card Surface
#ffffff
lorem / lorem ipsum dolor
Border Dark
#000000
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

NEW ARRIVAL — English Section Title
Open Sans / 34px / 700 / line-height: 1.4 / letter-spacing: 0.01emlorem ipsum
lorem ipsum dolor — lorem ipsum dolor
Open Sans + lorem ipsum / 30px / 700 / line-height: 1.2 / letter-spacing: normalH2(lorem)
lorem ipsum, lorem ipsum, lorem ipsum dolor.
lorem ipsum dolor ProN W3 / 30px / 700 / line-height: 1.8lorem ipsum dolor(lorem ipsum)
lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor ProN W3 / 25px / 700 / line-height: 1.8lorem ipsum dolor
lorem ipsum dolor — 18px lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. line-height 1.8 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. letter-spacing lorem palt lorem ipsum dolor sit. ABCabc 123
Open Sans + lorem ipsum / 18px / 400 / line-height: 1.8 / letter-spacing: normal / palt: loremBody
lorem ipsum dolor — Filter UI
Open Sans + lorem ipsum / 16px / 700 / line-height: 2.69lorem ipsum UI
lorem ipsum dolor — lorem ipsum / lorem ipsum dolor (14px)
Open Sans + lorem ipsum / 14px / 400 / line-height: 1.5 / color: #999999Caption
03 / Article — lorem ipsum

lorem ipsum dolor — lorem ipsum dolor

lorem ipsum dolor sit amet

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

lorem ipsum dolor

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

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
bg: #000 / radius: 0
lorem ipsum
Outline
border: 1px solid #000
lorem ipsum dolor
Brand Red
bg: #c70b17(lorem ipsum dolor)
lorem ipsum
Warm Brown
bg: #a57658
Carousel Dots
border-radius: 50% / border: 1px solid #333333
05 / Cards

lorem ipsum

Fountain Pen

lorem ipsum dolor ROMEO No.3

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

¥33,000 (lorem)
SALE
Notebook

lorem ipsum lorem ipsum dolor A5

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

¥1,650 (lorem)
Leather

lorem ipsum dolor 3 lorem

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

¥8,800 (lorem)
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #999999, radius: 0px
lorem ipsum — border: #333333
lorem ipsum dolor sit amet consectetur
lorem — border: #c70b17 (Brand Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
Elevation 1
lorem ipsum dolor
Elevation 2
lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum
08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale
4px
8px
16px
24px
40px
64px
Content Widths
Container Max 1200px
Content Area 960px
Article 640px
Grid
1
2
3
4
4-column grid / gap: 20px(lorem ipsum)