AIR TECHNOLOGY

空気で答えを出す会社

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

製品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Brand Navy
#003568
コーポレートカラー・法人向け
Brand Gold
#fdc64f
個人向け・アクセント
CTA / Accent
Action Blue
#168bb6
CTA ボタン・主要アクション
Link Blue
#0099cc
テキストリンク・h3 リンク
Navy Dark
#27455c
ダーク面背景
Blue Light
#cddcf2
ハイライト領域
Filter Blue
#3860be
フィルターアイコン
Neutral
Black
#000000
見出し・本文テキスト
Dark Gray
#333333
フッター背景
Mid Gray
#696969
補助テキスト・ラベル
Link Gray
#666666
フッターリンク・パンくず
Light Gray
#737373
補助テキスト
Surface & Border
White
#ffffff
ページ背景
Surface
#f3f3f3
セクション背景面
Light Surface
#f5f7fa
薄い背景面
Border
#e8e8e8
区切り線
02 / Typography

タイポグラフィ階層

空気で答えを出す会社 — Hero H1
38px / 400 / line-height: 1.6 / letter-spacing: normal / palt: なしヒーロー
空気にできることは、もっとある。 — Section H2
32px / 400 / line-height: 1.3 / letter-spacing: normalセクション見出し
空気の技術 — Sub H2
28px / 700 / line-height: 1.0 / letter-spacing: normalサブ見出し
ダイキンの製品・サービス — Top H2
26px / 400 / line-height: 1.6 / letter-spacing: normalトップ見出し
個人のお客様・法人のお客様 — H3
22px / 700 / line-height: 1.6 / letter-spacing: normalカテゴリ見出し
お問い合わせ・サポート — H3 (Sub)
22px / 400 / line-height: 1.6 / letter-spacing: normalサブ見出し
ストリーマ技術とは？ — H3 (Link)
14px / 700 / line-height: 1.7 / color: #0099ccリンク見出し
本文テキスト — ダイキンは空調事業を中心に、空気の力で社会に貢献するグローバル企業です。住宅用エアコン「うるさらX」をはじめ、業務用空調、空気清浄機、ヒートポンプ式暖房など幅広い製品を展開しています。line-height は統一的に 1.6 倍。letter-spacing と palt は適用されていません。
14px / 400 / line-height: 1.6 / letter-spacing: normal / palt: なし本文
グローバルナビ — Nav Link (12px)
12px / 400 / line-height: 1.67 / color: #666666ヘッダーナビ
補足テキスト — Small (12px)
12px / 400 / line-height: 1.6補足
ホーム > 製品情報 > エアコン — Breadcrumb
14px / 700 / line-height: 1.6 / color: #737373パンくず
03 / Products

製品カテゴリ

個人のお客様
法人のお客様
04 / Buttons

ボタンバリエーション

お問い合わせ
Primary (Action Blue)
#168bb6 / radius: 2px
詳しく見る
Secondary
border: #168bb6 / radius: 2px
カタログを見る
Ghost
border: #e8e8e8 / radius: 4px
ENTER
製品を見る
ダーク面でのボタン表示
05 / Cards

カードコンポーネント

ルームエアコン

うるさらXをはじめ、住まいに最適なエアコンを。無給水加湿と換気で、一年中快適な空気環境を実現します。

製品一覧を見る

業務用エアコン

オフィス・店舗・工場など、さまざまな空間に対応する業務用エアコン。省エネ性能とメンテナンス性を両立。

製品一覧を見る

空気清浄機

ストリーマ技術で有害物質を分解。花粉、PM2.5、ウイルスなど、さまざまな空気の悩みに対応します。

製品一覧を見る
06 / Forms

フォーム要素

デフォルト — border: #e8e8e8, radius: 2px
フォーカス — border: #168bb6 (Action Blue)
正しい電話番号を入力してください
エラー — border: #cc0000 (Danger)
07 / Elevation

Depth & Elevation

Flat
影なし、border: #e8e8e8 で区切り
Color Header
カラーバーで階層を表現（個人向け）
Color Header
カラーバーで階層を表現（法人向け）
Focus Ring
#168bb6 (Action Blue)

フラットデザインが基本。影は使わず、色とボーダーで階層を表現する。カードには色付きヘッダーバーを用い、個人向け（ゴールド）と法人向け（ネイビー）を視覚的に区別する。

08 / Layout

レイアウト・セクション背景

セクション背景の使い分け
白 #ffffff
メインコンテンツ
Surface #f3f3f3
セクション背景
Navy #003568
法人セクション
Gold #fdc64f
個人セクション
Dark #333333
フッター
コンテンツ幅
Full Width 100%
Main Content 960px
Text Column 620px