色
プロダクトを構成するために必要な最低限の色を定義しています。
コンポーネントの設計において、色を選択する手間を効率化するために、それぞれの色には役割に応じた名前を割り当てています。
色は情報を伝え、動作を示し、反応を促しますが、唯一の視覚的手段にしてはいけません。すべての利用者が同じ情報を知覚できる必要があります。
セマンティックトークン
メイン
プライマリーカラーであるMAINと、コンポーネントのベースカラーとなるWHITEを定めています。
プライマリーカラーは、プロダクトの印象を司る箇所に使います。具体的な使用箇所は、各コンポーネントを参照してください。
プライマリーカラー（プロダクトの印象を司る箇所に使う）
コンポーネントの背景色（Baseコンポーネントなど）
アクセント
コンテキストに応じた色を定めています。
MAINと合わせて、ユーザーのメインアクションや、アクションに対する結果、ヘルプの表示、オブジェクトの状態を表します。
具体的な使用箇所は、各コンポーネントを参照してください。
エラー色（操作前に、個人情報の流出や金銭的／法的リスクなど、強い警告をする場合も含む）
警告色（削除やUndoなどの破壊的アクションをする前の注意に使う）。必ずTEXT_BLACKと組み合わせて使う
文字
テキストの状態に応じた文字の色を定めています。
強調などの文字スタイルは、タイポグラフィを参照してください。
基本的な文字の色
TEXT_BLACKからジャンプ率を確保するときに使う文字の色
リンクを表す文字の色
disabled状態を表す文字の色
暗い地色やMAINに対して使う文字の色
コンポーネント
コンポーネントを構成する要素に必要な色を定めています。
具体的な使用箇所は、各コンポーネントを参照してください。
枠線・罫線の色
TableBulkActionAreaの背景色
テーブルヘッダーの背景色
BACKGROUNDの上で使う囲み色（要素をグルーピングするときに使う色）
WHITEの上で使う囲み色（要素をグルーピングするときに使う色）
画面の背景色
ボタンなどhover時に重ねる色
モーダル表示時のスクリム（モーダルの下の画面に重ねる）の色
デザインツールだけで使う専用スタイル。コンポーネントの枠線などを消すときのAppearanceに使用
プリミティブトークン
セマンティックトークンだけで視覚設計を十分に行なえない場合のみ、プリミティブトークンから色を使用できます。
基本色
グレースケール
透明色
色の新旧比較
2021年2月にプロダクトの色をアップデートしました。
概要は、お知らせ「SmartHR の画面のカラーが新しくなります」を参考にしてください。