Design System Preview
ITOCHU Corporation

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

lorem ipsum DESIGN.md lorem
01 / Colors

Color Palette

Brand
ITOCHU Blue
#003da5
lorem ipsum dolor sit
ITOCHU Blue Dark
#17448a
lorem / Cookie CTA
Search Blue
#003391
lorem ipsum
Link Blue
#0a5fbe
lorem ipsum dolor
Accent
New Badge Red
#f75e5e
NEW lorem
Accent Cyan
#7dd7e3
lorem ipsum dolor
Text
Text Primary
#444444
lorem ipsum dolor
Text Secondary
#555555
lorem ipsum dolor
CTA Black
#000000
CTA lorem ipsum
Surface & Border
Background
#ffffff
lorem ipsum
Section Gray
#eeeeee
lorem ipsum dolor
Utility Gray
#f0f2f5
lorem ipsum dolor sit
Divider Gray
#6b7789
lorem ipsum / lorem ipsum
Border Default
#cccccc
lorem ipsum
Dark Navy
#07112c
lorem ipsum dolor
02 / Typography

Typography Hierarchy

lorem ipsum dolor — Page Title (h1)
Body stack / 40px / 400 / line-height: 1.2 / letter-spacing: normallorem ipsum dolor
Section Heading — PT Serif (h2)
PT Serif / 26px / 700 / line-height: 1.34 / letter-spacing: 0.1emlorem ipsum dolor
lorem ipsum dolor — Sub Heading (h2)
Body stack / 28px / 400 / line-height: 1.2 / letter-spacing: normallorem ipsum
lorem ipsum dolor sit — Content Heading (h2)
Body stack / 25px / 700 / line-height: 1.34 / letter-spacing: 0.1emlorem ipsum
CONTENTS — English Label (h3)
Roboto / 16px / 600 / line-height: 1.67 / letter-spacing: 0.1em / color: #003da5lorem
lorem ipsum dolor sit
Body stack / 30px / 700 / line-height: 1.2 / letter-spacing: 0.1em / color: whitelorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor, lorem, lorem, lorem ipsum / lorem, lorem, lorem, lorem / lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed. Body (15px)
Body stack / 15px / 400 / line-height: 1.67 / letter-spacing: normallorem
2026.05.22 — Date / Timestamp (14px)
Body stack / 14px / 400 / line-height: 1.43 / color: #555lorem
NEW lorem / lorem ipsum — Small (12px)
Body stack / 12px / 700 / line-height: 1.67lorem
03 / Article

Corporate Article Sample

lorem ipsum dolor sit

BUSINESS

Diverse Business Portfolio

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

Global Network

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

ABCabc 123 — lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor / lorem ipsum dolor, lorem Myriad Pro / Arial lorem ipsum dolor.

04 / Buttons

Button Variations

lorem ipsum
Primary CTA (black, radius:0)
lorem ipsum
Outline (brand blue)
Cookie lorem
Cookie (dark blue, radius:4)
lorem ipsum
Utility (gray)
Corporate Branding
Badge (dark blue)
NEW
NEW Badge (red)
lorem / lorem
Category Label (gray)
lorem ipsum
Disclosure (cyan)
05 / Cards

Card Components

IMAGE
2026.05.22NEW

lorem ipsum, SDGs lorem ipsum dolor sit amet consectetur

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

IMAGE
2026.05.20

2026 lorem 3 lorem lorem ipsum dolor

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

IMAGE
2026.05.15

DX lorem ipsum dolor sit amet consectetur

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

lorem ipsum
06 / Forms

Form Elements

lorem ipsum — border: #cccccc, radius: 0px
lorem ipsum — border: #003da5 (ITOCHU Blue)
lorem — border: #f75e5e (New Badge Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
lorem ipsum dolor
Level 2
lorem ipsum dolor / lorem ipsum dolor
Level 3
lorem ipsum / lorem ipsum
Focus Ring
#003da5 (ITOCHU Blue)
08 / Layout

Content Widths & Spacing

Container Max 1120px
Content Area 960px
Article Width 720px
Spacing Scale
4px
8px
16px
24px
40px
80px