Design System Preview
Epson.jp

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

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Blue
#005ab4
lorem / lorem ipsum
Brand Navy
#10218b
CTA / lorem ipsum dolor sit
Text
Text Primary
#333333
lorem ipsum dolor
Text Strong
#000000
lorem ipsum dolor (h1)
Link
#005ab4
lorem ipsum dolor
Product Text
#10218b
lorem ipsum dolor sit
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor
Surface Card
#fafafa
lorem ipsum dolor
Footer
#ebebeb
lorem ipsum dolor
Border Light
#eeeeee
lorem ipsum / lorem ipsum
Border Medium
#c7c7c7
lorem ipsum dolor
Border Select
#cccccc
lorem ipsum dolor sit
Search UI
Tab Active
#666666
lorem ipsum(lorem ipsum)
Tab Inactive
#dddddd
lorem ipsum(lorem ipsum dolor)
02 / Typography

lorem ipsum dolor sit

lorem ipsum — Heading 1
34px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Heading 2 (top)
36px / 700 / line-height: normal / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Heading 2 (products)
28px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem / lorem ipsum dolor sit — Heading 3
24px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Heading 4
20px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Product Item (16px)
16px / 400 / line-height: 1.5 / color: #10218b (navy)lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. ABC abc 123
14px / 400 / line-height: 1.5 / letter-spacing: normallorem
lorem ipsum dolor — lorem ipsum dolor (14px)
14px / 400 / line-height: 1.5 / color: #005ab4lorem
lorem ipsum dolor — Notice (14px bold)
14px / 700 / line-height: 1.5 / font-family: Meiryolorem ipsum
lorem ipsum dolor — lorem ipsum / lorem ipsum / lorem ipsum dolor (11px)
11px / 400 / line-height: 1.5lorem ipsum / lorem ipsum
© Seiko Epson Corp. / Epson Sales Japan Corp.
11px / 700 / font-family: Arial / lorem ipsum dolorlorem ipsum
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum

lorem ipsum dolor

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

lorem / lorem ipsum dolor sit

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

lorem ipsum dolor

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
CTA (Navy)
lorem ipsum dolor
Outline
Search (Blue + pill)
10 20 30
Result Tabs
05 / Cards — lorem ipsum

lorem ipsum dolor sit

🖨
lorem ipsum dolor
 📷
lorem ipsum dolor sit
 💼
lorem ipsum dolor sit
 📽
lorem ipsum dolor
 🕶
lorem ipsum dolor
 ⌚
lorem ipsum
 💻
lorem ipsum
 📄
lorem ipsum
 🤖
lorem ipsum dolor
 📊
lorem ipsum
 🏷
lorem ipsum dolor
 📐
lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum — border: 1px solid #c7c7c7, radius: 0px
lorem ipsum — border: #005ab4 (Brand Blue)
lorem — border: #cc0000
lorem ipsum dolor — border: 1px solid #cccccc, radius: 3px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, border: 1px solid #eeeeee lorem. lorem ipsum dolor
Border Medium
border: 1px solid #c7c7c7. lorem ipsum / lorem ipsum
Surface Light
background: #f7f7f7. lorem ipsum dolor sit
Footer Surface
background: #ebebeb. lorem ipsum dolor

Epson lorem ipsum dolor sit amet. box-shadow lorem ipsum none. lorem ipsum dolor sit amet consectetur adipiscing.

08 / Layout

lorem ipsum

Max Width ~960px
Product Grid 4-column
Article Content ~640px