色

色分類

基本：

メイン
サブ
ポイント

背景：

基本
ハイライト
アクティブ

モノトーン：

黒
テキスト
暗い
基本
明るい
白

機能：

リンク
リンク背景
エラー・注意
注意背景

要素：

ボタン
ボタン（濃い）
ボタン（薄い）
inputなど枠

色の用途と増やし方

色の用途

変数	属性	内容
$color-key	基本	対象のWEBサイト・システムのキーとなるカラーです。ブランドカラーになる場合が多いです。
$color-sub	基本	キーカラーを補助するカラーです。（キーカラーの背景にも馴染むカラーを推奨します。）
$color-point	基本	[※基本的には不要] ポイント、差し色となるカラーです。（※キーカラーが目立たないなど、ポイント色に合わない場合こちらのカラーを使用します。）
$color-bg	背景	まとめの記述など、コンテンツと切り離して独立しても成り立つ要素の背景や、フォームUIのグループを明示する際に利用します。
$color-bg-hiligh	背景	背景をホバー（hover）した際にマーキングしたい場合利用します。
$color-bg-active	背景	背景がアクティブになった際にマーキングしたい場合利用します。
$color-black	モノトーン	黒
$color-text	モノトーン	テキストに使用
$color-gray-dark	モノトーン	ネガティブなボタンに使用。
$color-gray	モノトーン	枠線の基本となるカラー
$color-gray-bright	モノトーン	非アクティブのボタンに使用。
$color-white	モノトーン	白
$color-link	機能	リンク色に使用します。
$color-link-bg	機能	マウスオンで背景が明るくなります。
$color-caution	機能	エラーや注意書きに使用します。
$color-caution-bg	機能	エラーや注意書きの背景に使用します。
$color-label-XXXXX	機能	ラベルなど、機能的なオブジェクトに対してのみカラー追加が可能です。
$bg-btn	要素	要素を初期設定で装飾します。（input系の枠線）
$bg-btn-dark	要素	要素を初期設定で装飾します。（input系の枠線）
$bg-btn-bright	要素	ボタンの明るい色（ホバー背景など）で装飾します
$color-element-dark	要素	要素を初期設定で装飾します。（input系の枠線）

※色の名称は用途をベースに付けています。例えば、グレーを例にどの色を指しているか、人それぞれ認識が違ってしまう可能性に対するエラーを回避するための命名です。

色の増やし方

基本的に色を増やすことを禁止します。やむをえず、色を増やす事案が発生した際は以下の点に留意してください。

ベースとなる基本色をまず定める
ただし、明度・彩度は色相ごとに変化させて良いものとする。
同系色の中では色相の値を固定する。
明度・彩度を変化させてバリエーションを作る。