SmartHR Design System

色

プロダクトを構成するために必要な最低限の色を定義しています。

コンポーネントの設計において、色を選択する手間を効率化するために、それぞれの色には役割に応じた名前を割り当てています。

色は情報を伝え、動作を示し、反応を促しますが、唯一の視覚的手段にしてはいけません。すべての利用者が同じ情報を知覚できる必要があります。

セマンティックトークン

メイン

プライマリーカラーであるMAINと、コンポーネントのベースカラーとなるWHITEを定めています。

プライマリーカラーは、プロダクトの印象を司る箇所に使います。具体的な使用箇所は、各コンポーネントを参照してください。

MAIN

#0077c7rgb(0,119,199)
利用用途
  • 画面内で強調させたい最も重要な操作要素の背景色
  • 選択状態を表すための背景色、線
コンポーネント内部での使用例
  • variant propsがprimaryのButton の背景色
  • 選択状態のCheckboxの背景色

WHITE

#ffffffrgb(255,255,255)
利用用途
  • 視覚的グルーピングのための矩形の背景色
  • 操作可能な状態を示すための背景色
コンポーネント内部での使用例
使用上の注意
  • テキストにはTEXT_WHITEを使ってください。

アクセント

コンテキストに応じた色を定めています。

MAINと合わせて、ユーザーのメインアクションや、アクションに対する結果、ヘルプの表示、オブジェクトの状態を表します。

具体的な使用箇所は、各コンポーネントを参照してください。

DANGER

#e01e5argb(224,30,90)
利用用途
  • エラー状態を示す要素の背景色、線
  • 削除など破壊的な操作を示す要素の背景色、線
使用上の注意
  • エラー状態や破壊的操作ではないが、注意を促す警告にはWARNING_YELLOWを使ってください。

WARNING_YELLOW

#ffcc17rgb(255,204,23)
利用用途

警告を示す要素の背景色、線に使います。

使用上の注意
  • エラー状態や、破壊的な操作を示す場合にはDANGERを使ってください。

文字

テキストの状態に応じた文字の色を定めています。

強調などの文字スタイルは、タイポグラフィを参照してください。

TEXT_BLACK

#23221ergb(35,34,30)
利用用途

標準的な見出し、段落テキスト、ラベルテキストに使います。 特別な意図がない場合にはこのトークンを選択します。

使用上の注意
  • ジャンプ率が文字の大きさで確保できないときはTEXT_GREYを使ってください。

TEXT_GREY

#706d65rgb(112,109,101)
利用用途
  • 本文に対しての補足の文字色
  • 文字の階層や強弱を文字の大きさ（ジャンプ率）で表現しづらい場合の文字色
コンポーネント内部での使用例

TEXT_LINK

#0071c1rgb(0,113,193)
利用用途
  • リンクを表す文字色、下線
  • インタラクション可能な要素の文字色
コンポーネント内部での使用例

TEXT_DISABLED

#c1bdb7rgb(193,189,183)
利用用途

非活性状態を表す文字色に使います。

コンポーネント内部での使用例
  • 非活性状態のButtonの文字色
使用上の注意
  • 単なるグレーテキストの場合は使わない
    • ジャンプ率を確保したいだけのときはTEXT_GREYを使ってください。
  • 線や塗りの色には使わない

TEXT_WHITE

#ffffffrgb(255,255,255)
利用用途

DANGER、MAINなどの強い塗りの上にある文字色に使います。

コンポーネント内部での使用例
  • variant propsがprimaryのButtonの文字色
使用上の注意
  • 線や塗りにはWHITEを使ってください。

線

線の色を定めています。 具体的な使用箇所は、各コンポーネントを参照してください。

BORDER

#d6d3d0rgb(214,211,208)
利用用途

線の色に使います。

コンポーネント内部での使用例
  • variant propsがsecondaryのButtonの枠線の色

TRANSPARENT

rgba(255,255,255,0)
利用用途

例外的に、コンポーネントの枠線などを消すときに使います。

背景

背景の色を定めています。 具体的な使用箇所は、各コンポーネントを参照してください。

ACTION_BACKGROUND

#d6d3d0rgb(214,211,208)
利用用途

周囲の要素の背景色にWHITE、OVER_BACKGROUND、COLUMNなどがすでに使われている状況で、操作要素を配置する領域をそれらと区別したい場合に背景色として使います。

コンポーネント内部での使用例
  • TableのTableBulkActionRowの背景色
使用上の注意
  • テーブルヘッダーの背景色にはHEADを使ってください。

HEAD

#edebe8rgb(237,235,232)
利用用途
  • テーブルヘッダーの背景色
  • 視覚的グルーピングのCOLUMN以上のネストが必要なとき
コンポーネント内部での使用例
  • Tableのテーブルヘッダーの背景色
使用上の注意
  • TableBulkActionRowにはACTION_BACKGROUNDを使ってください。

OVER_BACKGROUND

#f2f1f0rgb(242,241,240)
利用用途

BACKGROUNDの上で使う囲み色（要素をグルーピングするときに使う色）に使います。

使用上の注意
  • 画面の背景色では使わない
    • BACKGROUNDを使ってください。
  • Panelの中など、WHITEの上では使わない
    • COLUMNを使ってください。

COLUMN

#f8f7f6rgb(248,247,246)
利用用途

WHITEの上で使う囲み色（要素をグルーピングするときに使う色）に使います。

コンポーネント内部での使用例
使用上の注意
  • 画面の背景色では使わない
    • BACKGROUNDを使ってください。
  • BACKGROUNDの上では使わない
    • 色がBACKGROUNDと同じなため、BACKGROUNDの上にはおかないでください。
    • OVER_BACKGROUNDを使ってください。

BACKGROUND

#f8f7f6rgb(248,247,246)
利用用途

ページの最背面の背景色に使います。

使用上の注意
  • WHITEの上ではCOLUMNを使ってください。

OVERLAY

rgba(3,3,2,0.15)
利用用途

ボタンなどhover時に重ねる色に使います。

SCRIM

rgba(3,3,2,0.5)
利用用途

モーダル表示時のスクリム（モーダルの下の画面に重ねる）の色に使います。

チャート（グラフ）

チャートで使用する色を定めています。チャートには指定された順序で色を使用します。

多色チャート

CHART_COLOR_1
#00c4cc
rgb(0,196,204)

CHART_COLOR_2
#ffcd00
rgb(255,205,0)

CHART_COLOR_3
#ff9100
rgb(255,145,0)

CHART_COLOR_4
#e65537
rgb(230,85,55)

CHART_COLOR_5
#2d4b9b
rgb(45,75,155)

CHART_COLOR_6
#2d7df0
rgb(45,125,240)

CHART_COLOR_7
#69d7ff
rgb(105,215,255)

CHART_COLOR_8
#4bb47d
rgb(75,180,125)

CHART_COLOR_9
#05878c
rgb(5,135,140)

CHART_COLOR_10
#005a64
rgb(0,90,100)

単色チャート

SINGLE_CHART_COLOR_1
#a1e3e6
rgb(161,227,230)

SINGLE_CHART_COLOR_2
#00c4cc
rgb(0,196,204)

SINGLE_CHART_COLOR_3
#00acb3
rgb(0,172,179)

SINGLE_CHART_COLOR_4
#05868b
rgb(5,134,139)

SINGLE_CHART_COLOR_5
#055659
rgb(5,86,89)

SINGLE_CHART_COLOR_6
#033033
rgb(3,48,51)

プリミティブトークン

セマンティックトークンだけで視覚設計を十分に行えない場合のみ、プリミティブトークンから色を使用できます。

基本色

BLACK
#030302
rgb(3,3,2)

WHITE
#ffffff
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.3)

TRANSPARENCY_50
rgba(3,3,2,0.5)

色の新旧比較

2021年2月にプロダクトの色をアップデートしました。

概要は、お知らせ「SmartHR の画面のカラーが新しくなります別タブで開く」を参考にしてください。

メイン

MAIN

新
#0077c7
rgb(0,119,199)

旧
#00a5ab
rgb(0,165,171)

WHITE

新 ※変更なし
#ffffff
rgb(255,255,255)

旧
#fff
rgb(255,255,255)

アクセント

DANGER

新
#e01e5a
rgb(224,30,90)

旧
#ef475b
rgb(239,71,91)

WARNING（WARNING_YELLOW）

新
#ffcc17
rgb(255,204,23)

旧
#ff8800
rgb(255,136,0)

文字

TEXT_BLACK

新
#23221e
rgb(35,34,30)

旧
#333333
rgb(51,51,51)

TEXT_GREY

新
#706d65
rgb(112,109,101)

旧
#767676
rgb(118,118,118)

TEXT_LINK

新
#0071c1
rgb(0,113,193)

旧
#007bc2
rgb(0,123,194)

TEXT_DISABLED

新
#c1bdb7
rgb(193,189,183)

旧
#c1c1c1
rgb(193,193,193)

TEXT_WHITE（新のみ）

新
#ffffff
rgb(255,255,255)

線

BORDER

新
#d6d3d0
rgb(214,211,208)

旧
#d6d6d6
rgb(214,214,214)

TRANSPARENT

新 ※変更なし
rgba(255,255,255,0)

旧
rgba(255,255,255,0)

背景

ACTION_BACKGROUND（新のみ）

新
#d6d3d0
rgb(214,211,208)

HEAD（新のみ）

新
#edebe8
rgb(237,235,232)

OVER_BACKGROUND（新のみ）

新
#f2f1f0
rgb(242,241,240)

COLUMN

新
#f8f7f6
rgb(248,247,246)

旧
#f9f9f9
rgb(249,249,249)

BACKGROUND

新
#f8f7f6
rgb(248,247,246)

旧
#f5f6fa
rgb(245,246,250)

OVERLAY

新
rgba(3,3,2,0.15)

旧
rgba(0,0,0,0.15)

SCRIM

新
rgba(3,3,2,0.5)

旧
rgba(0,0,0,0.5)