Design System Preview
ENEOS — 日本語版

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

個人のお客様 法人のお客様 企業情報
01 / Colors

カラーパレット

Brand
ENEOS Teal
#00ada9
タブ・ドット・アクセント
Teal 70%
rgba(0,173,169,0.7)
タブアクティブ背景
ENEOS Orange
#e94709
企業情報見出し・ナビアクティブ
Orange Dark
#bf340a
経営戦略セクション背景
Semantic
Attention
#cc0000
注意喚起アイコン
Energy Orange
#fe6230
石油・ガスカテゴリ
Environment
#8db501
環境カテゴリ
Energy Gold
#e3b102
エネルギーシステム
Corporate Navy
#27455c
装飾背景
Stats Blue
#3b609a
数字で見るENEOS
Corporate Green
#468254
装飾要素
Neutral
Text Primary
#333333
本文テキスト
Text Secondary
#696969
補足テキスト
Placeholder
#bbbbbb
プレースホルダー
Border
#cccccc
ボタン枠線・区切り
Background
#ffffff
ページ背景
Background Secondary
#f4f4f4
セクション背景
Background Warm
#f4f4f0
統計セクション
Surface Gray
#e4e4e4
カルーセル非アクティブドット
Assist Menu
#666666
フローティングメニュー
Footer
#000000
フッター背景
02 / Typography -- 実測値

タイポグラフィ階層

企業情報
Noto Sans JP / 63px / 700 / line-height: 1.2 / letter-spacing: normal企業情報ページ h1
私たちの使命と価値
Noto Sans JP / 43px / 500 / line-height: 1.2 / color: #e94709企業情報ページ h2
「今日のあたり前」を支え、「明日のあたり前」をリードする。
Noto Sans JP / 27px / 700 / line-height: 1.5 / color: #e94709リード文
トップメッセージ
Noto Sans JP / 20px / 400 / line-height: 1.8ボタンv4ラベル
タブラベル -- Tab Label (18px)
Meiryo / 18px / 400 / line-height: 1.39~1.6トップページ
本文テキスト -- ENEOSのサイトは、メイリオを基本フォントとした、落ち着いたコーポレートデザインです。letter-spacingやpaltは使用せず、メイリオのデフォルトメトリクスで表示します。
Meiryo / 16px / 400 / line-height: 1.6 / letter-spacing: normal / palt: なしトップページ body
企業情報ページの本文テキスト。Noto Sans JPを使用し、統一感のあるデザインです。
Noto Sans JP / 16px / 400 / line-height: 1.5企業情報ページ body
ナビゲーションリンク -- Nav Link (14px)
Meiryo / 14px / 400 / line-height: 1.6 / color: #696969ヘッダー
パンくず -- Breadcrumb (13px)
Meiryo / 13px / 400 / line-height: 1.6企業情報ページ
メニュー / SS検索 / 検索
Meiryo / 9px / 400 / line-height: 1.0 / bg: #666666フローティングメニュー
03 / Article -- 企業情報ページ組版

企業情報ページの組版サンプル

私たちの使命と価値

「今日のあたり前」を支え、「明日のあたり前」をリードする。

ENEOSは、社会とともに歩む企業としての姿勢を明確にしています。安全・安心のエネルギー供給やカーボンニュートラルへの挑戦を通じて、持続可能な社会の実現に貢献します。

エネルギー企業としての使命を果たしながら、水素燃料電池システムやEV関連サービスなど、次世代エネルギーへの投資も積極的に進めています。ABCabc 12345

04 / Buttons

ボタンバリエーション

個人のお客様 トップへ
Standard CTA
MORE
MORE
Cookie設定
Accent (Teal)
調達情報
Outline (企業情報)
企業情報
Nav Active
！
Attention Badge
法人のお客様
Tab Active
個人のお客様
Tab Inactive
Carousel Dots
active = #00ada9 / inactive = #e4e4e4
05 / Cards

カードコンポーネント

水素燃料電池システム

新造レストランシップへの水素供給について、次世代エネルギーへの取り組みを紹介します。

詳しく見る

カーボンニュートラル戦略

2050年のカーボンニュートラル実現に向けたENEOSの事業戦略とロードマップ。

詳しく見る

サービスステーション検索

お近くのENEOSサービスステーションを探せます。給油、EV充電、水素ステーションに対応。

詳しく見る
Overlay Card
サービスステーション
水素ステーション
EV関連サービス
06 / Forms

フォーム要素

デフォルト -- border: #cccccc, radius: 0px
フォーカス -- border: #00ada9 (ENEOS Teal)
正しいメールアドレスを入力してください
エラー -- border: #cc0000 (Attention)
Search (Assist Style)
bg: #666666, text: #ffffff, font-size: 14px
07 / Elevation -- フラットデザイン基調

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ（基本）
Overlay
rgba(0,0,0,0.6) 画像上テキスト
Slider Arrow
rgba(0,0,0,0.2) カルーセル矢印
Focus Ring
#00ada9 (ENEOS Teal)
08 / Layout

レイアウト

コンテンツ幅
Main Content ~1100px
Article / Company ~960px
フォントスタック比較
トップページ: メイリオベースのフォントスタック。Windows環境を重視した指定。
企業情報ページ: Noto Sans JP単独指定。統一感のある表示。
特徴