Tqoon web style

Color

Default 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

Button Default

Name button-default
Hex #888d94
RGB 136 141 148
CMYK 54 42 36 00
Brand Color

ブランドを表す固有色としてブランド全体に統一感を与え、ユーザに継続して同じ印象・メッセージを伝えることに効果的です。

Brand Color

Name brand-color
Hex #7700ee
RGB 119 0 238
CMYK 77 81 00 00
Text Color

伝達される情報の重要度を示すため「色の対比」が必要となります。対比の程度は背景色の明るさによって異なるため、「背景色対比の色」範囲内に該当する組み合わせを使用することを推奨します。

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
Primary Color

画面と構成要素に最もよく表示される基本色は「青緑色、灰色、および白色」です。 この色は、画面全体とコンポーネントにわたって最も広く使用されなければなりません。

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

赤は「危険」、緑は「安全」、黄は「注意」を意味する世界共通の色彩です。

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 注意、警告