Design System Preview
KUBOTA (クボタ)

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


01 / Colors

カラーパレット

Primary (ブランド)
Kubota Teal
#008486
CTA・リンク・フッター・アイコン
Kubota Teal Light
#339d9e
明るいバリエーション
Accent
Light Blue
#cddcf2
セクション背景・ハイライト
Overlay
Teal Overlay
rgba(0,132,134,0.86)
ヒーロー画像上の半透明オーバーレイ
Text
Text Primary
#333333
本文テキスト
Text Secondary
#666666
補足テキスト
Text on Teal
#ffffff
ティール背景上のテキスト
Surface & Border
Background
#ffffff
ページ背景
Surface Light
#f1f1f1
ナビサブパネル背景
Surface Alt
#f5f5f5
代替セクション背景
Surface Medium
#dedede
戻るボタン背景
Border Cookie
#d1d1d1
フィルターのボーダー

02 / Typography

タイポグラフィ階層

イノベーションで未来を支える
H2 Focus / 34px / 400 / line-height: 1.4 / letter-spacing: noneヒーロー上の大見出し
食料・水・環境の課題解決に挑む
H1 / 20px / 400 / line-height: 1.7 / letter-spacing: 0.03emページ見出し
農業ソリューション
H3 Card / 18px / 400 / line-height: 1.4 / letter-spacing: 0.03em事業カード見出し
製品・ソリューション
Nav Heading / 18px / 400 / line-height: 1.4 / color: #008486ナビ見出し
Highlight Topics
H2 Section / 15px / 400 / line-height: 1.7 / letter-spacing: 0.03emセクション見出し
サブナビゲーション項目
Nav Sub / 14px / 400 / line-height: 1.4 / letter-spacing: 0.03emナビサブ
ナビゲーション内 Bold 見出し
Nav Bold / 14px / 700 / line-height: 1.4ナビ内 span
補足テキスト・ユーティリティ
Utility / 14px / 400 / color: #666666補足
MENU
Menu Button / Helvetica Neue / 14px / 700 / color: #008486ハンバーガーメニュー

コンテンツ組版サンプル

食料・水・環境問題の解決に向けて

クボタは、美しい地球環境を守りながら、人々の豊かな暮らしを支えていくことをめざしています。創業以来130年以上にわたり培ってきた技術と経験を活かし、食料・水・環境の分野でグローバルな社会課題の解決に取り組んでいます。

スマート農業の推進

日本の農業は担い手の高齢化や後継者不足という構造的な課題を抱えています。クボタは自動運転農機やICT技術を活用したスマート農業ソリューションを提供し、農作業の省力化と生産性の向上を実現しています。GPSガイダンスシステムを搭載したトラクタやコンバインは、熟練者でなくても高精度な作業を可能にします。

水インフラの未来

安全な水の供給と適切な水処理は、持続可能な社会の基盤です。クボタは上下水道用の鉄管、ポンプ、水処理膜などの製品を通じて、水環境インフラの整備に貢献しています。世界各地で水不足や水質汚染が深刻化する中、クボタの技術は70カ国以上で活用されています。


04 / Buttons

ボタンバリエーション

詳しく見る
Primary CTA
#008486 / radius: 2px / 700
お問い合わせ
Secondary (Outline)
transparent / border: #008486
戻る
Back Button
#dedede / radius: 0px
Cookie を同意する
Cookie CTA
#008486 / 14.4px / 700
Hero上のボタン(白背景・ティール文字)
事業を知る
On Teal Background

事業フィールドカード

農業ソリューション

トラクタ・コンバイン・田植機から、スマート農業システムまで。食料生産の現場を支える技術と製品をお届けします。

水環境インフラ

上下水道の整備から水処理ソリューションまで。安全な水を届けるためのインフラ技術で、世界70カ国以上に貢献しています。

環境ソリューション

廃棄物処理・リサイクルシステムなど、循環型社会の実現に向けた環境関連製品とサービスを提供しています。

事業カード: 画像背景 + rgba(0,132,134,0.86) ティールオーバーレイ / 見出し 18px 400 白文字 / line-height 1.4

06 / Forms

フォーム要素

検索入力 -- font-size: 26px / border: none / border-bottom: 2px solid #008486
デフォルト -- border: 1px solid #d1d1d1 / radius: 0px
フォーカス -- border-color: #008486 / shadow: rgba(0,132,134,0.15)
エラー -- border-color: #cc3333 / shadow: rgba(204,51,51,0.15)
ピル型 -- border-radius: 50px / border: 1px solid #d1d1d1

07 / Elevation

Depth & Elevation

Level 0: Flat
基本はフラットデザイン。シャドウなし。
Nav Shadow
0px 2px 4px rgba(0,0,0,0.08)
Teal Overlay
rgba(0,132,134,0.86) -- ヒーロー画像上の半透明ティール
Focus / Active
#008486 (Kubota Teal)
クボタはドロップシャドウよりも色面のオーバーレイで奥行きを表現する。ティールオーバーレイ (opacity: 0.86) がデザイン上の最大の深度表現。

08 / Layout

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

ナビゲーションパディング
11px
14px
ナビアイテム padding: 11px 14px
セクションスペーシング
64px
48px
32px
24px
16px
8px
コンテンツ幅
Full Width 100%
Content Width 940px
Article Width 640px
グリッドレイアウト(事業カード)
1/3
1/3
1/3
事業カードは複数カラムのグリッドレイアウト。レスポンシブに応じてカラム数を調整。