Worldwide lorem ipsum
lorem ipsum dolor sit amet.
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur,
lorem ipsum dolor sit amet consectetur.
01 / Colors

Color Palette

DNP lorem 1 lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum“lorem ipsum”1 lorem ipsum dolor.

DNP Blue
#1432aa
lorem ipsum / lorem CTA / lorem ipsum. lorem 13 lorem
Blue Secondary
#5365ac
lorem ipsum dolor sit. lorem ipsum 79 lorem
Accent Orange
#e13000
“lorem ipsum”lorem. lorem ipsum dolor
Background
#ffffff
lorem ipsum(body lorem ipsum)
Surface Blue
#e6f1fb
lorem ipsum dolor / lorem ipsum dolor
Surface Blue 2
#e8f1fa
lorem ipsum dolor sit
Surface Gray
#f9f9f9
lorem ipsum dolor sit / lorem ipsum dolor
Surface Blue Gray
#eeeff3
lorem ipsum / lorem ipsum dolor
Text Primary
#333333
lorem. lorem ipsum dolor
Text Secondary
#555555
lorem ipsum / lorem
Border
#666666
lorem ipsum dolor sit amet. lorem ipsum
Carousel Dot
#787878
lorem ipsum dolor. lorem ipsum dolor #1432aa
#0000ff lorem ipsum dolor. lorem<a> / <p> lorem computed loremrgb(0, 0, 255) lorem ipsum, lorem ipsum dolor<img> lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
02 / Typography

Typography

lorem ipsum DNP lorem ipsumlorem ipsum dolor B JIS2004, lorem Noto Sans JP. lorem ipsum dolor sit amet consecteturYakuHanJP lorem ipsum.lorem ipsum dolornormal、palt lorem 0 lorem.

Page Title
lorem ipsum dolor / 40px / 700
lh 1.3 / ls normal / #1432aa
lorem ipsum dolor sit amet consectetur
Section Heading
lorem ipsum dolor / 32px / 700
lh 1.3 / ls normal / #1432aa
DNP lorem ipsum dolor sit
Lead
lorem ipsum dolor / 30px / 700
lh 1.5 / ls normal / #1432aa
lorem ipsum dolor sit amet.
Sub Heading (h3)
lorem ipsum dolor / 28px / 700
lh 1.8 / ls normal / #333333
P&I lorem ipsum dolor
Card Title
lorem ipsum dolor / 20px / 700
lh 1.3 / ls normal / #1432aa
lorem ipsum / lorem ipsum
Callout
Noto Sans JP / 20px / 700
lh 1.5 / ls normal
lorem ipsum dolor sit amet consectetur
Link Label
Noto Sans JP / 18px / 600
lh 1.85 / ls normal / #1432aa
lorem ipsum dolor
Body
Noto Sans JP / 16px / 400
lh 1.5(lorem 1.6)/ ls normal
DNP lorem 1876 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
Nav / Utility
Noto Sans JP / 14px / 400
lh 1.2 / ls normal
lorem ipsum　lorem ipsum dolor　lorem
Badge
Noto Sans JP / 12px / 400
lorem ipsum dolor

body loremfont-size: 16px / line-height: 16px(＝1.0)lorem ipsum dolor.lorem ipsum dolor sit amet consecteturlorem,body lorem ipsum dolor sit amet consectetur adipiscing.

03 / News & Article

lorem ipsum dolor sit

lorem ipsum dolor#eeeff3 lorem, lorem#5365ac lorem ipsum. lorem ipsum dolor sit amet.

2026 lorem 8 lorem 27 lorem
lorem ipsum dolor
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit
2026 lorem 8 lorem 26 lorem
lorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing elit
2026 lorem 8 lorem 18 lorem
lorem ipsum
2026 lorem 10 lorem ipsum 150 lorem ipsum dolor

P&I lorem

“P&I”lorem Printing(lorem)lorem Information(lorem)lorem ipsum dolor, DNP lorem ipsum dolor sit. 150 lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

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

04 / Buttons

Buttons

loremborder-radius: 0. lorem / lorem ipsum dolor sitpadding lorem ipsum dolor sit amet.

lorem ipsum lorem ipsum lorem ipsum dolor sit amet lorem ipsum dolor lorem ipsum / lorem ipsum

Primary lorempadding: 12px 48px 12px 16px. lorem 48px lorem ipsum dolor sit. Accent lorem12px 40px 12px 14px, Outline lorem10px 25px 10px 20px。

DNP lorem ipsum lorem／lorem ipsum lorem ipsum dolor

Large Nav Card lorempadding: 25px 34px 25px 120px. lorem 120px lorem ipsum dolor.

05 / Cards

Cards

lorem ipsum,1px solid #666666 lorem ipsum dolor sit.

5 lorem ipsum DNP

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

150th Anniversary

2026 lorem 10 lorem, DNP lorem 150 lorem ipsum dolor.

lorem ipsum dolor

lorem ipsum“lorem ipsum dolor”lorem ipsum dolor DNP lorem ipsum dolor sit.

P&I lorem ipsum dolor

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

06 / Forms

Forms

lorem ipsum dolor. lorem#f9f9f9, lorem1px solid #8c8c8c。

lorem ipsum dolor sit amet

lorem ipsum dolor sit #1432aa

lorem ipsum dolor sit amet consectetur adipiscing

lorem ipsum dolor #f9f9f9

07 / Elevation

Depth & Elevation

lorem ipsum dolor sit amet. DOM lorem ipsum dolorbox-shadow lorem ipsum dolor(lorem ipsum dolor)lorem. lorem ipsum dolor sit.

Level 0 — lorem ipsumbackground: #f9f9f9; box-shadow: none;
Level 1 — loremborder: 1px solid #666666; box-shadow: none;
Level 2 — lorem ipsumbackground: #e6f1fb; box-shadow: none;
08 / Layout

Layout

lorem ipsum 1200px. lorem ipsum dolor sit 4 lorem, lorem ipsum dolor sit＋lorem 2 lorem.

max-width: 1200px
1 / 4
2 / 4
3 / 4
4 / 4
TokenValuelorem
XS4pxlorem ipsum padding
S10pxlorem / lorem ipsum padding
M16pxlorem ipsum padding
L20pxlorem ipsum gutter, lorem ipsum
XL25pxlorem ipsum dolor sit padding
XXL48pxlorem ipsum dolor sit amet
BreakpointWidthlorem
Mobile≤ 767px1 lorem. lorem ipsum dolor
Tablet768–1279px2 lorem ipsum dolor
Desktop≥ 1280px4 lorem / max-width 1200px