Design System Preview
Kyocera (lorem) — lorem ipsum

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 / lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Text
Text Heading
#000000
lorem ipsum dolor
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Light
#999999
lorem ipsum dolor sit
Surface & Background
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor(lorem ipsum)
Surface Tag
#f9f9f9
lorem ipsum dolor
Divider
#ededed
lorem ipsum dolor
Footer
#f0f0f0
lorem ipsum dolor
Border
#dddddd
lorem ipsum / lorem
Navigation (Dark Gray)
Nav Header
#313131
lorem ipsum dolor
Nav Primary
#4f4f4f
lorem ipsum
Nav Secondary
#616161
lorem ipsum
Nav Highlight
#747474
TOP lorem
Search Button
#666666
lorem ipsum
Pagination Active
#999999
lorem ipsum
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Section Title (h2)
22.5px / 700 / line-height: 1.0 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum -- Sub Title (h3)
24px / 700 / line-height: 1.375 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- Feature Title (p)
20px / 700 / line-height: 1.4 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- Section Title (h2)
19px / 500 / line-height: 1.6 / border-bottom loremlorem ipsum dolor
lorem ipsum dolor -- Banner Title (h3)
18px / 700 / line-height: 1.389 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- Card Title (p)
16px / 700 / line-height: 1.625 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor sit amet -- lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum, lorem ipsum, lorem / lorem ipsum, lorem / lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 2.0 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur. line-height lorem 1.625 lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 1.625 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- lorem ipsum dolor (14px)
14px / 400 / line-height: 1.571 / color: #666666lorem ipsum dolor
lorem ipsum dolor sit -- Nav Link (13px / 500)
13px / 500 / line-height: 1.846lorem ipsum
lorem ipsum dolor -- Caption (12px)
12px / 400 / line-height: 1.417lorem ipsum dolor
03 / Article -- lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet consectetur

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

04 / Buttons

lorem ipsum dolor sit

Tag Button (lorem ipsum)
lorem ipsum dolor sit
Tag (radius: 6px)
lorem ipsum
Tag
lorem ipsum
Tag
lorem ipsum dolor
Tag
lorem ipsum dolor
Tag
Navigation & Action
lorem / lorem ipsum dolor
Nav Primary (#4f4f4f)
lorem ipsum
Outline
lorem ipsum dolor sit lorem
Nav Link (border)
Mega Menu Item
lorem ipsum dolor sit lorem ipsum dolor(lorem / lorem ipsum) lorem ipsum dolor
Navigation Demo
lorem lorem ipsum lorem ipsum dolor lorem ipsum TOP
lorem ipsum lorem ipsum lorem / lorem ipsum lorem / lorem ipsum
Pagination
1 2 3 4 5
Search
Search Button: bg #666666, border #666666
05 / Cards

lorem ipsum dolor sit

1440 x 810 Image

lorem ipsum dolor sit amet consectetur

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

lorem ipsum lorem ipsum dolor
1440 x 810 Image

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor lorem ipsum
1440 x 810 Image

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor lorem
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #dddddd, radius: 0px, font-size: 18px
lorem ipsum -- border: #000000
lorem ipsum dolor sit amet consectetur adipiscing
lorem -- border: #cc0000
lorem ipsum dolor sit amet -- 14px / 500
07 / Elevation -- lorem ipsum dolor

Depth & Elevation

Level 0: Flat
lorem. border: #dddddd lorem. lorem ipsum dolor sit
Surface Light
lorem #f7f7f7 lorem. lorem ipsum dolor
Surface Tag
lorem #f9f9f9 + border lorem
Navigation
lorem ipsum dolor #4f4f4f lorem ipsum dolor sit

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

08 / Layout

lorem ipsum & lorem ipsum dolor

lorem ipsum dolor sit
#000
#313131
#333
#4f4f4f
#616161
#666
#747474
#999
#ddd
#ededed
#f0f0f0
#f7f7f7
#f9f9f9
#fff
Design Characteristics