SmartHR Design System

ポジティブで親しみやすい、SmartHRらしい印象に近づけることができる色を定義しました。

ガイドライン

SmartHRでは、基本的に以下の色を使用してください。

Primary Brand Color

SmartHRブランドの中心となるブランドカラーです。

SmartHR Blue
#00C4CC
rgba(0,196,204)

CMYK(70, 0, 30, 0)DIC 97、PANTONE 2397、白地でのテキストへの使用は非推奨です。

Secondary Brand Colors

Primary Brand Colorを引き立たせるブランドカラーです。

Black
#23221F
rgba(35,34,31)

テキストへの使用を推奨します。

Orange
#FF9900
rgba(255,153,0)

アクセントとしての使用を推奨します。

White
#FFFFFF
rgba(255,255,255)

Extended Colors

Primary Brand Color、Secondary Brand Colorと調和するカラーです。

SmartHRを説明/表現する際に必要な要素(テキスト、イラスト、背景など)で、Extended Colorsを用いることで、ブランドカラーをより印象的に扱うことに繋がります。

これらの色の使用を推奨しますが、利用シーンに合う色がない場合は、Extended Colorsのトーンを参考に、色を調整して使用することもできます。色づかいで迷った際には # designcomm依頼で気軽にご相談ください。

Stone

Stone01
#F8F7F6
rgba(248,247,246)

Stone02
#EDEBE6
rgba(237,235,230)

Stone03
#AAA69F
rgba(170,166,159)

Stone04
#4E4C49
rgba(78,76,73)

テキストへの利用を推奨します。

Aqua

Aqua01
#D4F4F5
rgba(212,244,245)

Aqua02
#69D9DE
rgba(105,217,222)

Aqua03
#12ABB1
rgba(18,171,177)

Aqua04
#0F7F85
rgba(15,127,133)

テキストへの使用を推奨します。

Sakura

Sakura01
#F9E9F7
rgba(249,233,247)

Sakura02
#F8B2E1
rgba(248,178,225)

Sakura03
#D362AF
rgba(211,98,175)

Sakura04
#82407C
rgba(130,64,124)

Momiji

Momiji01
#FFE7E5
rgba(255,231,229)

Momiji02
#FF9E9C
rgba(255,158,156)

Momiji03
#EC5A55
rgba(236,90,85)

Momiji04
#A53F3F
rgba(165,63,63)

Sunlight

Sunlight01
#FAF2D0
rgba(250,242,208)

Sunlight02
#FFEE11
rgba(255,238,17)

Sunlight03
#FFD74A
rgba(255,215,74)

Sunlight04
#F56121
rgba(245,97,33)

Grass

Grass01
#E6F2C8
rgba(230,242,200)

Grass02
#AEE26B
rgba(174,226,107)

Grass03
#3DCC65
rgba(61,204,101)

Grass04
#378445
rgba(55,132,69)

Sky

Sky01
#DDF2FB
rgba(221,242,251)

Sky02
#8FE2FC
rgba(143,226,252)

Sky03
#32B7F0
rgba(50,183,240)

Sky04
#1376A0
rgba(19,118,160)

Marine

Marine01
#DEE9FF
rgba(222,233,255)

Marine02
#8AC0FF
rgba(138,192,255)

Marine03
#0075E3
rgba(0,117,227)

Marine04
#26519F
rgba(38,81,159)

Galaxy

Galaxy01
#EEE5FD
rgba(238,229,253)

Galaxy02
#9D8EF8
rgba(157,142,248)

Galaxy03
#8C5EEE
rgba(140,94,238)

Galaxy04
#6E4CA6
rgba(110,76,166)

Earth

Earth01
#FBEDE1
rgba(251,237,225)

Earth02
#F2D3A4
rgba(242,211,164)

Earth03
#BA621E
rgba(186,98,30)

Earth04
#76533E
rgba(118,83,62)

ダウンロード

Macで使う

SmartHR従業員のMacには、インストールされています。インストールされていないほうは、以下の手順でご利用ください。

1. 下記の「SmartHRColor.zip」をダウンロード。

SmartHRColor_mac.zip

2. Finderのメニューバーから「移動」→「ライブラリ」を選択。

「ライブラリ」が表示されない場合は、Optionキーを押しながら「移動」→「ライブラリ」を選択。

color mac step2

3.「ライブラリ」内の「Colors」に「SmartHRColor.clr」を格納

color mac step3

Keynoteで使う

1. Keynoteを開く

2. メニューバーから「表示」→「カラーパネルを表示」を選択

color_keynote_step2

3. カラーパネルの「カラーパレット(左から3つめ)」タブを選択

color_keynote_step3

4. プルダウンメニューから「SmartHRColor」を選択

color_keynote_step4

5. SmartHRColorのパレットをお使いいただけます。

color_keynote_step5

Sketch で使う

下記の「SmatHRColor.sketchpallettes」をダウンロードし、Sketchプラグイン「Sketch Palletes」を使ってインストールしてください。

SmartHRColor.sketchpalette.zip

そのほか

ase , LESS , scss形式の色情報をダウンロードできます。

SmartHRColor_ase_less_scss.zip

ご利用方法

カラーコード一式は、SmartHRのオリジナルの組み合わせです。

サービスや会社などのブランドカラーとして「Primary Brand Color」「Secondary Brand Colors」の利用はお控えください。

© 2021, SmartHR, Inc.