カラー
セマンティックカラー
用途ごとに名前を付けて管理された色をセマンティックカラーと言います。
画面を構成する上で基本的な要素に色が割り当てられているので、デザインをする際の基礎としてこのセマンティックカラーを用いて画面構成を行ってください。
またUIデザインをする対象物に合わせて、セマンティックカラーを2つ用意しています。対象のシステム/アプリの特色に合わせてセマンティックカラーを使用してください。
業務/制御系システムとは、そのシステムが止まると大きな影響があるもの、損害を被るものを指しています。
情報系システムは、システムが止まっても代替が可能なものを指しています。
業務/制御系システムでは、サービス/プロダクトのアイデンティティを強く表現したりグラフィカルな画面を構成したりすることが少ないこと、またミスが少なくなるようなUIが求められるため、沈静的なクール系の色味のセマンティックカラーを提供しています。
情報系システムでは、サービス/プロダクトのカラーとの親和性を考慮し、ニュートラルなモノトーンで構成したセマンティックカラーを用意しています。
各種システム用カラーパレット
デンソーレッドはブランドを表現するカラーであるため、ステータスの赤には使用しないようにしてください。
デンソーレッドとの差分をつけること、JISの改変理由である1型色覚の方が見やすい傾向にするため、黄み寄りの赤を設定しています。
セマンティックカラー
ライトモード
テキスト
Body_1
Body_2
Description
Place Holder
Link
Disable
背景
Primary
Secondary
Tertiary
アイコン
Normal
ボタン
Primary
Secondary
Tertiary
Hover, Active
(White)
Hover, Active
(Black)
線
Normal
Selected
Secondary
Tertiary
Text Field
ステータス
Active
In progress, Safe
Caution
Emergency
Done
ダークモード
テキスト
Body_1
Body_2
Description
Place Holder
Link
Disable
背景
Body
Secondary
Tertiary
アイコン
Normal
ボタン
Primary
Secondary
Tertiary
Hover, Active
(White)
Hover, Active
(Black)
線
Normal
Selected
Secondary
Text Field
ステータス
Active
In progress, Safe
Caution
Emergency
Done
グレースケール
Black
Gray900
Gray800
Gray700
Gray600
Gray500
Gray400
Gray300
Gray200
Gray100
White
セマンティックカラー
ライトモード
テキスト
Body_1
Body_2
Description
Place Holder
Link
Disable
背景
Primary
Secondary
Tertiary
アイコン
Normal
ボタン
Primary
Secondary
Tertiary
Hover, Active
(White)
Hover, Active
(Black)
線
Normal
Selected
Secondary
Tertiary
Text Field
ステータス
Active
In progress, Safe
Caution
Emergency
Done
ダークモード
テキスト
Body_1
Body_2
Description
Place Holder
Link
Disable
背景
Body
Secondary
Tertiary
アイコン
Normal
ボタン
Primary
Secondary
Tertiary
Hover, Active
(White)
Hover, Active
(Black)
線
Normal
Selected
Secondary
Text Field
ステータス
Active
In progress, Safe
Caution
Emergency
Done
グレースケール
Black
Gray900
Gray800
Gray700
Gray600
Gray500
Gray400
Gray300
Gray200
Gray100
White