Design System Preview
seikowatches.com

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

lorem ipsum dolor

Brand
Primary Navy
#193c72
CTA / lorem / lorem ipsum dolor
Navy Dark
#213662
lorem ipsum dolor
Filter Blue
#3860be
lorem ipsum dolor sit
Text
Text Primary
#000000
lorem ipsum dolor
Text Mid
#4d4d4d
lorem ipsum dolor
Text Secondary
#696969
lorem ipsum dolor
Surface & Background
Background
#ffffff
lorem ipsum
Background Secondary
#f9f9f9
lorem / lorem ipsum dolor
Background Tertiary
#f0f0f0
lorem ipsum dolor
Footer
#1a1a1a
lorem ipsum dolor
Border
Border Default
#b3b3b3
lorem / lorem ipsum
Border Light
#d9d9d9
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Heading 2 (h2)
24px / 700 / line-height: 1.5 / letter-spacing: 0.35px / palt: loremlorem ipsum dolor
lorem ipsum dolor — Brand Link (a, 20px)
20px / 700 / line-height: 1.5 / letter-spacing: 0.35px“lorem ipsum dolor sit”lorem
lorem ipsum — Heading 3 (h3)
16px / 700 / line-height: 1.5 / letter-spacing: 0.35pxlorem ipsum / lorem ipsum dolor
lorem ipsum — Heading 4 (h4, Bold)
14px / 700 / line-height: 2.0 / letter-spacing: 0.35pxlorem ipsum / lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, 1881 lorem ipsum dolor, 140 lorem ipsum dolor sit amet consectetur. letter-spacing: 0.35px lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 2.0 / letter-spacing: 0.35px / palt: loremlorem
lorem ipsum dolor — Nav Link (12px)
12px / 500 / line-height: 1.5 / color: #4d4d4dlorem ipsum dolor
03 / Article

lorem ipsum dolor sit amet

lorem ipsum, lorem ipsum

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

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur“lorem ipsum”lorem, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABC 123

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

04 / Buttons

lorem ipsum dolor sit

Seiko ID lorem ipsum
Primary CTA（#193c72, radius: 0）
lorem ipsum dolor
Outline（border: #000, radius: 0）
lorem ipsum dolor sit
Secondary Outline（border: #193c72）
lorem
Category（bg: #f9f9f9, radius: 0）
lorem ipsum dolor
Footer（dark bg, outline white）

lorem ipsum dolor: border-radius: 0px(lorem ipsum dolor). pill lorem ipsum dolor.

05 / Cards

lorem ipsum dolor sit

GS

Grand Seiko

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

lorem ipsum dolor sit →
PS

Presage

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

lorem ipsum dolor sit →
PX

Prospex

lorem / lorem / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #b3b3b3, radius: 0px
lorem ipsum — border: #193c72(brand navy)
lorem — border: #c0392b
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor + lorem ipsum dolor
Elevation 1
0 1px 3px rgba(0,0,0,0.12)
Elevation 2
0 4px 12px rgba(0,0,0,0.15)
Focus Ring
#193c72（brand navy）
08 / Layout

lorem ipsum dolor

Bootstrap Container (LG) 1140px
Main Content 940px
Article Content 620px

Spacing Scale

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