Design System Preview
Kyocera (京セラ) — 日本語版

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

製品・ソリューション DESIGN.md を読む

01 / Colors

カラーパレット

Text
Text Heading
#000000
見出しテキスト
Text Primary
#333333
本文テキスト
Text Secondary
#666666
補足テキスト
Text Light
#999999
ページネーション等
Surface & Background
Background
#ffffff
ページ背景
Surface Light
#f7f7f7
セクション背景(最多使用)
Surface Tag
#f9f9f9
タグボタン背景
Divider
#ededed
ナビ項目背景
Footer
#f0f0f0
フッター背景
Border
#dddddd
ボーダー・枠線
Navigation (Dark Gray)
Nav Header
#313131
ナビヘッダー
Nav Primary
#4f4f4f
メインナビ
Nav Secondary
#616161
サブナビ
Nav Highlight
#747474
TOPリンク
Search Button
#666666
検索ボタン
Pagination Active
#999999
現在ページ

02 / Typography -- 実測値

タイポグラフィ階層

セクション見出し -- Section Title (h2)
22.5px / 700 / line-height: 1.0 / letter-spacing: normal / palt: なしトップページ
サブ見出し -- Sub Title (h3)
24px / 700 / line-height: 1.375 / letter-spacing: normal / palt: なしトップページ
特集記事見出し -- Feature Title (p)
20px / 700 / line-height: 1.4 / letter-spacing: normal / palt: なしトップページ
企業情報見出し -- Section Title (h2)
19px / 500 / line-height: 1.6 / border-bottom つき企業情報ページ
バナー見出し -- Banner Title (h3)
18px / 700 / line-height: 1.389 / letter-spacing: normal / palt: なしトップページ
カードタイトル -- Card Title (p)
16px / 700 / line-height: 1.625 / letter-spacing: normal / palt: なしトップページ
企業情報の本文テキスト -- 世界を取り巻くさまざまな社会課題を技術の力で解決し、より良い未来をつくれないか。京セラは、ファインセラミックスをはじめとする先端技術で、情報通信、自動車関連、環境・エネルギー、医療・ヘルスケアなど、幅広い分野に貢献しています。
16px / 400 / line-height: 2.0 / letter-spacing: normal / palt: なし企業情報ページ
トップページ本文 -- ニュースや製品情報の説明テキスト。line-height は 1.625 で企業情報ページより詰まっている。
16px / 400 / line-height: 1.625 / letter-spacing: normal / palt: なしトップページ
補足テキスト -- バナー説明文 (14px)
14px / 400 / line-height: 1.571 / color: #666666トップページ
ナビゲーションリンク -- Nav Link (13px / 500)
13px / 500 / line-height: 1.846ヘッダー
キャプション -- Caption (12px)
12px / 400 / line-height: 1.417トップページ

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

ファインセラミックスの可能性

京セラは1959年の創業以来、ファインセラミックスの技術を核に事業を展開してきました。高い耐熱性、耐摩耗性、絶縁性など、材料の特性を最大限に活かした製品で、さまざまな産業に貢献しています。

技術の力で社会課題を解決する

情報通信、自動車関連、環境・エネルギー、医療・ヘルスケアなど、幅広い分野で京セラの技術が活用されています。半導体パッケージ、電子部品、太陽電池、人工関節など、私たちの生活を支える製品の多くに京セラの技術が使われています。ABCabc 123


04 / Buttons

ボタンバリエーション

Tag Button (最多使用)
Navigation & Action
Mega Menu Item
セラミックパッケージ パッケージ材料(封止材・ペースト) 有機パッケージ
Navigation Demo
Pagination
1 2 3 4 5
Search
Search Button: bg #666666, border #666666

05 / Cards

カードコンポーネント

1440 x 810 Image

京セラが推進するモビリティの未来

自動車関連事業で培った技術を活かし、次世代モビリティの実現に貢献します。

1440 x 810 Image

ファインセラミックスワールド

材料の特性を生かし、社会で役立つファインセラミックスのすごさを紹介します。

1440 x 810 Image

セキュリティをわかりやすく

難しいセキュリティの話題を、わかりやすく解説するコンテンツシリーズです。


06 / Forms

フォーム要素

デフォルト -- border: #dddddd, radius: 0px, font-size: 18px
フォーカス -- border: #000000
正しいメールアドレスを入力してください
エラー -- border: #cc0000
チェックボックスラベル -- 14px / 500

07 / Elevation -- フラットデザイン

Depth & Elevation

Level 0: Flat
影なし。border: #dddddd のみ。全要素がこのレベル
Surface Light
背景色 #f7f7f7 で区別。影は使用しない
Surface Tag
背景色 #f9f9f9 + border で区別
Navigation
ダークグレー #4f4f4f が最も高い視覚的深度

京セラのサイトは box-shadow を一切使用しない完全フラットデザイン。要素の区別はボーダーと背景色の差で表現する。


08 / Layout

レイアウト & グレースケール

グレースケール階層
#000
#313131
#333
#4f4f4f
#616161
#666
#747474
#999
#ddd
#ededed
#f0f0f0
#f7f7f7
#f9f9f9
#fff
Design Characteristics