Design System Preview
DAIWA HOUSE — lorem ipsum dolor

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

lorem ipsum dolor lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand
Brand Blue-Gray
#5b79a8
lorem ipsum dolor CTA
Accent Teal
#368bb1
lorem ipsum dolor sit
Text
Black
#000000
lorem CTA / lorem ipsum dolor
Dark Gray
#2d2d2e
lorem / lorem ipsum dolor
Medium Gray
#4d4d4f
lorem ipsum dolor
Text Gray
#666666
lorem ipsum
Light Gray
#8d8d8d
lorem ipsum dolor
Surface & Border
White
#ffffff
lorem ipsum
Surface Light
#f4f4f4
lorem ipsum
Surface Blue
#eceff4
lorem lorem
Surface Warm
#e5e4e0
lorem lorem ipsum
Surface Corporate
#ebebeb
lorem ipsum dolor
Border
#aaaaaa
lorem ipsum / lorem ipsum
Semantic
Success
#2f855a
lorem / lorem
Danger
#c53030
lorem / lorem
Warning
#d69e2e
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor, lorem ipsum dolor sit
Noto Serif JP / 25px / 500 / line-height: 1.5Housing H2 Serif
lorem ipsum — Section Heading (H2)
Noto Sans JP / 28px / 700 / line-height: 1.43Corporate H2
lorem ipsum dolor, lorem ipsum
Noto Serif JP / 20px / 500 / line-height: 1.5Housing H2 Small Serif
lorem ipsum dolor — Heading 3
Noto Sans JP / 18px / 700 / line-height: 1.5Housing H3
lorem ipsum dolor sit — H1/H3 (14px)
Noto Sans JP / 14px / 700 / line-height: 1.43Corporate H1/H3
lorem ipsum dolor — Nav (14px)
Noto Sans JP / 14px / 700 / line-height: 1.0Corporate Nav
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem / lorem / lorem ipsum dolor sit amet consectetur. line-height 1.7 lorem ipsum, 12px lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Noto Sans JP / 12px / 400 / line-height: 1.7 / color: #000000Corporate Body
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. font-weight 500 lorem ipsum.
Noto Sans JP / 12px / 500 / line-height: 1.7 / color: #666666Housing Body
lorem ipsum — letter-spacing: -0.7px (-0.058em) lorem ipsum
Noto Sans JP / 12px / 400 / letter-spacing: -0.058emSub Nav
03 / Article

lorem ipsum dolor sit amet consectetur

lorem ipsum ZEH lorem

lorem ipsum dolor sit amet consectetur adipiscing

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

ZEH(lorem / lorem / lorem ipsum / lorem)

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

lorem ipsum dolor

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

04 / Buttons

lorem ipsum dolor sit

Corporate(lorem ipsum dolor sit)
lorem ipsum dolor
Primary (6px radius)
lorem ipsum
Ghost (6px radius)
Housing(lorem ipsum)
lorem ipsum dolor
Primary Pill (30px)
lorem ipsum
Sharp (4px radius)
lorem ipsum dolor
White Card (5px)
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

xevoΣ(lorem ipsum dolor)

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

lorem ipsum →
lorem ipsum dolor

Lifegenic(lorem ipsum dolor)

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

lorem ipsum →
lorem ipsum dolor

PREMIUM GranWood

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #aaaaaa, radius: 4px
lorem ipsum — border: #5b79a8 (Brand Blue-Gray)
lorem ipsum dolor sit amet consectetur
lorem — border: #c53030 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet
Level 1
0 2px 4px rgba(0,0,0,0.08)
Level 2
0 4px 12px rgba(0,0,0,0.10)
Level 3
0 8px 24px rgba(0,0,0,0.12)
Focus Ring
#5b79a8 (Brand Blue-Gray)
08 / Layout

lorem ipsum dolor sit amet

Spacing Scale (8px Grid)
4px
8px
16px
24px
48px
80px
Container Width
Corporate 1200px
Housing 1100px
Surface Samples
Light
#f4f4f4
Blue
#eceff4
Warm
#e5e4e0
Corporate
#ebebeb