Design System Preview
LIXIL

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

* 実サイトはヒラギノ角ゴ ProN（システムフォント）を使用。このプレビューでは Google Fonts の Noto Sans JP で代替表示しています。
商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
LIXIL Orange
#ef7a00
ブランドカラー・CTA・リンク
LIXIL Orange Dark
#d86e00
ホバー・プレス時
Text
Text Primary
#4b4949
本文テキスト
Text Secondary
#454545
補足テキスト
Text White
#ffffff
反転テキスト
Surface & Background
Warm Cream
#f9f7f1
ページ背景
Surface White
#ffffff
カード・商品ブロック
Section Gray
#efefef
セクション背景
Border
#e6e6e6
ボーダー・区切り線
Border Strong
#cccccc
強調ボーダー
Navigation & Footer
Nav Gray
#858384
ナビゲーション背景
Footer Dark
#3d3938
フッター背景
02 / Typography

タイポグラフィ階層

ヒーロー見出し --- H1 (32px / 700)
32px / 700 / line-height: 1.5 / color: #ef7a00ヒーロー
セクション見出し --- H2 (16px / 700)
16px / 700 / line-height: 1.1-1.5 / color: #4b4949 or #ffffffセクション
中見出し --- H3 (16-20px / 700)
16-20px / 700 / line-height: 1.35 / color: #4b4949
補助見出し --- H4 (14px / 700)
14px / 700 / line-height: 1.5 / color: #4b4949
ナビゲーション --- Nav (15px / 700)
15px / 700 / color: #ffffff on #858384グローバルナビ
本文テキスト --- Body (15.2px)。ヒラギノ角ゴ ProN を先頭に配したシステムフォントスタックで、Web フォント不要の軽量設計。letter-spacing は normal、palt は適用されていません。ABCabc 123 システムキッチン LIXIL
15.2px / 400 / line-height: 1.6 (24.3px) / letter-spacing: normal / palt: なし
リンクテキスト --- A (15px / 400 / color: #ef7a00)
15px / 400 / color: #ef7a00コンテンツエリア
03 / Product

住宅設備一覧サンプル

K
システムキッチン
使いやすさと美しさを兼ね備えた設計
詳しく見る →
B
システムバスルーム
くつろぎと清潔さを両立する浴室
詳しく見る →
T
トイレ
節水と快適性を追求した先進設計
詳しく見る →
W
玄関ドア
住まいの顔となる高断熱玄関ドア
詳しく見る →
04 / Buttons

ボタンバリエーション

商品を見る
Primary CTA
radius: 0px (rectangular)
詳しく見る
Secondary
radius: 0px / border: 1px
ショールーム
Nav Button
radius: 0px / bg: #858384
お問い合わせ
Nav CTA
radius: 0px / orange bg

Rectangular Button Spec

Primary: bg #ef7a00 / text #ffffff / border-radius 0px / padding 8px 24px
Secondary: bg #ffffff / text #4b4949 / border 1px solid #e6e6e6 / border-radius 0px
Nav: bg #858384 / text #ffffff / border-radius 0px

05 / Cards

カードコンポーネント

リフォーム

リフォーム相談

キッチン・バス・トイレなど、住まいのリフォームを専門スタッフがサポート。お気軽にご相談ください。

詳しく見る →
体験

ショールーム予約

実際の商品を見て、触れて、体感できるショールーム。全国各地でお待ちしています。

詳しく見る →
見積

お見積もり

ご希望の商品・工事内容に合わせた概算見積もりをオンラインで簡単にご確認いただけます。

詳しく見る →
06 / Forms

フォーム要素

デフォルト --- border: 1px solid #e6e6e6, radius: 0px
フォーカス --- border: 1px solid #ef7a00 (LIXIL Orange)
正しいメールアドレスを入力してください
エラー --- border-color: #cc0000
セレクト --- border: 1px solid #e6e6e6, radius: 0px
07 / Elevation

Depth & Elevation

Level 0: Flat
背景色のみ・影なし・ボーダーなし
Level 1: Border
1px solid #e6e6e6
Level 2: Border Strong
1px solid #cccccc
Focus Ring
2px solid #ef7a00 (LIXIL Orange)

LIXIL は影（box-shadow）を使わず、ボーダーのみで階層を表現する。カード・商品ブロック・フォーム要素すべてが border: 1px solid #e6e6e6 で区切られ、ホバー時に #cccccc へ変化する。

08 / Layout

レイアウト

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#f9f7f1
Warm Cream
#ffffff
Surface
#efefef
Section Gray
#3d3938
Footer

Border Radius

0px (Primary CTA)
0px (Secondary)
0px (Card)
0px (Focus Ring)