Color
Gnb / Lnb / Snb / Body / Buttonなど、基本的に使用されるカラー
GNB Default
| Name | gnb-default |
|---|---|
| Hex | #f9f9f9 |
| RGB | 247 247 247 0.8 |
| CMYK | 03 02 02 00 |
LNB Default
SNB Default
| Name | lnb-default, snb-default |
|---|---|
| Hex | #ffffff |
| RGB | 255 255 255 |
| CMYK | 00 00 00 00 |
SNB Active
Button Active
| Name | snb-active, button-active |
|---|---|
| Hex | #7b8088 |
| RGB | 123 128 136 |
| CMYK | 59 48 41 00 |
Body Default
| Name | body-default |
|---|---|
| Hex | #eeeff0 |
| RGB | 238 239 240 |
| CMYK | 08 06 05 0 |
| Name | button-default |
|---|---|
| Hex | #888d94 |
| RGB | 136 141 148 |
| CMYK | 54 42 36 00 |
ブランドを表す固有色としてブランド全体に統一感を与え、ユーザに継続して同じ印象・メッセージを伝えることに効果的です。
Brand Color
| Name | brand-color |
|---|---|
| Hex | #7700ee |
| RGB | 119 0 238 |
| CMYK | 77 81 00 00 |
伝達される情報の重要度を示すため「色の対比」が必要となります。対比の程度は背景色の明るさによって異なるため、「背景色対比の色」範囲内に該当する組み合わせを使用することを推奨します。
Default Text Color
| Name | default-text-color |
|---|---|
| Hex | #727579 |
| RGB | 114 117 121 |
| CMYK | 63 53 48 01 |
背景色に対比するテキストカラーの組み合わせ
Primary text1
| Name | primary-text1 |
|---|---|
| background | #ffffff |
| text color | #333333 |
Primary text2
| Name | primary-text2 |
|---|---|
| background | #ffffff |
| text color | #767676 |
Primary text3
| Name | primary-text3 |
|---|---|
| background | #ffffff |
| text color | #b0b5b9 |
Primary text4
| Name | primary-text4 |
|---|---|
| background | #fafafa |
| text color | #767676 |
Primary text5
| Name | primary-text5 |
|---|---|
| background | #f5f5f5 |
| text color | #767676 |
Primary text6
| Name | primary-text6 |
|---|---|
| background | #e5e5e5 |
| text color | #767676 |
Primary text7
| Name | primary-text7 |
|---|---|
| background | #c7cbd6 |
| text color | #ffffff |
Primary text8
| Name | primary-text8 |
|---|---|
| background | #32323a |
| text color | #aeb2b7 |
Primary text9
| Name | primary-text9 |
|---|---|
| background | #28282e |
| text color | #aeb2b7 |
Primary text10
| Name | primary-text10 |
|---|---|
| background | #ffffff |
| text color | #53bee6 |
Primary text11
| Name | primary-text11 |
|---|---|
| background | #ffffff |
| text color | #ff6600 |
Primary text12
| Name | primary-text12 |
|---|---|
| background | #ffffff |
| text color | #ec6459 |
Primary text13
| Name | primary-text13 |
|---|---|
| background | #1fb5ad |
| text color | #ffffff |
Primary text14
| Name | primary-text14 |
|---|---|
| background | #95b75d |
| text color | #ffffff |
Primary text15
| Name | primary-text15 |
|---|---|
| background | #88a755 |
| text color | #ffffff |
Primary text16
| Name | primary-text16 |
|---|---|
| background | #e4ba00 |
| text color | #ffffff |
Primary text17
| Name | primary-text17 |
|---|---|
| background | #fa8564 |
| text color | #ffffff |
Primary text18
| Name | primary-text18 |
|---|---|
| background | #ec6459 |
| text color | #ffffff |
画面と構成要素に最もよく表示される基本色は「青緑色、灰色、および白色」です。 この色は、画面全体とコンポーネントにわたって最も広く使用されなければなりません。
Black Default
| Name | black-default |
|---|---|
| background | #32323a |
| text color | #b2b6b9 |
Black Light
| Name | black-light |
|---|---|
| background | #5b5b64 |
| text color | #b2b6b9 |
Black Dark
| Name | black-dark |
|---|---|
| background | #28282e |
| text color | #b2b6b9 |
White Default
| Name | white-default |
|---|---|
| background | #f1f2f7 |
| text color | #747475 |
White Light
| Name | white-light |
|---|---|
| background | #fff |
| text color | #747475 |
White Dark
| Name | white-dark |
|---|---|
| background | #bebfc4 |
| text color | #747475 |
Gray Default
| Name | gray-default |
|---|---|
| background | #f5f5f5 |
| text color | #747475 |
Gray Light
| Name | gray-light |
|---|---|
| background | #fff |
| text color | #747475 |
Gray Dark
| Name | gray-dark |
|---|---|
| background | #bebfc4 |
| text color | #e8e8e8 |
赤は「危険」、緑は「安全」、黄は「注意」を意味する世界共通の色彩です。
Safety Color RED
| Name | safety-color-red |
|---|---|
| RGB | 158 11 15 |
| Meaning | エラー、停止、危険、不可 |
Safety Color GREEN
| Name | safety-color-green |
|---|---|
| RGB | 0 166 81 |
| Meaning | 安全、進行、継続、成功 |
Safety Color YELLOW
| Name | safety-color-yellow |
|---|---|
| RGB | 255 204 102 |
| Meaning | 注意、警告 |