SmartHR Design System

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

プロダクトを構成するために必要な最低限の色を定義しています。
コンポーネントの設計において、色を選択する手間を効率化するために、それぞれの色には役割に応じた名前を割り当てています。
色は情報を伝え、動作を示し、反応を促しますが、唯一の視覚的手段にしてはいけません。すべての利用者が同じ情報を知覚できる必要があります。

メイン

プライマリーカラーである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)

警告色

文字

テキストの状態に応じた文字の色を定めています。 強調等の文字スタイルは、タイポグラフィを参照してください。

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状態を表す文字の色

コンポーネント

コンポーネントを構成する要素に必要な色を定めています。 具体的な使用箇所は、各コンポーネントを参照してください。

BORDER
#D6D3D0
rgba(214,211,208)

枠線・罫線の色

ACTION_BACKGROUND
#D6D3D0
rgba(214,211,208)

テーブルのBulkActionAreaの背景色

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)

Sketchだけで使う専用スタイル。コンポーネントの枠線などを消すときの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)

コンポーネント

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.