Design System Preview
HITACHI -- Inspire the Next

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

lorem ipsum dolor DESIGN.md lorem
* Hitachi Sans lorem ipsum dolor sit amet consectetur, Google Fonts“Noto Sans JP”lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Primary -- Brand
Hitachi Red
#cc0000
--primary-color / CTA / lorem ipsum
Brand Red
#fa000f
--brand-color / lorem / lorem ipsum
Neutral -- Grayscale
Black
#0c0c0c
--color-black / lorem ipsum dolor
Supportive Grey 5
#4d4d4d
lorem ipsum dolor, lorem ipsum dolor
Supportive Grey 4
#737373
lorem ipsum dolor sit
Supportive Grey 3
#b3b3b3
lorem ipsum dolor
Supportive Grey 2
#d9d9d9
lorem ipsum dolor, lorem ipsum
Supportive Grey 1
#f4f4f4
lorem ipsum dolor, lorem ipsum
White
#ffffff
--color-white / lorem ipsum
Surface & Background
Background
#ffffff
lorem ipsum
Surface Primary
#f4f4f4
lorem / lorem / lorem ipsum
Surface Footer
#d9d9d9
lorem ipsum dolor
Surface Dark
#0c0c0c
lorem ipsum(lorem ipsum)
Surface Skip
#333333
lorem ipsum dolor sit amet
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Hero Text
45px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor sit
lorem ipsum dolor sit -- H2 Section
32px / 600 / line-height: 1.25 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- H3 Section
28px / 600 / line-height: 1.25 / letter-spacing: normallorem ipsum dolor sit
lorem ipsum dolor sit amet -- H2 Teaser
20px / 500 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit amet -- Nav Mega Sub
18px / 600 / line-height: 1.33 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do, lorem ipsum dolor sit amet consectetur. letter-spacing lorem palt lorem ipsum dolor sit amet. Body (16px / 400)
16px / 400 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor sit -- Nav Link (14px / 500)
14px / 500 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor -- Footer (12px / 400)
12px / 400 / line-height: 1.5lorem ipsum
03 / Article -- lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

lorem ipsum dolor sit lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing elit

2026 lorem 5 lorem 23 lorem | lorem ipsum lorem ipsum dolor sit amet

lorem, OT(lorem / lorem ipsum)lorem IT(lorem ipsum)lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

Lumada lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
#cc0000 / radius: 2px / 600
lorem ipsum
Outline (Dark BG lorem ipsum dolor)
transparent / border: #d9d9d9
lorem ipsum dolor
Text Link
color: #cc0000
Search Button
#cc0000 / radius: 0px
Search Combo
lorem ipsum dolor sit amet
05 / Cards

lorem ipsum dolor sit

Energy

lorem ipsum dolor sit amet consectetur

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

lorem ipsum
Mobility

lorem ipsum dolor sit amet

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

lorem ipsum
Industry

lorem DX lorem ipsum dolor

Lumada lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #707070, radius: 0px
lorem ipsum -- border: #cc0000 (Hitachi Red)
lorem ipsum dolor sit amet consectetur
lorem -- border: #cc0000, error text: #cc0000
lorem ipsum(lorem ipsum dolor sit)
Pill lorem -- border: #707070, radius: 50px
07 / Elevation

Depth & Elevation

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

Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Level 1: Hover
lorem ipsum dolor sit amet consectetur
Surface #f4f4f4
lorem ipsum dolor sit
Footer #d9d9d9
lorem ipsum dolor sit amet
Focus Ring
#cc0000 (Hitachi Red)
08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale
4px
8px
12px
16px
24px
32px
48px
64px
80px
Content Width
Full Width 100%
Content Area ~1200px
Article Body ~720px
Grid -- 3 Column
1/3
1/3
1/3
Grid -- 4 Column
1/4
1/4
1/4
1/4