Design System Preview
CITIZEN Watch

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Poppins + Noto Sans JP lorem ipsum dolor sit, lorem ipsum palt lorem, lorem ipsum dolor sit amet. computed style lorem ipsum dolor.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary (Brand)
Dark Navy
#27455c
lorem ipsum dolor sit
Deep Navy
#041e41
lorem ipsum dolor
CTA Black
#222222
Primary CTA
Filter Blue
#3860be
lorem / lorem ipsum
Neutral (Text)
Text Primary
#000000
lorem / lorem
Text Body
#444444
lorem / lorem ipsum
Text Nav
#292c2d
lorem ipsum dolor
Text Price
#a6acb1
lorem / lorem ipsum
Text Cookie
#91999f
lorem ipsum dolor
Footer Muted
#d2d2d2
lorem ipsum dolor sit
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f9f9f9
lorem ipsum dolor
Border
#707070
lorem / lorem
Divider
#e5e5e5
lorem ipsum dolor
Footer
#000000
lorem ipsum dolor
Accent
Light Pink
#fbebee
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Section Heading (h2)
26px / 700 / line-height: 1.5 / palt: lorem ipsum dolorlorem ipsum dolor
lorem ipsum dolor — Secondary Heading (h2)
20px / 700 / line-height: 1.3 / palt: lorem ipsum dolorlorem ipsum dolor
lorem ipsum dolor — Sub Heading (h3)
18px / 700 / line-height: 1.2 / palt: lorem ipsum dolorlorem ipsum
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. Poppins lorem Noto Sans JP lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. Body (16px)
16px / 400 / line-height: 1.5 / color: #444444lorem ipsum
lorem ipsum dolor — lorem ipsum 1918 lorem ipsum dolor, “lorem ipsum dolor sit amet”lorem ipsum dolor. lorem ipsum / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. Body Detail (16px / lh 1.6)
16px / 400 / line-height: 1.6 / lorem ipsum dolorlorem
lorem ipsum dolor — Article / Detail (14px)
14px / 400 / line-height: 1.5lorem / lorem
lorem ipsum dolor — Nav (14px / 500)
14px / 500 / line-height: 1.5 / color: #292c2dlorem ipsum dolor
lorem ipsum dolor sit — Nav Expanded (18px / 500)
18px / 500 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — Brand Label (14px / 600)
14px / 600 / lorem ipsum dolorlorem ipsum
¥159,500(lorem) — Price (12px / 600)
12px / 600 / line-height: 1.5 / color: #a6acb1lorem ipsum
NEW — Badge (11px / 600)
11px / 600 / loremlorem ipsum
lorem ipsum: lorem ipsum dolor — Info Bar (12px / 600)
12px / 600 / line-height: 1.5lorem ipsum
lorem ipsum dolor — Footer Link (14px / 500)
14px / 500 / color: lorem ipsumlorem ipsum dolor
03 / Product

lorem ipsum dolor

NEW
lorem ipsum dolor
NB6060-58L lorem ipsum 880
¥159,500 (lorem)
lorem ipsum
CC4055-65E lorem / lorem ipsum GPS lorem ipsum dolor
¥275,000 (lorem)
NEW
lorem ipsum dolor
BN0227-09L lorem / lorem ipsum lorem ipsum 200m
¥77,000 (lorem)
lorem / lorem ipsum
AQ4091-56E lorem lorem / lorem ipsum
¥385,000 (lorem)
Brand Story

lorem ipsum, lorem ipsum.

1918 lorem ipsum dolor, lorem ipsum“lorem ipsum dolor sit amet”lorem ipsum dolor. lorem ipsum / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
#222222 / radius 2px / 12px 30px
lorem ipsum
Secondary Outline
#707070 / radius 3px
Cookie lorem
Cookie Settings
#222222 border / radius 2px
Toggle Switch
ON
#3860be
OFF
#e5e5e5
05 / Cards

lorem ipsum dolor sit

lorem / lorem ipsum lorem ipsum dolor

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

lorem ipsum

lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #707070, radius: 50px (pill)
lorem ipsum — border: #707070, radius: 2px
lorem ipsum — border: #222222, shadow: rgba(34,34,34,0.15)
lorem — border: #b22323
lorem ipsum dolor sit amet consectetur adipiscing
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum / lorem ipsum
Level 1
0 1px 3px rgba(0,0,0,0.08)
lorem ipsum dolor
Surface
bg #f9f9f9 / border #e5e5e5
lorem ipsum dolor
Brand Section
bg #27455c
lorem ipsum dolor sit
Footer
bg #000000
lorem ipsum(lorem)
08 / Layout

lorem ipsum

Content Widths
Container Max 1200-1440px
Product Grid (4col) ~1200px
Product Grid (3col) ~900px
Content Padding 16-24px
Spacing Scale
6px
XS
10px
S
12px
M
15px
L
30px
XL
35px
XXL
Grid
lorem ipsum: 4 lorem(lorem ipsum dolor)
lorem ipsum dolor: 3 lorem
lorem ipsum: lorem 1 lorem