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

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. panasonic.jp lorem computed style lorem ipsum dolor.

lorem ipsum dolor sit lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Neutral Scale
Near Black
#1a1a1a
lorem ipsum dolor / lorem
Dark Gray
#333333
CTA lorem / lorem ipsum / lorem ipsum dolor
Mid Gray
#666666
lorem ipsum dolor / lorem
Border Gray
#cccccc
lorem ipsum dolor sit
Light Gray
#f2f2f2
lorem ipsum / lorem ipsum / lorem ipsum
White
#ffffff
lorem ipsum / lorem ipsum dolor
Black
#000000
lorem ipsum dolor
Overlay
Dark Overlay
rgba(0,0,0,0.5)
lorem ipsum dolor sit / lorem ipsum dolor
Semantic
Danger
#cc0000
lorem / lorem(lorem)
Success
#00875a
lorem / lorem(lorem)
Warning
#cc7700
lorem / lorem(lorem)
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur — Page Title (H1)
36px / 400 / line-height 1.5 / letter-spacing normallorem ipsum
lorem ipsum dolor — Heading 2
32px / 400 / line-height 1.5 / letter-spacing normallorem
lorem ipsum dolor — Heading 3 (Large)
26px / 500 / line-height 1.5 / letter-spacing normallorem
lorem ipsum dolor — Heading 3 (Card)
20px / 500 / line-height 1.5 / letter-spacing normallorem
lorem ipsum dolor sit — Lead (20px)
20px / 400 / line-height 1.5 / letter-spacing normallorem ipsum
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height 1.5 / letter-spacing normallorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. color #666666.
16px / 400 / line-height 1.5 / color #666666lorem
CTA lorem ipsum — Ghost Button (18px)
18px / 400 / line-height 1.5 / color #333333CTA
lorem ipsum dolor — Span Bold (16px/700)
16px / 700 / line-height 1.5 — lorem ipsum dolor sit amet consectetur boldlorem
Small / Input (12px) — lorem / lorem ipsum dolor sit
12px / 400 / line-height normal / color #000 (input) or #666 (annotation)
03 / Article

lorem ipsum dolor

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 adipiscing 3 lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

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

IoT lorem ipsum dolor

lorem ipsum AI lorem ipsum, lorem ipsum / lorem / lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur
Ghost CTA / 18px / #333 border / radius 0
lorem ipsum dolor sit
Ghost CTA / same style
lorem ipsum dolor
Ghost Small / 14px
lorem ipsum dolor sit amet
Ghost (Dark BG) / white border
Text Link

lorem ipsum dolor — underline + #1a1a1a

05 / Cards

lorem ipsum dolor sit

Product Image

lorem ipsum dolor lorem ipsum dolor

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

lorem ipsum
Product Image

lorem ipsum dolor NP lorem ipsum

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

lorem ipsum
Product Image

lorem ipsum lorem ipsum X lorem ipsum

AI lorem ipsum dolor sit. lorem ipsum X lorem ipsum dolor sit amet.

lorem ipsum
06 / Forms

lorem ipsum dolor

Default / bg #f2f2f2 / no border / radius 0
Focus / bg #fff / border 1px #333
lorem ipsum dolor sit amet consectetur
Error / border 1px #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem — lorem(lorem)
Elevation 1
0 2px 8px rgba(0,0,0,0.06)
Elevation 2
0 4px 16px rgba(0,0,0,0.08)
Elevation 3
0 8px 32px rgba(0,0,0,0.12)
Dark Section Demo

lorem ipsum dolor — #333333 lorem

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

lorem ipsum dolor sit amet
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale(8px lorem)
XS
4px
S
8px
M
16px
L
24px
XL
32px
XXL
64px
Border Radius

Panasonic lorem ipsum border-radius: 0px(lorem)lorem. lorem ipsum dolor sit amet.

None
0px — lorem
Content Width（CSS Custom Properties）
Max Width 1920px (--max-width)
Content Width 1344px (--content-width)
Min Width 1280px (--min-width)
Grid

12 columns / gutter 32px (--gutter-width) / side margin 32px (--side-margin)