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 | 주의, 경고 |