Design System Preview
KING JIM — 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 ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Blue
#418fde
CTA lorem ipsum / lorem ipsum
Brand Blue Dark
#3381d0
lorem ipsum dolor
Text
Text Primary
#333333
lorem / lorem ipsum dolor
Black
#000000
lorem ipsum
Semantic(lorem ipsum)
Danger
#c41e3a
lorem / lorem
Success
#2e8b57
lorem / lorem
Warning
#d4a017
lorem
Surface & Border
White
#ffffff
lorem ipsum
Surface Blue
#f0f5f9
lorem ipsum dolor
Surface Gray
#f2f3f5
lorem ipsum dolor
Surface Blue Light
#f2f7fb
lorem ipsum dolor
Nav BG
#f6f6f6
lorem ipsum dolor sit
Gray Border
#cccccc
lorem ipsum dolor
Divider
#dddddd
lorem ipsum
Light Gray
#efefef
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum — Page Title H1
38px / 900 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum — Section H2
36px / 900 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum — Mega Nav Title
27px / 900 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor sit
lorem ipsum dolor / lorem ipsum dolor — Category H3
24px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Sub Heading H3
20px / 700 / line-height: 1.75 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor / lorem ipsum dolor — Mega Nav Label
19px / 700 / line-height: 1.25 / letter-spacing: normallorem ipsum dolor sit
lorem ipsum / lorem ipsum / IR lorem — Nav Link
17px / 400 / line-height: 1.75 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — News Heading
16px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — line-height 1.75 lorem ipsum dolor sit. lorem ipsum dolor(lorem ipsum dolor Pro W3)lorem ipsum dolor. letter-spacing lorem normal lorem, lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 1.75 / letter-spacing: normallorem
“lorem ipsum dolor sit amet consectetur”lorem ipsum dolor — News Title
15px / 700 / line-height: 1.75 / letter-spacing: normallorem ipsum
lorem ipsum dolor — #3381d0 lorem ipsum dolor sit
16px / 400 / line-height: 1.75 / color: #3381d0lorem
SEARCH / GLOBAL / MENU — Utility Label
10px / 700 / line-height: 1.2 / letter-spacing: normallorem ipsum dolor sit amet
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

“lorem”PRO MARK SR-MK1

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

lorem ipsum

lorem ipsum4mm / 6mm / 9mm / 12mm / 18mm / 24mm
loremAC lorem ipsum / lorem 3 lorem ipsum dolor x 6 lorem
lorem ipsumlorem 146(W) x 133(D) x 64(H) mm
loremlorem 470g(lorem / lorem ipsum dolor sit amet)
loremBluetooth Ver.5.0

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary(lorem ipsum)
lorem ipsum
Blue Border
lorem ipsum dolor
Gray Border
lorem ipsum
Header Button
lorem
Danger(lorem)
lorem ipsum border-radius: 0px(lorem). lorem ipsum dolor. lorem ipsum 2px solid.
05 / Cards

lorem ipsum dolor sit

lorem PRO lorem ipsum

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

lorem ipsum dolor

lorem ipsum dolor

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

lorem ipsum dolor

lorem ipsum dolor“lorem”

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

lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 0px
lorem ipsum — border: #418fde(Brand Blue)
lorem — border: #c41e3a(Danger)
lorem ipsum dolor — padding: 5px 30px 3px 10px, radius: 0px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Header Button
border: 2px solid #333333
Gray Border CTA
border: 2px solid #cccccc
Blue Border CTA
border: 2px solid #418fde
Level 1(lorem)
0 2px 8px rgba(0,0,0,0.08)
Level 2(lorem)
0 4px 16px rgba(0,0,0,0.10)
lorem ipsum dolor sit amet consectetur adipiscing elit sed. box-shadow lorem ipsum none.
08 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale

5px
10px
15px
20px
32px
40px
44px

Content Widths

Main Content 1200px(lorem)
Product Grid 940px(lorem)
Article Content 620px(lorem)

Border Radius

loremborder-radius: 0px lorem. lorem ipsum dolor sit.