ブランドカラーを反映した意味のある色によって、プロダクトの印象に統一感を与えます。

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

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

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

メイン

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

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

MAIN
#0077c7
rgba(0,119,199)

プライマリーカラー(プロダクトの印象を司る箇所に使用)

WHITE
#ffffff
rgba(255,255,255)

コンポーネントの背景色(Baseコンポーネントなど)

アクセント

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

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

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

DANGER
#e01e5a
rgba(224,30,90)

エラー色(操作前に、個人情報の流出や金銭的/法的リスクなど、強い警告をする場合も含む)

WARNING
#ff8800
rgba(255,136,0)

警告色(削除やUndoなどの破壊的アクションをする前の注意に使う)

文字

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

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

TEXT_BLACK
#23221f
rgba(35,34,31)

基本的な文字の色

TEXT_GREY
#706d65
rgba(112,109,101)

TEXT_BLACKからジャンプ率を確保するときに使う文字の色

TEXT_LINK
#0071c1
rgba(0,113,193)

リンクを表す文字の色

TEXT_DISABLED
#c1bdb7
rgba(193,189,183)

disabled状態を表す文字の色

TEXT_WHITE
#ffffff
rgba(255,255,255)

暗い地色やMAINに対して使う文字の色

コンポーネント

コンポーネントを構成する要素に必要な色を定めています。

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

BORDER
#d6d3d0
rgba(214,211,208)

枠線・罫線の色

ACTION_BACKGROUND
#d6d3d0
rgba(214,211,208)

TableBulkActionAreaの背景色

HEAD
#edebe8
rgba(237,235,232)

テーブルヘッダーの背景色

OVER_BACKGROUND
#f2f1f0
rgba(242,241,240)

BACKGROUNDの上で使う囲み色(要素をグルーピングするときに使う色)

COLUMN
#f8f7f6
rgba(248,247,246)

WHITEの上で使う囲み色(要素をグルーピングするときに使う色)

BACKGROUND
#f8f7f6
rgba(248,247,246)

画面の背景色

OVERLAY
#00000026
rgba(0,0,0)

ボタンなどhover時に重ねる色

SCRIM
#0000007f
rgba(0,0,0)

モーダル表示時のスクリム(モーダルの下の画面に重ねる)の色

TRANSPARENT
#ffffff00
rgba(255,255,255)

デザインツールだけで使う専用スタイル。コンポーネントの枠線などを消すときのAppearanceに使用

色の新旧比較

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

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

メイン

MAIN

#0077c7
rgba(0,119,199)

#00a5ab
rgba(0,165,171)

WHITE

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

#ffffff
rgba(255,255,255)

アクセント

DANGER

#e01e5a
rgba(224,30,90)

#ef475b
rgba(239,71,91)

WARNING

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

#ff8800
rgba(255,136,0)

文字

TEXT_BLACK

#23221f
rgba(35,34,31)

#333333
rgba(51,51,51)

TEXT_GREY

#706d65
rgba(112,109,101)

#767676
rgba(118,118,118)

#0071c1
rgba(0,113,193)

#007bc2
rgba(0,123,194)

TEXT_DISABLED

#c1bdb7
rgba(193,189,183)

#c1c1c1
rgba(193,193,193)

TEXT_WHITE(新のみ)

#ffffff
rgba(255,255,255)

コンポーネント

BORDER

#d6d3d0
rgba(214,211,208)

#d6d6d6
rgba(214,214,214)

ACTION_BACKGROUND(新のみ)

#d6d3d0
rgba(214,211,208)

HEAD(新のみ)

#edebe8
rgba(237,235,232)

OVER_BACKGROUND(新のみ)

#f2f1f0
rgba(242,241,240)

COLUMN

#f8f7f6
rgba(248,247,246)

#f9f9f9
rgba(249,249,249)

BACKGROUND

#f8f7f6
rgba(248,247,246)

#f5f6fa
rgba(245,246,250)

OVERLAY

新 ※変更なし
#00000026
rgba(0,0,0)

#00000026
rgba(0,0,0)

SCRIM

新 ※変更なし
#0000007f
rgba(0,0,0)

#0000007f
rgba(0,0,0)

TRANSPARENT

新 ※変更なし
#ffffff00
rgba(255,255,255)

#ffffff00
rgba(255,255,255)

© 2021, SmartHR, Inc.