色
プロダクトを構成するために必要な最低限の色を定義しています。
コンポーネントの設計において、色を選択する手間を効率化するために、それぞれの色には役割に応じた名前を割り当てています。
色は情報を伝え、動作を示し、反応を促しますが、唯一の視覚的手段にしてはいけません。すべての利用者が同じ情報を知覚できる必要があります。
プライマリーカラーである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に使用
チャートで使用する色を定めています。チャートには指定された順序で色を使用します。
CHART_COLOR_1
#00c4cc
rgb(0,196,204)
多色チャート色1
CHART_COLOR_2
#ffcd00
rgb(255,205,0)
多色チャート色2
CHART_COLOR_3
#ff9100
rgb(255,145,0)
多色チャート色3
CHART_COLOR_4
#e65537
rgb(230,85,55)
多色チャート色4
CHART_COLOR_5
#2d4b9b
rgb(45,75,155)
多色チャート色5
CHART_COLOR_6
#2d7df0
rgb(45,125,240)
多色チャート色6
CHART_COLOR_7
#69d7ff
rgb(105,215,255)
多色チャート色7
CHART_COLOR_8
#4bb47d
rgb(75,180,125)
多色チャート色8
CHART_COLOR_9
#05878c
rgb(5,135,140)
多色チャート色9
CHART_COLOR_10
#005a64
rgb(0,90,100)
多色チャート色10
SINGLE_CHART_COLOR_1
#a1e3e6
rgb(161,227,230)
単色チャート色1
SINGLE_CHART_COLOR_2
#00c4cc
rgb(0,196,204)
単色チャート色2
SINGLE_CHART_COLOR_3
#00acb3
rgb(0,172,179)
単色チャート色3
SINGLE_CHART_COLOR_4
#05868b
rgb(5,134,139)
単色チャート色4
SINGLE_CHART_COLOR_5
#055659
rgb(5,86,89)
単色チャート色5
SINGLE_CHART_COLOR_6
#033033
rgb(3,48,51)
単色チャート色6
その他のチャート色は、チャート内の「その他」を示す項目に使います。
OTHER_CHART_COLOR
#ebebeb
rgb(235,235,235)
「その他」項目に使う色
セマンティックトークンだけで視覚設計を十分に行なえない場合のみ、プリミティブトークンから色を使用できます。
WHITE
#fff
rgb(255,255,255)
BLUE_100
#0077c7
rgb(0,119,199)
BLUE_101
#0071c1
rgb(0,113,193)
GREEN_100
#0f7f85
rgb(15,127,133)
ORANGE_100
#f56121
rgb(245,97,33)
RED_100
#e01e5a
rgb(224,30,90)
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)
