Design System Preview
CASIO

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

casio.co.jp lorem ipsum dolor sit amet consectetur. DIN 2014 lorem ipsum dolor, lorem ipsum dolor, CASIO Blue lorem ipsum. computed style lorem ipsum dolor.

DESIGN.md lorem lorem ipsum dolor sit amet
01 / Colors

lorem ipsum dolor

Brand
CASIO Blue
#0a3282
lorem ipsum. lorem / lorem ipsum / CI
CASIO Red
#bb3c39
lorem ipsum dolor / lorem ipsum dolor sit
Category
Corporate Purple
#494c8c
“lorem”lorem ipsum dolor
Investor Green
#2e7c65
“lorem”lorem ipsum dolor
Neutral
Background
#f4f5f8
lorem ipsum(lorem ipsum dolor)
Surface
#ffffff
lorem / lorem ipsum / lorem ipsum
Text Primary
#000000
lorem / lorem(lorem)
Border
#bebebe
lorem ipsum / lorem ipsum
Footer
#030303
lorem ipsum dolor(lorem ipsum)
Semantic
Alert / Danger
#e54747
lorem ipsum dolor / lorem
Warning
lorem
lorem ipsum
Success
lorem
lorem ipsum
02 / Typography

lorem ipsum dolor sit

TOPICS — lorem ipsum dolor
30px / 700 / line-height: 1.6 (48/30) / DIN 2014 + Noto Sans JPh2 TOPICS
lorem ipsum dolor — Heading 1
30px / 700 / line-height: 1.4h1
lorem ipsum dolor sit — Heading 2
20px / 700 / line-height: 1.4h2 sub
lorem ipsum dolor — Body. CASIO lorem ipsum dolor 15px / line-height 1.5 lorem ipsum dolor sit. DIN 2014 lorem ipsum dolor sit Noto Sans JP lorem ipsum dolor sit amet consectetur. letter-spacing lorem normal, palt lorem ipsum dolor.
15px / 400 / line-height: 1.5 (22.5/15) / letter-spacing: normal / palt: lorembody / p
lorem ipsum — Article Body. lorem ipsum dolor sit amet line-height 2.0 lorem. 14px lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed.
14px / 400 / line-height: 2.0 (28/14)article body
lorem ipsum dolor sit amet — lorem ipsum dolor
14px / 700nav primary
lorem ipsum dolor sit — Purpose / IR lorem
13px / 400nav sub
lorem TOP — lorem ipsum dolor sit amet
12px / 400 / line-height: 1.5 (18/12)nav utility
lorem ipsum dolor — Caption / Alert(weight 200 lorem)
12px / 200 / lorem ipsum dolor. lorem ipsum dolor sit amet consecteturcaption / alert
lorem ipsum dolor sit amet — lorem ipsum dolor
11px / 200–400 / lorem ipsum dolor sit amet consecteturheader utility

Web lorem ipsum dolor:DIN 2014(Adobe Fonts / lorem ipsum dolor sit)lorem preview loremInter(Google Fonts)lorem.Noto Sans JP(Google Fonts)lorem ipsum dolor.
lorem ipsum Adobe Fonts lorem ipsum dolor sitdin-2014 lorem ipsum dolor.

03 / Article & Product

lorem ipsum dolor sit amet

Topics
TECHNOLOGY STORY

lorem ipsum dolor sit.

2026.05.09 ／ Corporate Editorial ／ Reading time: 5 min

1957 lorem, lorem ipsum dolor sit amet consectetur“14-A”lorem ipsum dolor sit amet. lorem, lorem, lorem ipsum, lorem ipsum, lorem ipsum—— lorem ipsum dolor sit amet consectetur, lorem ipsum dolor“lorem”lorem ipsum dolor sit amet consectetur.

G-SHOCK lorem ipsum dolor sit amet

“lorem ipsum dolor sit amet consectetur”. 1981 lorem ipsum dolor sit amet consectetur“lorem”lorem, 200 lorem ipsum dolor sit 1983 lorem ipsum G-SHOCK DW-5000C lorem ipsum dolor. lorem ipsum dolor, lorem ipsum IC lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor

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

WATCH
G-SHOCK
DW-5000U-1JF
lorem ipsum dolor lorem ipsum
¥16,500 (lorem)
CALCULATOR
CALCULATOR
fx-JP900CW
lorem ipsum ClassWiz
¥5,280 (lorem)
KEYBOARD
CASIOTONE
CT-S1
lorem ipsum dolor
¥38,500 (lorem)
lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

CASIO lorem ipsumborder-radius: 0px lorem. lorem ipsum Primary lorem ipsum Secondary lorem ipsum dolor sit amet consectetur. lorem ipsum 200 lorem ipsum dolor sit amet consectetur.

lorem ipsum
Primary(lorem)
14px / 400
lorem ipsum
Secondary(lorem / lorem ipsum)
14px / 400
lorem ipsum
Brand（CASIO Blue）
14px / 700
lorem ipsum
Utility(lorem)
12px / 200
lorem ipsum
Danger(lorem ipsum)
14px / 700
Category Labels
lorem lorem lorem(lorem) lorem
lorem ipsum dolor — lorem / 11px / 700 / radius: 0px
05 / Cards

lorem ipsum dolor sit

lorem

G-SHOCK 40 lorem ipsum dolor

1983 lorem ipsum dolor 40 lorem. lorem DW-5000C lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur 6 lorem ipsum dolor sit amet.

lorem ipsum
lorem

lorem ipsum dolor sit

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

lorem ipsum
lorem

IR lorem / lorem ipsum

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

lorem ipsum
06 / Forms

lorem ipsum dolor(3 lorem)

lorem ipsum dolor sit, 44px lorem ipsum dolor sit amet consectetur. lorem ipsum dolor border lorem#0a3282(CASIO Blue)lorem ipsum, lorem ipsum Alert Red#e54747 lorem.

lorem ipsum — border: 1px solid #bebebe / radius: 0px / height: 44px
lorem ipsum — border: 2px solid #0a3282(CASIO Blue)
lorem — border: 2px solid #e54747(Alert Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1(lorem)
0 1px 3px rgba(0,0,0,0.08)
Level 2(lorem)
0 4px 12px rgba(0,0,0,0.10)
Level 3(lorem)
0 8px 24px rgba(0,0,0,0.12)

lorem ipsum dolorbox-shadow: none. CASIO lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. Level 1–3 lorem“lorem ipsum dolor sit amet consectetur”lorem.

08 / Layout

lorem ipsum dolor sit amet

Spacing Scale(8px lorem)
XS
8px
S
16px
M
24px
L
40px
XL
64px
XXL
80px
Container & Content Widths
Container Max 1200px
Main Content 940px
Article(lorem)680px
Breakpoints

Mobile: ≤ 767px ／ Tablet: 768 – 1024px ／ Desktop: > 1024px
lorem ipsum dolor sit 44px × 44px lorem(WCAG lorem).