色
プロダクトを構成するために必要な最低限の色を定義しています。
コンポーネントの設計において、色を選択する手間を効率化するために、それぞれの色には役割に応じた名前を割り当てています。
色は情報を伝え、動作を示し、反応を促しますが、唯一の視覚的手段にしてはいけません。すべての利用者が同じ情報を知覚できる必要があります。
プライマリーカラーであるMAIN
と、コンポーネントのベースカラーとなるWHITE
を定めています。
プライマリーカラーは、プロダクトの印象を司る箇所に使います。具体的な使用箇所は、各コンポーネントを参照してください。
MAIN
#0077c7
rgb(0,119,199)
プライマリーカラー(プロダクトの印象を司る箇所に使う)
WHITE
#fff
rgb(255,255,255)
コンポーネントの背景色(Baseコンポーネントなど)
コンテキストに応じた色を定めています。
MAIN
と合わせて、ユーザーのメインアクションや、アクションに対する結果、ヘルプの表示、オブジェクトの状態を表します。
具体的な使用箇所は、各コンポーネントを参照してください。
DANGER
#e01e5a
rgb(224,30,90)
エラー色(操作前に、個人情報の流出や金銭的/法的リスクなど、強い警告をする場合も含む)
WARNING_YELLOW
#ffcc17
rgb(255,204,23)
警告色(削除やUndoなどの破壊的アクションをする前の注意に使う)。必ずTEXT_BLACKと組み合わせて使う
テキストの状態に応じた文字の色を定めています。
強調などの文字スタイルは、タイポグラフィを参照してください。
TEXT_BLACK
#23221e
rgb(35,34,30)
基本的な文字の色
TEXT_GREY
#706d65
rgb(112,109,101)
TEXT_BLACKからジャンプ率を確保するときに使う文字の色
TEXT_LINK
#0071c1
rgb(0,113,193)
リンクを表す文字の色
TEXT_DISABLED
#c1bdb7
rgb(193,189,183)
disabled状態を表す文字の色
TEXT_WHITE
#fff
rgb(255,255,255)
暗い地色やMAINに対して使う文字の色
コンポーネントを構成する要素に必要な色を定めています。
具体的な使用箇所は、各コンポーネントを参照してください。
BORDER
#d6d3d0
rgb(214,211,208)
枠線・罫線の色
ACTION_BACKGROUND
#d6d3d0
rgb(214,211,208)
TableBulkActionAreaの背景色
HEAD
#edebe8
rgb(237,235,232)
テーブルヘッダーの背景色
OVER_BACKGROUND
#f2f1f0
rgb(242,241,240)
BACKGROUNDの上で使う囲み色(要素をグルーピングするときに使う色)
COLUMN
#f8f7f6
rgb(248,247,246)
WHITEの上で使う囲み色(要素をグルーピングするときに使う色)
BACKGROUND
#f8f7f6
rgb(248,247,246)
画面の背景色
OVERLAY
rgba(3,3,2,0.15)
ボタンなどhover時に重ねる色
SCRIM
rgba(3,3,2,0.5)
モーダル表示時のスクリム(モーダルの下の画面に重ねる)の色
TRANSPARENT
rgba(255,255,255,0)
デザインツールだけで使う専用スタイル。コンポーネントの枠線などを消すときのAppearanceに使用
セマンティックトークンだけで視覚設計を十分に行なえない場合のみ、プリミティブトークンから色を使用できます。
WHITE
#fff
rgb(255,255,255)
BLUE_100
#0077c7
rgb(0,119,199)
BLUE_101
#0071c1
rgb(0,113,193)
RED_100
#e01e5a
rgb(224,30,90)
ORANGE_100
#ff8800
rgb(255,136,0)
YELLOW_100
#ffcc17
rgb(255,204,23)
SMARTHR_BLUE
#00c4cc
rgb(0,196,204)
GREY_5
#f8f7f6
rgb(248,247,246)
GREY_6
#f5f4f3
rgb(245,244,243)
GREY_7
#f2f1f0
rgb(242,241,240)
GREY_9
#edebe8
rgb(237,235,232)
GREY_20
#d6d3d0
rgb(214,211,208)
GREY_30
#c1bdb7
rgb(193,189,183)
GREY_65
#706d65
rgb(112,109,101)
GREY_100
#23221e
rgb(35,34,30)
TRANSPARENCY_15
rgba(3,3,2,0.15)
TRANSPARENCY_30
rgba(3,3,2,0.30)
TRANSPARENCY_50
rgba(3,3,2,0.50)
2021年2月にプロダクトの色をアップデートしました。
概要は、お知らせ「SmartHR の画面のカラーが新しくなります」を参考にしてください。
新 ※変更なし
#fff
rgb(255,255,255)
新
#ffcc17
rgb(255,204,23)
新
#706d65
rgb(112,109,101)
旧
#767676
rgb(118,118,118)
新
#c1bdb7
rgb(193,189,183)
旧
#c1c1c1
rgb(193,193,193)
新
#d6d3d0
rgb(214,211,208)
旧
#d6d6d6
rgb(214,214,214)
新
#d6d3d0
rgb(214,211,208)
新
#edebe8
rgb(237,235,232)
新
#f2f1f0
rgb(242,241,240)
新
#f8f7f6
rgb(248,247,246)
旧
#f9f9f9
rgb(249,249,249)
新
#f8f7f6
rgb(248,247,246)
旧
#f5f6fa
rgb(245,246,250)
新 ※変更なし
rgba(255,255,255,0)