Design System Preview
DAIWA HOUSE — 大和ハウス工業

DESIGN.md から抽出したデザイントークンのカタログ。コーポレートサイトと住宅サイトの二面構成を可視化。computed style 実測値に基づく。

企業情報を見る 住まいを探す

01 / Colors

カラーパレット

Brand
Brand Blue-Gray
#5b79a8
コーポレート CTA
Accent Teal
#368bb1
セカンダリアクセント
Text
Black
#000000
住宅 CTA・主要テキスト
Dark Gray
#2d2d2e
見出し・濃いテキスト
Medium Gray
#4d4d4f
コーポレート本文
Text Gray
#666666
住宅本文
Light Gray
#8d8d8d
補助テキスト
Surface & Border
White
#ffffff
ページ背景
Surface Light
#f4f4f4
住宅汎用面
Surface Blue
#eceff4
住宅 青み面
Surface Warm
#e5e4e0
住宅 温かみ面
Surface Corporate
#ebebeb
コーポレート面
Border
#aaaaaa
ボーダー・区切り線
Semantic
Success
#2f855a
成功・完了
Danger
#c53030
エラー・削除
Warning
#d69e2e
警告・注意

02 / Typography

タイポグラフィ階層

住まいの品格を、セリフ書体で表現する
Noto Serif JP / 25px / 500 / line-height: 1.5Housing H2 Serif
企業情報 — Section Heading (H2)
Noto Sans JP / 28px / 700 / line-height: 1.43Corporate H2
暮らしの中の、小さな発見
Noto Serif JP / 20px / 500 / line-height: 1.5Housing H2 Small Serif
住宅小見出し — Heading 3
Noto Sans JP / 18px / 700 / line-height: 1.5Housing H3
コーポレート見出し — H1/H3 (14px)
Noto Sans JP / 14px / 700 / line-height: 1.43Corporate H1/H3
ナビゲーション — Nav (14px)
Noto Sans JP / 14px / 700 / line-height: 1.0Corporate Nav
コーポレート本文 — 日本最大のハウスメーカーとして、住宅・建設・不動産の各分野で事業を展開。line-height 1.7 の行間で、12px の小さい文字でも読みやすさを確保しています。ABCabc 123
Noto Sans JP / 12px / 400 / line-height: 1.7 / color: #000000Corporate Body
住宅サイト本文 — 家族の夢をかたちにする住まいづくり。安心と快適さを追求した、これからの暮らしをご提案します。font-weight 500 で少し太め。
Noto Sans JP / 12px / 500 / line-height: 1.7 / color: #666666Housing Body
サブナビ — letter-spacing: -0.7px (-0.058em) の字詰め
Noto Sans JP / 12px / 400 / letter-spacing: -0.058emSub Nav

住宅コンテンツの組版サンプル

これからの住まいに求められる性能と快適性

住まいは家族の暮らしの基盤です。断熱性能、耐震性能、そしてエネルギー効率。現代の住宅に求められる基本性能を押さえながら、家族一人ひとりの暮らし方に合わせた空間をご提案します。

ZEH(ネット・ゼロ・エネルギー・ハウス)

高断熱・高気密の住宅性能と、太陽光発電による創エネルギーを組み合わせることで、年間の一次エネルギー消費量の収支をゼロ以下にする住宅です。光熱費の削減と環境負荷の低減を同時に実現します。

構造と安全性

鉄骨造・木造それぞれの特性を活かした構造技術により、地震に強い住まいを実現。独自の制震装置と耐力壁の組み合わせで、繰り返しの揺れにも耐える構造体を提供しています。


04 / Buttons

ボタンバリエーション

Corporate(コーポレートサイト)
企業情報を見る
Primary (6px radius)
詳しく見る
Ghost (6px radius)
Housing(住宅サイト)
住まいを探す
Primary Pill (30px)
資料請求
Sharp (4px radius)
展示場を探す
White Card (5px)

05 / Cards

カードコンポーネント

住宅イメージ

xevoΣ(ジーヴォシグマ)

天井高2m72cmの開放感。持続型耐震構造で、繰り返す地震に耐える強さを持つ鉄骨住宅。

詳しく見る →
住宅イメージ

Lifegenic(ライフジェニック)

Web上で住まいのプランをカスタマイズ。自分らしい間取りを、自由な発想で組み立てる。

詳しく見る →
住宅イメージ

PREMIUM GranWood

木の温もりと先進技術の融合。国産材を活かした、人と環境にやさしい木造住宅。

詳しく見る →

06 / Forms

フォーム要素

デフォルト — border: #aaaaaa, radius: 4px
フォーカス — border: #5b79a8 (Brand Blue-Gray)
電話番号の形式が正しくありません
エラー — border: #c53030 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。基本のフラットデザイン
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

スペーシングとレイアウト

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