Design System Preview
lorem — ITO EN

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem(2026-05-09)lorem ipsum.

lorem ipsum dolor lorem ipsum
01 / Colors

lorem ipsum dolor

Brand
Brand Green
#00a040
lorem ipsum dolor / lorem ipsum
Copyright Gray
#c9c9ba
lorem ipsum dolor sit
Text
Black (Corporate)
#000000
lorem ipsum dolor sit / lorem
Near Black (Product)
#131314
lorem ipsum dolor sit / lorem
Muted Gray
#8e9294
lorem ipsum dolor / lorem
Breadcrumb Gray
#879297
lorem ipsum / lorem ipsum dolor
Inactive Nav
#97938e
lorem ipsum dolor sit amet
Semantic
Success
#00a040
lorem(Brand Green lorem)
Danger
#c62828
lorem / lorem(lorem)
Warning
#e6a700
lorem / lorem(lorem)
Surface & Background
White
#ffffff
lorem ipsum / lorem ipsum dolor
Product Surface
#fbfcfc
lorem ipsum dolor
Corporate Surface
#f6f6f3
lorem ipsum dolor
Nav Green BG
#f1f5f0
lorem ipsum dolor(lorem ipsum dolor)
Tab BG
#f6f6f6
lorem ipsum dolor / lorem ipsum
Tab Active
#efefef
lorem ipsum dolor sit
Footer
#edede3
lorem ipsum dolor
Input BG
#dbdbd7
lorem ipsum dolor
Dark Surface
#131314
lorem ipsum dolor sit / lorem BG
02 / Typography

lorem ipsum dolor sit

lorem ipsum — Page Title (H1, Product)
30.6px / 900 / line-height: 1.18 / letter-spacing: normallorem ipsum
lorem ipsum — Section H2 (Corporate)
30.6px / 700 / line-height: 1.29 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Section H2 (Product)
23.4px / 900 / line-height: 1.54 / letter-spacing: normallorem ipsum
lorem ipsum — Sub H2 (Corporate)
19.8px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum dolor sit amet — H3 / Card
16.2px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum dolor(lorem ipsum)— lorem ipsum dolor“lorem”lorem ipsum, lorem ipsum dolor sit amet consectetur“lorem ipsum dolor sit amet”lorem ipsum dolor. line-height: 1.75 lorem ipsum dolor sit.
14.4px / 400 / line-height: 1.75 / letter-spacing: normallorem ipsum
lorem ipsum dolor(lorem ipsum)— lorem ipsum dolor“lorem”lorem ipsum, lorem ipsum dolor sit amet consectetur“lorem ipsum dolor sit amet”lorem ipsum dolor. line-height: 2.25 lorem ipsum dolor sit amet consectetur.
14.4px / 400 / line-height: 2.25 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Caption (12.6px)
12.6px / 400 / line-height: 1.5lorem ipsum / lorem
lorem ipsum dolor — Caption Bold (12.6px)
12.6px / 900 / line-height: 1.5lorem ipsum
lorem ipsum dolor — Small (9px)
9px / 400 / line-height: 1.5
Copyright (C) All Rights Reserved. ITOEN, LTD.
Barlow / 9px / 600 / letter-spacing: 0.05em / color: #c9c9balorem ipsum dolor
03 / Article

lorem ipsum dolor

lorem ipsum dolor sit

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

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet 75%lorem ipsum dolor. lorem“lorem ipsum”lorem“lorem ipsum”lorem ipsum dolor sit amet consectetur.

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Border CTA
lorem
Search Button
lorem
Cookie / Green
lorem ipsum dolor
Tab Active (Product)
lorem ipsum dolor
Link Button (Product)
lorem ipsum dolor sit
Page Top
lorem ipsum dolor
Text Link (Green)
05 / Cards

lorem ipsum dolor sit

lorem–lorem

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

lorem ipsum dolor →

lorem ipsum dolor sit

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

lorem ipsum dolor →

1 lorem ipsum

lorem ipsum dolor sit 1 lorem ipsum dolor 350g lorem ipsum dolor sit. 30 lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem ipsum dolor →
06 / Forms

lorem ipsum dolor

lorem ipsum — bg: #dbdbd7, border: transparent, radius: 0px
lorem ipsum — border: #00a040 (Brand Green), bg: #ffffff
lorem ipsum dolor sit amet consectetur
lorem — border: #c62828 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor. lorem ipsum dolor sit
Corporate Surface
#f6f6f3 — lorem ipsum dolor
Footer Surface
#edede3 — lorem ipsum(lorem ipsum)
Dark Surface
#131314 — lorem ipsum dolor / lorem BG
Focus / Accent
#00a040 (Brand Green)