Design System Preview
lorem ipsum HIDA

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum / lorem / letter-spacing 0.1em lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem computed style lorem ipsum dolor.

lorem ipsum dolor sit› lorem ipsum dolor sit amet
01 / Colors

lorem ipsum dolor

Base — lorem 3 lorem
Background
#ffffff
lorem ipsum dolor
Surface
#f5f5f5
lorem ipsum dolor
Surface Dark
#282828
lorem ipsum dolor
Overlay
rgba(0,0,0,0.6)
lorem ipsum dolor
Text
Text Primary
#282828
lorem / lorem / lorem(lorem)
Text on Image
#ffffff
lorem / lorem ipsum dolor
Text Muted
#a0a0a0
lorem ipsum dolor sit
Text Subtle
#f0f0f0
lorem ipsum dolor sit
UA Black
#000000
lorem ipsum dolor／lorem ipsum
Accent & Line — lorem ipsum dolor sit amet
News Red
#c82832
lorem ipsum dolor sit amet
Border
#dcdcdc
1px solid. lorem ipsum 1 lorem
02 / Typography — lorem

lorem ipsum dolor sit

HIDA
32px / 400 / letter-spacing: 0.28emlorem(lorem ipsum／SVG)
lorem ipsum　lorem ipsum — Section Heading (h2)
24px / 700 / line-height: 1.75 / letter-spacing: 1.6px (0.067em) / palt: lorem.c_title
lorem ipsum／lorem ipsum dolor — Footer Heading (h5)
13px / 600 / line-height: 1.75 / letter-spacing: 1.6px (0.123em)lorem ipsum dolor
lorem ipsum　lorem ipsum　lorem ipsum — Global Nav
12px / 600 / line-height: 1.0 / letter-spacing: 1.6px (0.133em)lorem ipsum dolor
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem — Body 16px
16px / 400 / line-height: 1.75 / letter-spacing: 1.6px (0.1em)lorem(lorem 579 lorem)
lorem ipsum dolor sit amet consectetur — Button 15px
15px / 400 / line-height: 1.62 / letter-spacing: 0.75px (0.05em).c-sib2-btn
2026/07/03 — Caption 12.8px
12.8px / 400 / line-height: 1.75 / letter-spacing: 1.6px (0.125em)lorem / lorem
© Hida Sangyo Co., Ltd. — Small 12px
12px / 400 / line-height: 1.75 / letter-spacing: 1.6px (0.133em)lorem ipsum dolor
letter-spacing: 0 — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur
lorem(lorem). lorem ipsum dolor 806 lorem letter-spacing: 1.6pxDon't
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

2026/07/03　lorem

lorem ipsum lorem lorem lorem ipsum dolor sit amet consectetur“kei”

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.

kei lorem ipsum dolor／lorem ipsum dolor / lorem ipsum dolor　lorem ipsum: lorem ipsum

lorem ipsum dolor sit amet

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

lorem ipsum dolor 1.75, lorem 0.1em. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.lorem ipsum dolor sit amet 1.75 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

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

lorem ipsum dolor sit amet›
04 / Buttons — lorem ipsum dolor sit amet

lorem ipsum dolor sit

lorem ipsum dolor sit amet›
Primary（.btn_link）— transparent / 1px solid #dcdcdc / radius 0 / width 400px / 16px
lorem ipsum dolor sit amet consectetur
Secondary(.c-sib2-btn)— padding 15px / 15px / letter-spacing 0.05em / lorem
WEB lorem ipsum
Menu(.c-headerMenuBtn)— background #ffffff / line-height 50px lorem ipsum dolor
lorem ipsum
Inverse — background #282828 / text #ffffff. lorem ipsum dolor sit amet consectetur
05 / Cards — lorem ipsum dolor sit

lorem ipsum dolor sit

WEB lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
▸ lorem ipsum dolor sit
▸ lorem ipsum dolor
lorem ipsum dolor sit amet consectetur. border-radius 0 / box-shadow none / lorem ipsum. lorem ipsum dolor sit amet 16px. lorem 1px solid #dcdcdc
06 / Forms

lorem ipsum dolor

lorem ipsum — border: 1px solid #dcdcdc / radius: 0 / height: 48px
lorem ipsum — border-color lorem #282828 lorem. lorem / lorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border-color: #c82832. lorem ipsum dolor
07 / Elevation — box-shadow lorem ipsum dolor 0 lorem

Depth & Elevation

Level 0 — lorem
1px solid #dcdcdc. lorem ipsum dolor sit
Level 0 — lorem
#f5f5f5. lorem ipsum dolor sit amet
Level 0 — lorem
#282828. lorem ipsum dolor sit amet
lorem box-shadow lorem ipsum dolor 0 lorem. lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor rgba(0,0,0,0.6) lorem ipsum dolor
08 / Layout — lorem

lorem ipsum dolor sit amet consectetur

Container (.l-container) 1280px
Content (padding 50px lorem)1180px
Pickup Block 1200px
Button Width 400px
Spacing Scale
XS
8px — lorem ipsum dolor sit
S
16px — lorem ipsum dolor sit
M
24px — lorem ipsum dolor padding
L
50px — lorem ipsum dolor padding
XL
60px — lorem ipsum dolor padding
XXL
120px — lorem ipsum dolor sit
Breakpoints
Mobile ≤ 767px ／ Tablet 768–1023px ／ Desktop ≥ 1024px ／ Wide ≥ 1280px